Tippy use with Nuxt 3

[Tchoupinax]

Hello,

I totally love this project and I used it a lot with a Nuxt 2 project. Today, I'm working on a Nuxt 3 project and I want to install the directive v-tippy. However, I met some issue. I ran between issues I found on this project but nothing helped me.

Does Vue 3 / Nuxt 3 is supported for this project and if it is the case, how can I make it working?

import VueTippy from 'vue-tippy';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueTippy, {
    directive: 'tippy', // => v-tippy
    component: 'tippy', // => <tippy/>
    componentSingleton: 'tippy-singleton', // => <tippy-singleton/>,
    defaultProps: {
      arrow: true
    },
    flipDuration: 0,
    // popperOptions: {
    //   modifiers: {
    //     preventOverflow: {
    //       enabled: false,
    //     },
    //   },
    // },
  })
})

✔ Vite server built in 28ms                                                                                                             22:46:04
✔ Vite server built in 24ms                                                                                                             22:46:04
[Vue warn]: Failed to resolve directive: tippy
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'getSSRProps')

Thank you Have a nice day!

[KABBOUCHI]

hi @Tchoupinax, are you using client mode plugin? it should work server-side.

// plugins/tippy.ts

import VueTippy from 'vue-tippy';
import 'tippy.js/dist/tippy.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueTippy, {
    defaultProps: {
      arrow: true
    },
    flipDuration: 0,
  })
})

// pages/index.vue

<template>
  <div>
    <button v-tippy="{ content: 'hi' }" >Hello</button>

    <tippy content="123">
        <button>Hello</button>
    </tippy>
  </div>
</template>

[Tchoupinax]

Hello @KABBOUCHI Yes it works in this way :) I used it as client plugin and indeed the error come from that.

Thank you