javascript - migrating from vue 2 to vue 3 vue-svgicon - Stack Overflow

admin管理员组

文章数量:1194744

I have to migrate an application that use vue2 (2.6.10) to the last version of vue 3; I'm also do not have many experince on frontend development;

I have create the project with

npm init vue@3

I have copied all src folder and public folder from the old project using vue2;

And with the commad:

npm install <package>

I have installed almost all dependency I have in package.json

{
  "name": "mybadge",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --port 80",
    "build": "vue-cli-service build",
    "svg": "rm -rf ./public/static/compiled-icons && vsvg -s ./src/assets/icons -t ./public/static/compiled-icons"
  },
  "dependencies": {
    "apexcharts": "^3.10.1",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "mini-toastr": "^0.8.1",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-apexcharts": "^1.5.1",
    "vue-axios": "^2.1.4",
    "vue-mini-toast": "^1.0.1",
    "vue-perfect-scrollbar": "^0.2.0",
    "vue-router": "^3.0.3",
    "vue-youtube": "^1.3.5",
    "vuetify": "^2.1.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "material-design-icons-iconfont": "^5.0.1",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-svgicon": "^3.2.6",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

But no way to install vue-sgvicon!!!!

I try to install with the same command

npm install vue-svgicon --save

But I get

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/vue
npm error   vue@"^3.5.13" from the root project
npm error
npm error Could not resolve dependency:
npm error peer vue@"^2.5.17" from [email protected]
npm error node_modules/vue-svgicon
npm error   vue-svgicon@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\vis\AppData\Local\npm-cache\_logs\2025-01-23T15_32_49_704Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\vis\AppData\Local\npm-cache\_logs\2025-01-23T15_32_49_704Z-debug-0.log

I have also used --force option, but no way to install vue-svgicon.

I have to migrate an application that use vue2 (2.6.10) to the last version of vue 3; I'm also do not have many experince on frontend development;

I have create the project with

npm init vue@3

I have copied all src folder and public folder from the old project using vue2;

And with the commad:

npm install <package>

I have installed almost all dependency I have in package.json

{
  "name": "mybadge",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --host 0.0.0.0 --port 80",
    "build": "vue-cli-service build",
    "svg": "rm -rf ./public/static/compiled-icons && vsvg -s ./src/assets/icons -t ./public/static/compiled-icons"
  },
  "dependencies": {
    "apexcharts": "^3.10.1",
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "mini-toastr": "^0.8.1",
    "register-service-worker": "^1.6.2",
    "vue": "^2.6.10",
    "vue-apexcharts": "^1.5.1",
    "vue-axios": "^2.1.4",
    "vue-mini-toast": "^1.0.1",
    "vue-perfect-scrollbar": "^0.2.0",
    "vue-router": "^3.0.3",
    "vue-youtube": "^1.3.5",
    "vuetify": "^2.1.14"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "material-design-icons-iconfont": "^5.0.1",
    "sass": "^1.17.4",
    "sass-loader": "^7.1.0",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-svgicon": "^3.2.6",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.2.2"
  }
}

But no way to install vue-sgvicon!!!!

I try to install with the same command

npm install vue-svgicon --save

But I get

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/vue
npm error   vue@"^3.5.13" from the root project
npm error
npm error Could not resolve dependency:
npm error peer vue@"^2.5.17" from [email protected]
npm error node_modules/vue-svgicon
npm error   vue-svgicon@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.
npm error
npm error
npm error For a full report see:
npm error C:\Users\vis\AppData\Local\npm-cache\_logs\2025-01-23T15_32_49_704Z-eresolve-report.txt
npm error A complete log of this run can be found in: C:\Users\vis\AppData\Local\npm-cache\_logs\2025-01-23T15_32_49_704Z-debug-0.log

I have also used --force option, but no way to install vue-svgicon.

• javascript
• vue.js
• vuejs2
• vuejs3

Share Improve this question Follow asked Jan 23 at 15:46 fraaanzfraaanz 10922 silver badges1212 bronze badges 12

• 2 Have you tried the docs? – tao Commented Jan 23 at 15:52
• No now It seems being installed, but when i try to run I get Error: The following dependencies are imported but could not be resolved: vue-apexcharts (imported by C:/Users/vis/Corso_vue/prova/mybadge/src/main.js) vue-svgicon (imported by C:/Users/vis/Corso_vue/prova/mybadge/public/static/compiled-icons/login_path.js) vuetify/lib (imported by C:/Users/vis/Corso_vue/prova/mybadge/src/plugins/vuetify.js) vuetify/es5/locale/it (imported by C:/Users/vis/Corso_vue/prova/mybadge/src/plugins/vuetify.js) – fraaanz Commented Jan 23 at 16:52
• 1 Side note: migrating a project from Vue 2 to Vue 3 can be a challenging task even for experienced frontend developers, depending on project size, on its dependencies and on core Vue features used. Unless the project is quite simple/small, I wouldn't assign this job to someone with little to no experience as a frontend developer. – tao Commented Jan 23 at 23:42
• 1 In your package.json, it looks like you are installing Vue 2 packages, for example vue-router, vuetify, vue-cli, etc. Those are not compatible with Vue 3 (I think vue-cli was replaced all together in favor of a Vite-based build chain). There is a vue package (vue-compat) that allows you to run a Vue 2 project in Vue 3, so that you can update the packages one by one until you are completely at v3 and can drop the compat mode (see guide), however, afaik it does not work wirh Vuetify. Sorry to tell you, but this task is not going to be fun. – Moritz Ringler Commented Jan 24 at 9:17
• 1 Sounds a bit grandiose, I know. But I don't think I'm overselling it when saying that this is one of the hardest "common" tasks in front-end dev. It's not rocket science, you can definitely do it, but if you are not a Vue expert yet, you will be afterwards. – Moritz Ringler Commented Jan 24 at 11:23

 |  Show 7 more comments

1 Answer 1

Sorted by: Reset to default 0

Reading the doc I was able to install:

npm install @yzfe/svgicon @yzfe/vue-svgicon --save

本文标签： javascriptmigrating from vue 2 to vue 3 vuesvgiconStack Overflow