Server-side directives aren't applied on custom components

[samburgers]

Version

v2.10.1

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-dyu6u

Steps to reproduce

Strange one... Nuxt Custom Directives don't seem to register on imported Components (but do work when added to regular template HTML)

  <section>
    <div v-custom1="`this works`">Hello</div>
    <HelloWorld v-custom1="`this doesnt work`"/>
  </section>

  render: {
    bundleRenderer: {
      directives: {
        custom1(el, dir) {
          console.log("custom1", dir);
        }
      }
    }
  },

Reproduction:

https://codesandbox.io/s/codesandbox-nuxt-dyu6u

What is expected ?

Should log both custom directives

What is actually happening?

Only logs the first custom directive. Adding a custom directive to a custom component doesnt register.

_{This bug report is available on Nuxt community (#c9915)}

[manniL]

Hey 👋

Looks like a vue-server-renderer bug to me. Will investigate.

Anyway, you are registering "only" server-side directives here. If you want the typical (client-side) one, you can use a Nuxt plugin to register them globally or use the directives attribute on a specific component or page.

Further read on server-side directives in my blog post

[manniL]

Closing here as it is a vue server renderer bug indeed. Further info in vuejs/vue#10733

[manniL]

Resolved via vuejs/vue#12661 (v2.7.9 and up)