Custom Directive in nuxt js
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() }})
How To Create A Directive
You can make directives run on the client by adding the .client.js
extension to your directives file. This works for SSR
and static
rendering.
// plugins/directive.client.jsimport Vue from 'vue'Vue.directive('log-inner-text', { inserted: el => { cosnsole.log(el.innerText) }})
How To Insert Directives
In your nuxt.config.js
file add it as a plugin like this.
plugins: [ '~/plugins/directive.client.js']
Don't forget to save your directive in the plugins folder.
How To Use A Directive
<div v-log-inner-text>Hello</div>
Console logs
> "Hello"
I have written a medium article that goes a lot more in-depth on how this works. It shows you how to make a directive that makes an element animate into view on scroll: Nuxt - Creating Custom Directives For Static & SSR Sites
Tested in nuxt-edge ( its nuxt 2.0 that will be out in this or next month, but its pretty stable as it is).
nuxt.config.js
render: { bundleRenderer: { directives: { cww: function (vnode, dir) { const style = vnode.data.style || (vnode.data.style = {}) style.backgroundColor = '#ff0016' } } } }
page.vue
<div v-cww>X</div>
Resulting html from server:
<div style="background-color:#ff0016;">X</div>