nuxt3 directives are not included and not defined although using exact docs method

Question

Trying to use custom directives in nuxtjs. Using the exact configurations that is used on the docs: https://nuxt.com/docs/guide/directory-structure/plugins/#vue-directives

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.directive('myd', {
        mounted (el) {
        vel.focus()
    },
    getSSRProps (binding, vnode) {
         // you can provide SSR-specific props here
        return {}
    }
})

And then in a component:

<template>
  <div>
    <div v-myd="'tmp'"></div>
   </div>
</template>

I've also tried different combination of naming (such as myd, v-myd).

I've also tried tried w/o nuxt.config.ts

  plugins: [
    {src: '~/plugins/myd.client', mode: 'client'},
  ]

No matter what I do I keep receiving the error:

[Vue warn]: Failed to resolve directive: myd                                                                   12:27:00
[nuxt] [request error] [unhandled] [500] Cannot read property 'getSSRProps' of undefined                       12:27:00
  at Module.ssrGetDirectiveProps (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:482:42)
  at _sfc_ssrRender (./components/MessageBubble.vue:228:225)
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:710:17)
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:644:16)
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:94:12)
  at ./components/Conversation.vue:283:42
  at Module.ssrRenderList (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:443:13)
  at ./components/Conversation.vue:281:34
  at Module.ssrRenderList (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:443:13)
  at ./components/Conversation.vue:273:32

Tried both Nuxt 3.2.0 and 3.2.2

Any help? Thanks.

Answer 1

{src: '~/plugins/myd.client', mode: 'all'},