Custom Directive in nuxt js

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.

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>