/lib/directives/
  index.js
  v-focus.js
/plugins/
  directives.js
nuxt.config.js

Nuxt File Structure

Basic implementation

from: Custom Directives

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

Then in a template, you can use the new v-focus attribute on any element, like this:

<input v-focus>

Modular v-focus

module.exports = {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
}

File: /lib/directives/v-focus.js

// Register a global custom directive called `v-focus`
Vue.directive('focus', require('./lib/directives/v-focus'))

Then in a template, you can use the new v-focus attribute on any element, like this:

<input v-focus>

Auto import directives

// https://webpack.js.org/guides/dependency-management/#require-context
const requireComponent = require.context(
	// Look for files in the current directory
	'.',
	// Do not look in subdirectories
	false,
	// Only include "v-" prefixed .js files
	/v-[\w-]+\.js$/
)

const directives = {}
// For each matching file name...
requireComponent.keys().forEach(fileName => {
	// Get the component config
	const componentConfig = requireComponent(fileName)
	// Get the PascalCase version of the component name
	const componentName = fileName
		// Remove the "./_v-" from the beginning
		.replace(/^\.\/v-/, '')
		// Remove the file extension from the end
		.replace(/\.\w+$/, '')

	// Globally register the component
	directives[componentName] = componentConfig.default || componentConfig
})

export { directives }

File: /lib/directives/index.js

module.exports = {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
}

File: /lib/directives/v-focus.js

import Vue from 'vue'
import { directives } from './lib/directives'
Object.entries(directives).forEach(([key, value]) => Vue.directive(key, value))

Main JavaScript

Nuxt config and implementation

import Vue from 'vue'
import { directives } from '../lib/directives'
Object.entries(directives).forEach(([key, value]) => Vue.directive(key, value))

File: /plugins/directives.js

module.exports = {
    plugins: [
        '~/plugins/directives'
    ]
}

Snippet: /nuxt.config.js

How to add more directives

Store your files in /lib/directives.
Prepend your file with v- so your file look like this: v-directive-name.js.

Example

/lib/directives/
  index.js
  v-focus.js
  v-attach-my-animation.js

File Structure

For example v-attach-my-animation.js.
Directive name would be: attach-my-animation, then your template would be:

<div v-attach-my-animation>
</div>

Always kebab-case your JavaScript files for Vue directives, a reminder that HTML is case insensitive!