Nuxt 3 custom directive error.

[Lucas-Gruber]

When is define a custom directive in nuxt.config.ts:

runtimeConfig: {
    public: {
      motion: {
        directives: {
          'default-button': {
            initial: {
              scale: 1,
            },
            hovered: {
              scale: 1,   // This is set because the initial state doesnt work on tapped variant (Issue #63 )
            },
            tapped: {
              scale: 0.97,
            },
          },
          'pop-bottom': {
            initial: {
              scale: 0,
              opacity: 0,
              y: 100,
            },
            visible: {
              scale: 1,
              opacity: 1,
              y: 0,
            },
          },
        },
      },
    },
  },```

And when i now use the Directive: 
```vue
<button
  v-motion-default-button
  type="button"
  class="p-2 mt-2 rounded-lg bg-secondary"
  @click="someAction"
>
  Some button
</button>

I become following error:

[Vue warn]: Failed to resolve directive: motion-default-button
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'getSSRProps')
  at Module.ssrGetDirectiveProps (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:468:40)  
  at _sfc_ssrRender (./components/home/PARRENT_COMPONENT.vue:46:1419)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:683:9)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:631:12)  
  at Module.ssrRenderComponent (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:86:10)  
  at _sfc_ssrRender (./pages/PARRENT_PAGE.vue:297:32)  
  at renderComponentSubTree (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:683:9)  
  at ./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:629:25  
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)  
  at async unrollBuffer$1 (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:870:16)

PARRENT_COMPONENT and PARRENT_PAGE replaced with the real component and page of course.

[salemiranloye]

I am having the same issue did you get it resolved?

[BobbieGoede]

The fix for this issue has already been merged but there hasn't been a new release since then. I have a workaround, but I haven't tested if this works after build, let me know if this works in your project.

In nuxt.config.ts

modules: [
  "@vueuse/motion/nuxt",
  // removes @vueuse/motion plugin
  (_opts, nuxt) => {
    nuxt.options.plugins = nuxt.options.plugins.filter(
      (x) =>
        typeof x !== "string" &&
        !x.src.includes("@vueuse/motion/dist/runtime/templates/motion")
    );
  },
]

And add this plugin plugins/motion-replacement.ts

import { MotionPlugin } from "@vueuse/motion";
import { defineNuxtPlugin, useRuntimeConfig } from "#app";

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();

  nuxtApp.vueApp.use(MotionPlugin, config.public.motion);
});