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