Custom Directive in nuxt js - vue.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()
}
})

Answer 2

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.js
import Vue from 'vue'
Vue.directive('log-inner-text', {
inserted: el => {
console.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

Answer 3

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>

Answer 4

For anyone else coming here, the accepted answer allows you to run an SSR-only directive. This is helpful but a little unintuitive if you want to have a directive run everywhere.
If you only use nuxt.config.js to implement a directive via render, it will not be supported on the client-side without also adding a directive plugin and adding it to the config (see the How to Create a Directive Answer).
To test this out, try this experiment:
Follow the instructions to create directive using plugins (make one called loading)
Vue.directive('loading', function (el, binding) {
console.log('running loading directive client side')
})
Add this to your nuxt.config:
render: {
bundleRenderer: {
directives: {
loading (element, binding) {
console.log('running loading directive server side')
}
}
}
}
Use the directive on a Vue page file like:
<div v-loading="true">Test</div>
On page load, you will see both the client-side and SSR directives run. And if you remove the client-side directive, you will see errors thrown like the OP had: [Vue warn]: Failed to resolve directive: loading.
Tested on nuxt 2.12.2.