@vue/[email protected] has a peer dependency conflict with Vue 3

[Soviut]

Describe the bug

I am using Vue 3 ([email protected]) in my project. When upgrading to @vue/[email protected] I got the following peer dependency error saying Vue 3 was causing a peer dependency conflict that expected Vue 2.

npm ERR! While resolving: [email protected]
npm ERR! Found: @vue/[email protected]
npm ERR! node_modules/@vue/apollo-composable
npm ERR!   @vue/apollo-composable@"4.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! @vue/apollo-composable@"4.0.1" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/vue
npm ERR!   peer vue@">= 2.5 < 2.7" from @vue/[email protected]
npm ERR!   node_modules/@vue/composition-api
npm ERR!     peerOptional @vue/composition-api@"^1.0.0" from @vue/[email protected]
npm ERR!     node_modules/@vue/apollo-composable
npm ERR!       @vue/apollo-composable@"4.0.1" from the root project

To Reproduce
Steps to reproduce the behavior:

1. Create a vue 3 project
2. npm install @vue/[email protected]
3. update with npm install @vue/[email protected]
4. See peer dependency error

Expected behavior

I should be able to update without conflicts with Vue 3 and without having to force the install.

Versions
vue: 3.4.18
vue-apollo: 4.0.1
@apollo/client: 3.8.1

Additional context

My workaround was to to use the --force flag.

[peteluffman]

Same here

[msmosavar]

Same with vue 3.3.4 and @vue/apollo-composable 4.0.2

[nickmessing]

Did you install @vue/composition-api? It shouldn't be installed and is correctly marked as optional in package.json, you should not get that error unless you also install @vue/composition-api

[msmosavar]

Did you install @vue/composition-api? It shouldn't be installed and is correctly marked as optional in package.json, you should not get that error unless you also install @vue/composition-api

No... here's my dependency list:

  "dependencies": {
    "@apollo/client": "^3.7.17",
    "@types/lodash": "^4.14.196",
    "@types/sortablejs": "^1.15.7",
    "@vue/apollo-composable": "^4.0.0-beta.8",
    "@vueuse/core": "^9.13.0",
    "ant-design-vue": "^3.2.13",
    "echarts": "^5.4.3",
    "element-plus": "^2.3.8",
    "graphql": "^15.7.2",
    "graphql-tag": "^2.12.6",
    "lodash": "^4.17.21",
    "sortablejs": "^1.15.1",
    "vue": "^3.3.4",
    "vue-echarts": "^6.6.0",
    "vue-i18n": "^9.2.2",
    "vue-router": "^4.2.4",
    "vuedraggable": "^4.1.0"
  },
  "devDependencies": {
    "@4tw/cypress-drag-drop": "^2.2.5",
    "@types/jest": "^27.4.0",
    "@typescript-eslint/eslint-plugin": "^5.62.0",
    "@typescript-eslint/parser": "^5.62.0",
    "@vicons/antd": "^0.12.0",
    "@vicons/carbon": "^0.12.0",
    "@vicons/fa": "^0.12.0",
    "@vicons/fluent": "^0.12.0",
    "@vicons/material": "^0.12.0",
    "@vitejs/plugin-vue": "^5.0.4",
    "@vue/eslint-config-standard": "^8.0.1",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.4.1",
    "autoprefixer": "^10.4.14",
    "cypress": "^13.6.6",
    "eslint": "^8.57.0",
    "eslint-plugin-import": "^2.28.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^9.24.0",
    "postcss": "^8.4.27",
    "start-server-and-test": "^2.0.3",
    "tailwindcss": "^3.3.3",
    "typescript": "^5.1.6",
    "vite": "^5.1.3",
    "vite-plugin-html": "^3.2.2"
  }