I am developing a Drawflow application using Vuejs/Nuxtjs based on the code mentioned here. When I install the package element-plus and start the application then I get the error:

Vue packages version mismatch:

- [email protected]
- [email protected]

If I remove that package then everything works fine.

I tried following things based on comments mentioned in various answers:

1. Remove node_modules and package-lock.json and install again with npm install.
2. Run the npm audit fix --force
3. Run the npm update

But nothing worked for me. Can someone please let me know what do I need to do so that I don't get this error and make everything work properly?

Complete error from terminal:

Vue packages version mismatch:

- [email protected]
- [email protected]

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


  
  Vue packages version mismatch:
  
  - [email protected]
  - [email protected]
  
  This may cause things to work incorrectly. Make sure to use the same version for both.
  
  at Object.<anonymous> (node_modules/vue-server-renderer/index.js:8:9)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
  at Module.load (internal/modules/cjs/loader.js:928:32)
  at Function.Module._load (internal/modules/cjs/loader.js:769:14)
  at Module.require (internal/modules/cjs/loader.js:952:19)
  at n (node_modules/jiti/dist/v8cache.js:2:2472)
  at Object.<anonymous> (node_modules/@nuxt/vue-renderer/dist/vue-renderer.js:19:27)
  at Module.o._compile (node_modules/jiti/dist/v8cache.js:2:2778)
  at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)


   ╭────────────────────────────────────────────────────────────────────────────────────────────╮
   │                                                                                            │
   │   ✖ Nuxt Fatal Error                                                                       │
   │                                                                                            │
   │   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. 

Following is my complete package.json file:

{
  "name": "my-project",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@element-plus/icons": "^0.0.11",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/dotenv": "^1.4.1",
    "bootstrap": "^4.6.0",
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.15.1",
    "drawflow": "^0.0.52",
    "element-plus": "^1.2.0-beta.3",
    "nuxt": "^2.15.8",
    "url-loader": "^4.1.1",
    "vue-multiselect": "^2.1.6"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@nuxtjs/eslint-config": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@types/drawflow": "^0.0.3",
    "eslint": "^7.29.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.12.1"
  }
}

CodePudding user response：

Element is a Vue3 UI library, so it is indeed not compatible with Nuxt2 (using Vue2). Hence why you're getting the error: it is not retro-compatible with Vue2.

Meanwhile, Element is totally compatible with Vue2 and may be a good-enough fit.

Do you need to use exactly this one btw? There is a lot of choices when it comes down to CSS frameworks compatible with both Vue2 and Vue3. Not all of them are, but most do.