node.jsnpmvuejs3vue-cli

npm WARN deprecated vue@2.7.16 while I using vue 3

I am using Vue 3, but I encountered the following error message: "npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained." Why am I getting this error?

There are additional deprecated packages shown in the screenshot. enter image description here

another screenshot enter image description here

package.json file

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vite serve --host",
    "build": "run-p type-check build-only",
    "test:unit": "vitest --environment jsdom",
    "test:e2e": "start-server-and-test preview http://localhost:4173/ 'cypress open --e2e'",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "build-only": "vite build",
    "coverage": "vitest run --coverage --environment jsdom",
    "dev": "vite ",
    "format": "prettier .  --write",
    "preview": "vite preview --port 4173",
    "test": "vitest",
    "test:e2e:ci": "start-server-and-test preview http://localhost:4173/ 'cypress run --e2e'",
    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
    "test:vitest:ui": "vitest  --environment jsdom --ui",
    "cypress:open": "cypress open"
  },
  "dependencies": {
    "@prosemirror-adapter/vue": "^0.2.5",
    "@vue/cli": "^5.0.8",
    "axios": "^0.21.1",
    "core-js": "^3.35.1",
    "crelt": "^1.0.6",
    "highlight.js": "^11.9.0",
    "lowlight": "^2.9.0",
    "orderedmap": "^2.1.1",
    "pinia": "^2.1.4",
    "prosemirror-commands": "^1.5.2",
    "prosemirror-dropcursor": "^1.8.1",
    "prosemirror-gapcursor": "^1.3.2",
    "prosemirror-history": "^1.3.2",
    "prosemirror-inputrules": "^1.4.0",
    "prosemirror-keymap": "^1.2.2",
    "prosemirror-schema-basic": "^1.2.2",
    "prosemirror-schema-list": "^1.3.0",
    "prosemirror-state": "^1.4.3",
    "sortablejs": "^1.15.2",
    "sortablejs-vue3": "^1.2.11",
    "vue": "^3.3.4",
    "vue-class-component": "^8.0.0-0",
    "vue-i18n": "^9.9.1",
    "vue-loader": "^16.0.0",
    "vue-router": "^4.2.5",
    "youtube-player": "^5.6.0"
  },
  "devDependencies": {
    "@pinia/testing": "^0.0.14",
    "@rushstack/eslint-patch": "^1.7.2",
    "@testing-library/vue": "^6.6.1",
    "@types/jsdom": "^20.0.0",
    "@types/node": "^16.18.80",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@vitejs/plugin-vue": "^3.1.0",
    "@vitest/coverage-c8": "^0.23.4",
    "@vitest/ui": "^0.23.4",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.4.18",
    "@vue/eslint-config-prettier": "^7.0.0",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/test-utils": "^2.4.4",
    "@vue/tsconfig": "^0.1.3",
    "cypress": "^13.6.4",
    "eslint": "^8.56.0",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-cypress": "^2.15.1",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^9.21.1",
    "happy-dom": "^6.0.4",
    "jsdom": "^23.2.0",
    "npm-run-all": "^4.1.5",
    "prettier": "2.7.1",
    "sass": "^1.70.0",
    "sass-loader": "^8.0.2",
    "start-server-and-test": "^1.14.0",
    "typescript": "~4.7.4",
    "vite": "^3.2.8",
    "vitest": "^0.23.4",
    "vue-loader-v16": "^16.0.0-beta.5.4",
    "vue-tsc": "^0.40.7"
  }
}

I aim to update all deprecated packages.

Solution

  • In your package.json, you are referencing some dependencies (ex: "vue-class-component") which depends on vue 2. THis is the cause of your error