Global registration in Nuxt leads to Vue ReferenceError

[Xuffasch]

Hello,

I've started a project with Nuxt (2.15.3) and tried vue-frag in my components, after using vue-fragment which does not work with server-side rendering.

The directive works as expected when I import it locally for each component.
But when I tried to globally register it as a plugin, a Vue ReferenceError is triggered.

The browser console only says it encounters an error fetching the favicon
On the server side, no error message is logged.

My Nuxt settings are :

in a new file ./plugins/vue-frag.js

import frag from "vue-frag"
Vue.directive(frag)

in nuxt.config.js, I have added the plugins property to the default export :

export default {
  components: true,
  buildModules: ['nuxt-vite', '@nuxtjs/tailwindcss'],
  tailwindcss: { 
    jit: true
  },
  plugins: [
    '~/plugins/vue-frag.js',
  ]
}

[privatenumber]

Thanks for the issue @Xuffasch

Do you mind providing a minimal reproduction repository of the bug? I can try debugging it there.

[Xuffasch]

Hello @privatenumber

Thanks for taking time to look into this issue and please bear with me, I'm not used to exchanges in GitHub, especially regarding open issues.

This is the repository of the project where I spotted the bug :

https://github.com/Xuffasch/nac-nuxt-vite

The master branch currently points to version from which I made the error screenshot.

[kwolniak]

@Xuffasch you forgot to import Vue, plugin should looks like:

import Vue from 'vue'
import frag from 'vue-frag'

Vue.directive('frag', frag)

[Xuffasch]

Very sorry guys. You take so much things for granted with Vite that you forget the basics.