Nuxt•3mo ago

Is floating-vue Nuxt4 compatible?

Following the Nuxt3 installation process described here: https://floating-vue.starpad.dev/guide/installation#nuxt-3, I am trying to use akryum/floating-vue v5.2.2 (the lastest) in a Nuxt4 environment but nothing works as expected.

Cannot read properties of undefined (reading 'trim')

Does anyone here use it in a Nuxt4 environment?

9 Replies

kapa.ai•3mo ago

Hi @Romain 'Maz' B.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about the compatibility of floating-vue (akryum/floating-vue v5.2.2) with Nuxt 4. There are no references to floating-vue usage, compatibility, or known issues in a Nuxt 4 environment in the provided documents. If you are encountering the error Cannot read properties of undefined (reading 'trim'), it may be related to a breaking change or incompatibility, but I cannot confirm this or provide a solution based on the current knowledge sources. For the most accurate and up-to-date information, I recommend checking the official floating-vue documentation or its GitHub repository for Nuxt 4 support and open issues. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@601146927005827074> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Cake•3mo ago

@Romain 'Maz' B. not sure, but you can try making your own plugin to install it

felixmany•3mo ago

@Romain 'Maz' B. I can help you

Cake•3mo ago

what's holding you back?

felixmany•3mo ago

@Cake I can help anything, as you want

Cake•3mo ago

how about you help the OP first? you said you could but you still haven't helped

felixmany•3mo ago

I can help OP

Romain 'Maz' B.OP•3mo ago

You are free to help me, just do it :] For now I looked how the module is integrated to Nuxt3 and compared other Nuxt4 integrations. It looks quite similar so I mostly copied/pasted it into a local module:

import { defineNuxtModule, addPlugin } from '@nuxt/kit'
import FloatingVue from 'floating-vue'

export default defineNuxtModule({
  meta: {
    name: 'floating-vue',
    configKey: 'floatingVue',
    compatibility: {
      nuxt: '>=4.0.0',
    },
  },
  defaults: {
    enabled: true
  },

  setup (options, nuxt) {
    // @TODO remove when floating-ui supports native ESM
    nuxt.options.build.transpile.push('floating-vue', '@floating-ui/core', '@floating-ui/dom')

    // SSR support for v-tooltip directive
    nuxt.options.vue.compilerOptions.directiveTransforms = nuxt.options.vue.compilerOptions.directiveTransforms || {}
    nuxt.options.vue.compilerOptions.directiveTransforms.tooltip = () => ({
      props: [],
      needRuntime: true,
    })
    nuxt.options.css.push('floating-vue/dist/style.css')
    addPlugin(defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(FloatingVue)
    }))
  }
})

import { defineNuxtModule, addPlugin } from '@nuxt/kit'
import FloatingVue from 'floating-vue'

export default defineNuxtModule({
  meta: {
    name: 'floating-vue',
    configKey: 'floatingVue',
    compatibility: {
      nuxt: '>=4.0.0',
    },
  },
  defaults: {
    enabled: true
  },

  setup (options, nuxt) {
    // @TODO remove when floating-ui supports native ESM
    nuxt.options.build.transpile.push('floating-vue', '@floating-ui/core', '@floating-ui/dom')

    // SSR support for v-tooltip directive
    nuxt.options.vue.compilerOptions.directiveTransforms = nuxt.options.vue.compilerOptions.directiveTransforms || {}
    nuxt.options.vue.compilerOptions.directiveTransforms.tooltip = () => ({
      props: [],
      needRuntime: true,
    })
    nuxt.options.css.push('floating-vue/dist/style.css')
    addPlugin(defineNuxtPlugin((nuxtApp) => {
      nuxtApp.vueApp.use(FloatingVue)
    }))
  }
})

Not working right now but at least I understood how module integration woks, need to debug the initial error message, it didn't changed with this integration

Gaming

Programming

Is floating-vue Nuxt4 compatible?

Did you find this page helpful?