Nuxt 3 issue

[kodeyeen]

Can't install it in Nuxt 3 project:

yarn add v1.22.19 info No lockfile found. warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json. [1/4] Resolving packages... warning nuxt > @nuxt/vite-builder > cssnano > cssnano-preset-default > postcss-svgo > svgo > stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility warning vue-tippy > tippy.js > popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1 [2/4] Fetching packages... warning vscode-languageclient@7.0.0: The engine "vscode" appears to be invalid. [3/4] Linking dependencies... warning " > vue-imask@6.4.3" has unmet peer dependency "vue@>=2.2.0". warning "vue-imask > vue-demi@0.13.11" has unmet peer dependency "vue@^3.0.0-0 || ^2.6.0". warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > postcss-loader@4.3.0" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0". warning "@nuxtjs/tailwindcss > @nuxt/postcss8 > css-loader@5.2.7" has unmet peer dependency "webpack@^4.27.0 || ^5.0.0". warning " > @tailwindcss/line-clamp@0.4.2" has unmet peer dependency "tailwindcss@>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1". warning " > sass-loader@13.2.0" has unmet peer dependency "webpack@^5.0.0". warning " > vue-i18n@9.2.2" has unmet peer dependency "vue@^3.0.0". warning " > vue-tippy@4.16.0" has unmet peer dependency "vue@^2.5.9". error An unexpected error occurred: "EPERM: operation not permitted, unlink '\Desktop\320_ddoctors\sites\ddoctors.ru\node_modules\esbuild-windows-64\esbuild.exe'". info If you think this is a bug, please open a bug report with the information provided in "\Desktop\320_ddoctors\sites\ddoctors.ru\yarn-error.log". info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command

[KABBOUCHI]

warning " > vue-tippy@4.16.0" has unmet peer dependency "vue@^2.5.9".

plz use v6:

yarn add vue-tippy@v6
# or
npm install vue-tippy@next

[kodeyeen]

warning " > vue-tippy@4.16.0" has unmet peer dependency "vue@^2.5.9".

plz use v6:

yarn add vue-tippy@v6
# or
npm install vue-tippy@next

Thanks, I've already found it somehow.

[kodeyeen]

Should I manually import tippy component where it is needed or install it globally in Nuxt 3?

[KABBOUCHI]

you can do whatever you want, I usually create a plugin:

// 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,
    })
})

[stafyniaksacha]

I have the same issue with nuxt rc-13, only with built version

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

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueTippy, {
    defaultProps: {
      theme: 'light',
    },
  })
})

[nuxt] [request error] [unhandled] [500] Cannot find module '/home/stf/projects/nuxt-frontend/.output/server/node_modules/vue-tippy/dist/vue-tippy.mjs' imported from /home/stf/projects/nuxt-frontend/.output/server/chunks/app/server.mjs

[KABBOUCHI]

I have the same issue with nuxt rc-13, only with built version

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

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueTippy, {
    defaultProps: {
      theme: 'light',
    },
  })
})

[nuxt] [request error] [unhandled] [500] Cannot find module '/home/stf/projects/nuxt-frontend/.output/server/node_modules/vue-tippy/dist/vue-tippy.mjs' imported from /home/stf/projects/nuxt-frontend/.output/server/chunks/app/server.mjs

do u have the latest version?

edit: tested and works fine with vue-tippy@^6.0.0-alpha.65

[kodeyeen]

you can do whatever you want, I usually create a plugin:

// 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,
    })
})

I already tried this. Even copy pasted your code, but it says "Failed to resolve component: VueTippy" Also tried import { Tippy } from 'vue-tippy' And also tried to delete .nuxt folder and rerun the app

In .nuxt/types/plugins.d.ts I see. InjectionType<typeof import("../../plugins/tippy").default> Strange

Nuxt version: ^3.0.0-rc.13 Vue tippy version: ^6.0.0-alpha.65

[KABBOUCHI]

you can do whatever you want, I usually create a plugin:

// 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,
    })
})

I already tried this. Even copy pasted your code, but it says "Failed to resolve component: VueTippy" Also tried import { Tippy } from 'vue-tippy' And also tried to delete .nuxt folder and rerun the app

In .nuxt/types/plugins.d.ts I see. InjectionType<typeof import("../../plugins/tippy").default> Strange

Nuxt version: ^3.0.0-rc.13 Vue tippy version: ^6.0.0-alpha.65

works for me https://github.com/KABBOUCHI/nuxt-3-vue-tippy - https://nuxt-3-vue-tippy.vercel.app/

did u try yarn nuxt upgrade? maybe try to delete yarn.lock and node_modules and install the latest deps

[kodeyeen]

you can do whatever you want, I usually create a plugin:

// 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,
    })
})

I already tried this. Even copy pasted your code, but it says "Failed to resolve component: VueTippy" Also tried import { Tippy } from 'vue-tippy' And also tried to delete .nuxt folder and rerun the app In .nuxt/types/plugins.d.ts I see. InjectionType<typeof import("../../plugins/tippy").default> Strange Nuxt version: ^3.0.0-rc.13 Vue tippy version: ^6.0.0-alpha.65

works for me https://github.com/KABBOUCHI/nuxt-3-vue-tippy - https://nuxt-3-vue-tippy.vercel.app/

did u try yarn nuxt upgrade? maybe try to delete yarn.lock and node_modules and install the latest deps

It worked somehow. Thanks!