`npm i echarts vue-echarts` not installing for vue3 project

[adunndevster2]

Confirmation

• [X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

I could not install

Details

I'm getting some dependency issues as I'm working to replace apex charts with echarts for my Vue3 app. Any idea why?

npm ERR! Conflicting peer dependency: vue@3.4.27
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.2
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.0.5" from vue-echarts@6.7.2
npm ERR!     node_modules/vue-echarts
npm ERR!       vue-echarts@"*" 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.

Here is my package.json

{
  "name": "meadow-cloud-ui",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "test": "vitest --coverage",
    "test-ui": "vitest --ui"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "@fortawesome/vue-fontawesome": "^3.0.3",
    "@microsoft/applicationinsights-web": "^2.8.11",
    "@okta/okta-auth-js": "^7.2.0",
    "@okta/okta-vue": "^5.5.0",
    "@types/dompurify": "^3.0.3",
    "apexcharts": "^3.41.1",
    "bootstrap": "^5.2.3",
    "bootstrap-vue-next": "^0.7.3",
    "core-js": "^3.8.3",
    "dompurify": "^3.0.6",
    "echarts": "^5.5.0",
    "moment": "^2.29.4",
    "vue": "^3.2.47",
    "vue-class-component": "^8.0.0-0",
    "vue-json-pretty": "^2.2.4",
    "vue-router": "^4.0.3",
    "vue-sidebar-menu": "^5.2.5",
    "vue3-apexcharts": "^1.4.4",
    "vue3-gravatar": "^3.0.0",
    "vue3-tags-input": "^1.0.5",
    "vue3-toastify": "^0.1.11",
    "vue3-ts-jsoneditor": "^2.9.0",
    "vuex": "^4.0.2",
    "wl-vue3-easy-data-table": "^1.5.56"
  },
  "devDependencies": {
    "@testing-library/vue": "^7.0.0",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "@vitest/browser": "^0.30.1",
    "@vitest/coverage-c8": "^0.31.0",
    "@vitest/ui": "^0.30.1",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.3.2",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "jsdom": "^21.1.2",
    "msw": "^1.2.1",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "typescript": "^5.0.2",
    "vite": "^4.4.9",
    "vitest": "^0.30.1",
    "vue-tsc": "^1.4.2",
    "webdriverio": "^8.8.8"
  }
}

Reproduction

https://codesandbox.io/p/sandbox/charming-night-2y6m6?file=%2Fpackage.json

[Justineo]

Duplicate of #576