How to fix "Vue package version mismatch" error on Vue js 3

Question

When I run npm run dev on nuxt js, I get the following error:

FATAL                                                                                                                                                          14:16:02  

Vue packages version mismatch:

- vue@3.2.40
- vue-server-renderer@2.7.12

This may cause things to work incorrectly. Make sure to use the same version for both.



  Vue packages version mismatch:

  - vue@3.2.40
  - vue-server-renderer@2.7.12

  This may cause things to work incorrectly. Make sure to use the same version for both.

  at Object.<anonymous> (node_modulesvue-server-rendererindex.js:8:9)
  at Module._compile (node:internal/modules/cjs/loader:1126:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)
  at Module.load (node:internal/modules/cjs/loader:1004:32)
  at Function.Module._load (node:internal/modules/cjs/loader:839:12)
  at Module.require (node:internal/modules/cjs/loader:1028:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object.<anonymous> (node_modules@nuxtvue-rendererdistvue-renderer.js:20:27)
  at Module._compile (node:internal/modules/cjs/loader:1126:14)
  at Object.Module._extensions..js (node:internal/modules/cjs/loader:1180:10)

I tried to solve it by removing node modules and npm install but it still doesn't seem to solve my problem, any help on this, it's been a while since I tried googling it and still doesn't give me Any answers to my question, this happens when I install github co Pilot This is what my package.json looks like

{
  "name": "cashier",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/i18n": "^7.2.2",
    "core-js": "^3.15.1",
    "dotenv": "^16.0.2",
    "jwt-decode": "^3.1.2",
    "nuxt": "^2.13.3",
    "vue": "^3.2.40",
    "vue-google-charts": "^1.1.0",
    "vue-server-renderer": "^2.7.12",
    "vuetify": "^2.5.5",
    "vuex-persistedstate": "^4.1.0"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.12.1",
    "eslint-config-prettier": "^8.3.0",
    "prettier": "^2.3.2"
  }
}

Answer 1

Nuxt2 and Vue3 are incompatible and one will use a package version that is incompatible with the other.

Anyway, Nuxt2 is only suitable for use with Vue2. If you want to use Vue3, you need to use Nuxt3.

But if you use Nuxt (2 or 3), you don't need to install Vue because it is already built into Nuxt.

It is important to check whether the package you are using is compatible with its version.

Reinstalling the package won't fix anything, for the simple reason that your package.json is still wrong (some package versions are incompatible with other package versions) and is waiting for a fix: Select Versions that can work together.

Also, you can even remove vue-server-renderer IMO since it might be a dependency of another package.

PS: Github co-pilot has nothing to do with it. Dotenv does not require installation as it is already built into Nuxt. And you probably shouldn't install Vuetify and a module of the same name at the same time. You also have eslint-config-prettier, but apparently doesn't use ESlint at all.

You can configure ESlint Prettier correctly using this answer: https://stackoverflow.com/a/68880413/8816585