How to fix @vue/cli Vulnerabilities?

Question

I having vuejs-3 project and I am looking for 0 vulnerabilities. When I do npm install I am getting 48 vulnerabilities with current version node and npm. Even if I try npm audit fix --force still Issue is the same. Can someone help me please?

C:\Users\achalapa\git\cnsr-odrplat-wcm-cld-vue\mcafee-consumer-wcm-cld-vue.lib> npm install

-npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained

-npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained

-npm WARN deprecated [email protected]: this library is no longer supported

-npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

-npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.

-npm WARN deprecated [email protected]: 3.x is no longer supported

-npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

-npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

-npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained

-npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'

-added 923 packages, and audited 1694 packages in 4m

-105 packages are looking for funding
  run `npm fund` for details

-48 moderate severity vulnerabilities

-To address issues that do not require attention, run:
  npm audit fix

-To address all issues (including breaking changes), run:
  npm audit fix --force

48 Vulnerabilities are coming out when we add below packages

*"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-typescript": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "4.5.13",*

Is this okay to proceed? Is this harmful for my project?

package.json

{
  "name": "mcafee-consumer-wcm-cld-vue.lib",
  "version": "1.0.0",
  "private": true,
  "sideEffects": false,
  "scripts": {
    "bundle": "set NODE_ENV=production && npm run lint && webpack --config webpack.dlp.js --progress --mode=production",
    "bundle-dev": "set NODE_ENV=development && npm run lint && webpack --config webpack.dlp.js --progress --mode=development",
    "lint": "eslint . --ext .ts,.js --ignore-pattern src/**/*.d.ts",
    "lint-and-fix": "eslint . --ext .ts --fix"
  },
  "dependencies": {
    "@vuelidate/core": "^2.0.0-alpha.18",
    "bootstrap": "^5.0.1",
    "core-js": "^3.13.0",
    "intersection-observer": "^0.12.0",
    "vue": "^3.0.0",
    "vuex": "^4.0.0-0",
    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "^7.14.3",
    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@babel/plugin-transform-arrow-functions": "^7.13.0",
    "@babel/plugin-transform-runtime": "^7.14.3",
    "@babel/preset-env": "^7.14.2",
    "@babel/preset-typescript": "^7.13.0",
    "@types/bootstrap": "^5.0.15",
    "@types/core-js": "^2.5.4",
    "@types/lodash": "^4.14.170",
    "@typescript-eslint/eslint-plugin": "^4.25.0",
    "@typescript-eslint/eslint-plugin-tslint": "^4.25.0",
    "@typescript-eslint/parser": "^4.25.0",
    "@vue/cli-plugin-babel": "~4.5.13",
    "@vue/cli-plugin-typescript": "~4.5.13",
    "@vue/cli-plugin-vuex": "~4.5.13",
    "@vue/cli-service": "4.5.13",
    "@vue/compiler-sfc": "^3.0.11",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-loader": "^8.2.2",
    "babel-preset-typescript-vue3": "^2.0.12",
    "clean-webpack-plugin": "^3.0.0",
    "eslint": "^7.27.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-jsdoc": "^35.0.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-vue": "^7.9.0",
    "fork-ts-checker-webpack-plugin": "^3.1.1",
    "html-webpack-plugin": "^5.3.1",
    "prettier": "^2.3.0",
    "terser-webpack-plugin": "^5.1.2",
    "ts-loader": "^9.2.2",
    "tslint": "^6.1.3",
    "typescript": "^4.3.2",
    "typescript-tslint-plugin": "^1.0.1",
    "vue-loader": "^16.2.0",
    "webpack": "^5.37.1",
    "webpack-bundle-analyzer": "^4.4.2",
    "webpack-cli": "^4.7.0",
    "webpack-merge": "^4.1.4"
  }
}

Answer 1

If all vulnerabilities are coming only from those 4 packages - ie. vue/cli, than you can safely ignore it as only place where this code will be executed is on your own machine during development and build. If we agree that we trust the creators of Vue CLI that they do not use those vulnerable packages in a way harmful to their customers (developers using Vue CLI), we can safely ignore those warnings as no code from these packages will be included in the app bundle....

What interests you is only vuln. of packages included in dependencies part of package.json as this is code that will make it to the final app bundle and will be downloaded and executed by our users/customers

Use this command instead: npm audit --only=prod

Answer 2

For anyone getting vulnerability warnings from @vue/cli:

@vue/cli is now in maintenance mode and it is recommended to create projects using create-vue

From their site:

⚠️ Vue CLI is in Maintenance Mode!

For new projects, it is now recommended to use create-vue to scaffold Vite-based projects. Also refer to the Vue 3 Tooling Guide for the latest recommendations.

$ npm create vue@3

This should properly deal with the npm audit warnings at which point you should have none from vue.

Answer 3

Does this happens when you are trying to create the project if so, check system environment variables in windows, my problem was that only one path was added but you need two paths. One under User varables for "YourUser" under path.

C:\Program Files \nodejs\

And second path under System variables also under path

C:\Program Files \nodejs\

This resolved problem for me, hope it helps!

Answer 4

npm prune worked for me!

I had an extraneous package installed with npm install @vue/cli -g called subscriptions-transport-ws which was no longer maintained and used a bunch of deprecated packages.

After the prune, I checked and it was gone using npm ls subscriptions-transport-ws. I also had no vulnerabilities anymore.