Cannot add any custom directive (locally or globally)

Environment

• Operating System: Darwin
• Node Version: v16.13.0
• Nuxt Version: 3.0.0-27277498.850ef69
• Package Manager: npm@8.1.0
• Bundler: Vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

Describe the bug

It’s impossible to add any custom directive (locally or globally).

I get this: [SSR] Error transforming /Users/Me/Desktop/nuxt3-app/pages/index.vue: SyntaxError: Custom directive is missing corresponding SSR transform and will be ignored.

Reproduction

https://codesandbox.io/s/elastic-frog-4c8fr?file=/pages/index.vue

Additional context

No response

Logs

No response

[speedyvic]

Hi.

Adding the patch from this post patch-vue-directive-ssr solved the issue with styleclass/ripple primevue directives. Helmes, please try, hope it works for you as well. Do not forget to remove the vue compilerOptions from nuxt.config.

Boomer! Started experiencing Vue Hydration Node Mismatchs. Perhaps the patch uncover something I’m doing wrong. Update: The Node Mismatchs are being created by Toast.

[andysay]

I tried with your version. Still not working for me and neither on codesandbox.io…

in nuxt config try add this

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      directiveTransforms: {
        focus: () => ({
          props: [],
          needRuntime: true
        })
      }
    }
  }
})