Vue-virtual-scroller and Nuxt

[CreaWebDev]

Describe the bug

I cannot get vue-virtual-scroller to work with my nuxt/vue3 App. I use the newest version of Nuxt: 3.7.4.
Searching the internet I found a working codepen with nuxt 2.15.2, so I believe it is the Nuxt version, that is my problem.

Anybody have the same issue?

Reproduction

✘ [ERROR] No matching export in "node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

node_modules/.pnpm/[email protected][email protected]/node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js:4:7:
  4 │ import Vue from 'vue';
    ╵        ~~~

ERROR error while updating dependencies: 14.58.47
Error: Build failed with 1 error:
node_modules/.pnpm/[email protected][email protected]/node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js:4:7: ERROR: No matching export in "node_modules/.pnpm/[email protected]/node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
at failureErrorWithLog (/home/piarj/cloud-frontend-ver2/cloud-v2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1649:15)
at /home/piarj/cloud-frontend-ver2/cloud-v2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1058:25
at /home/piarj/cloud-frontend-ver2/cloud-v2/node_modules/.pnpm/[email protected]/node_modules/esbuild/lib/main.js:1525:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

ℹ Vite client warmed up in 4938ms 14.58.47
✔ Nitro built in 939 ms nitro 14.58.47

System Info

"devDependencies": {
    "@nuxt/devtools": "^0.4.6",
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@nuxtjs/i18n": "npm:@nuxtjs/[email protected]",
    "@nuxtjs/tailwindcss": "^6.8.0",
    "@playwright/test": "^1.39.0",
    "@tailwindcss/forms": "^0.5.6",
    "@types/file-saver": "^2.0.6",
    "@types/node": "^18.18.6",
    "dayjs": "^1.11.10",
    "eslint": "^8.51.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-prettier": "^4.2.1",
    "lint-staged": "^13.3.0",
    "nuxt": "^3.7.4",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.2.8",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.4.2",
    "@fortawesome/free-brands-svg-icons": "^6.4.2",
    "@fortawesome/free-regular-svg-icons": "^6.4.2",
    "@fortawesome/free-solid-svg-icons": "^6.4.2",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "@headlessui/vue": "^1.7.16",
    "@mapbox/mapbox-gl-geocoder": "^5.0.1",
    "@pinia/nuxt": "^0.4.11",
    "@tanstack/vue-table": "^8.10.7",
    "@vee-validate/nuxt": "^4.11.8",
    "@vee-validate/zod": "^4.11.8",
    "@vueuse/core": "^10.5.0",
    "@zag-js/combobox": "^0.6.0",
    "@zag-js/toast": "^0.6.0",
    "@zag-js/vue": "^0.6.0",
    "class-variance-authority": "^0.5.3",
    "dotenv": "^16.3.1",
    "eslint-plugin-tailwindcss": "^3.13.0",
    "file-saver": "^2.0.5",
    "filesaver": "^0.0.13",
    "jszip": "^3.10.1",
    "mapbox-gl": "^2.15.0",
    "maska": "^2.1.10",
    "pinia": "^2.1.7",
    "tailwind-merge": "^1.14.0",
    "tailwind-scrollbar": "^3.0.5",
    "vue-mapbox-ts": "^0.9.8",
    "zod": "^3.22.4",
    "vue-virtual-scroller": "^1.1.2"
  }

Used Package Manager

npm

Validations

• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[cn-2k]

For those who want to use this lib with Nuxt 3:

1 - Create a plugins folder and a file named virtualScroller.ts
2 - Paste the code below inside the file:

import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
import {
  DynamicScroller,
  DynamicScrollerItem,
  RecycleScroller,
} from "vue-virtual-scroller";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("RecycleScroller", RecycleScroller);
  nuxtApp.vueApp.component("DynamicScroller", DynamicScroller);
  nuxtApp.vueApp.component("DynamicScrollerItem", DynamicScrollerItem);
});

Explanation: With Nuxt 3 we have to register our components inside the /plugins folder, since we have to do this with vue-virtual-scroller, just register the components inside it and use them normally in your app (there is no need to import them in anywhere because Nuxt already does it for us).

Check the Nuxt 3 doc for more: https://nuxt.com/docs/guide/directory-structure/plugins

[makamekm]

No, it does not work:

Error: Build failed with 1 error:
node_modules/vue-virtual-scroller/dist/vue-virtual-scroller.esm.js:4:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"

[Redemption198]

I found a solution, you just need to install the next branch pnpm add vue-virtual-scroller@next.

[NaMoCv]

scrollToBottom not working..