Custom Directive in nuxt js

Question

is there a way how to write a custom directive in nuxt js, which will work for ssr and also for frontend (or even for ssr only)?

I tried it like in following documentation: https://nuxtjs.org/api/configuration-render#bundleRenderer

so I added this code:

  module.exports = {
      render: {
        bundleRenderer: {
          directives: {
            custom1: function (el, dir) {
              // something ...
            }
          }
        }
      }
    }

to nuxt.config.js

then I use it in template as:

<component v-custom1></component>

but it doesn't work, it just throw the frontend error

[Vue warn]: Failed to resolve directive: custom1

And it doesn't seem to be working even on server side.

Thanks for any advice.

Answer 1

If you want use custom directives in Nuxt you can do the following:

• Create a file inside plugins folder, for example, directives.js
• In nuxt.config.js add something like plugins: ['~/plugins/directives.js']

In your new file add your custom directive like this:

import Vue from 'vue'

Vue.directive('focus', {
  inserted: (el) => {
    el.focus()
  }
})