Vue package dependency conflict, Found vue@2.6.14

Question

I am inheriting a project and it was built on Vue 2, I believe the problem is I have Vue 3 installed on my system (I am on macOS).

Rather new to Vue so I apologize if the answer is obvious.

My package.json... You can see here that my vue version is 2.6.10, I believe the error is stating I have 3.0 installed, possibly globally, on my host system. I am not sure how to get around this, I need Vue 3 installed on my system for another project, I believe that is what is conflicting.

{
  "name": "test-vuetify",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@fontsource/roboto": "^4.5.7",
    "axios": "^0.21.4",
    "core-js": "^2.6.5",
    "plotly.js": "^1.52.2",
    "plotly.js-cartesian-dist-min": "^1.54.5",
    "sinon": "^8.1.1",
    "socket.io-client": "^4.4.1",
    "vue": "^2.6.10",
    "vue-class-component": "^7.0.2",
    "vue-json-csv": "^1.2.12",
    "vue-moment": "^4.1.0",
    "vue-property-decorator": "^8.1.0",
    "vue-router": "^3.0.3",
    "vue-toast-notification": "^3.0.0",
    "vue-toasted": "^1.1.28",
    "vuetify": "^2.4.4",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@mdi/font": "^4.2.95",
    "@types/jest": "^24.0.19",
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-typescript": "^3.11.0",
    "@vue/cli-plugin-unit-jest": "^4.2.2",
    "@vue/cli-service": "^3.11.0",
    "@vue/test-utils": "1.0.0-beta.31",
    "canvas": "^2.9.0",
    "jest-canvas-mock": "^2.2.0",
    "sass": "^1.18.0",
    "sass-loader": "^7.1.0",
    "typescript": "^3.4.3",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

The error when I do npm install...

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: vue-toast-notification@3.0.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR!   vue@"^2.6.10" from the root project
npm ERR!   peer vue@"2.x" from @vue/test-utils@1.0.0-beta.31
npm ERR!   node_modules/@vue/test-utils
npm ERR!     dev @vue/test-utils@"1.0.0-beta.31" from the root project
npm ERR!   7 more (vue-class-component, vue-jest, vue-json-csv, vue-moment, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0" from vue-toast-notification@3.0.0
npm ERR! node_modules/vue-toast-notification
npm ERR!   vue-toast-notification@"^3.0.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: vue@3.2.37
npm ERR! node_modules/vue
npm ERR!   peer vue@"^3.0" from vue-toast-notification@3.0.0
npm ERR!   node_modules/vue-toast-notification
npm ERR!     vue-toast-notification@"^3.0.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

user_7864365 · Answer

This error source is in vue-toast-notification@3.0.0:

npm ERR! While resolving: vue-toast-notification@3.0.0

The issue that is mentioned:

npm ERR! Found: vue@2.6.14
…
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^3.0" from vue-toast-notification@3.0.0

This error means that library vue-toast-notification@3.0.0 requires Vue in version 3 to work correctly (there is mentioned version as peer dependency, I also confirmed it on their docs page). In other words, you're using an incompatible library for your project. You have Vue@2 project where you installed a dependency package dedicated for Vue@3 project. To fix it you need to install vue-toast-notification as a dependency with a version dedicated for vue@2. In this case, it should be vue-toast-notification@^0.6.

Vue package dependency conflict, Found vue@2.6.14

1 Answers