Vue packages version mismatch error while installing Nuxt.js: How to resolve?

Question

I am trying to install Nuxt.js v3.4.2 using the command npx nuxt init nuxt3-demo and then running npm install. However, I am getting the following error message:

ERROR: Vue packages version mismatch:
- [email protected]
- [email protected]
This may cause things to work incorrectly. Make sure to use the same version for both.

I have tried updating the 'vue' package, but it did not solve the issue. My package.json file looks like this:

  {
    "name": "nuxt-app",
    "private": true,
    "scripts": {
      "build": "nuxt build",
      "dev": "nuxt dev",
      "generate": "nuxt generate",
      "preview": "nuxt preview",
      "postinstall": "nuxt prepare"
    },
    "devDependencies": {
      "@types/node": "^18",
      "nuxt": "^3.4.2"
    }
  }

Can anyone suggest a solution for this error?

Answer 1

As a solution, you can:

1 - try npm install after removing the "node_modules" folder and the "package-lock.json" file.

2 - Try yarn install.

3 - Try again with the new version, v3.4.3.

I edited this because, as Wongjn said, I asked for clarification. However, providing a minimal, reproducible example would be nice, given the nature of the problem and how hard replicating the issue is.

Answer 2

This is because vue-server-renderer is only for Vue2 and not for Vue3. Source

Just remove the package vue-server-renderer, you'll get SSR features from nuxt.

npm remove vue-server-renderer

Then, delete your node_modules folder, then try again: npx nuxt init nuxt3-demo.