Version mismatch when installing vue-apollo in Vue 3.0 application

Question

I set up a new Vue 3.0 application using

vue create

Then I add apollo to my application using

vue add apollo

Then when I run npm run build I get the following error

ERROR  Failed to compile with 2 errors                                                                                                    

Module Error (from ./node_modules/vue-loader/lib/index.js):


Vue packages version mismatch:

- [email protected] (C:\workspace\StatusTool\dummy-project\node_modules\vue\index.js)
- [email protected] (C:\workspace\StatusTool\dummy-project\node_modules\vue-template-compiler\package.json)

This may cause things to work incorrectly. Make sure to use the same version for both.
If you are using vue-loader@>=10.0, simply update vue-template-compiler.
If you are using vue-loader@<10.0 or vueify, re-installing vue-loader/vueify should bump vue-template-compiler to the latest.


Module build failed (from ./node_modules/vue-loader/lib/index.js):
TypeError: Cannot read property 'parseComponent' of undefined
    at parse (C:\workspace\StatusTool\dummy-project\node_modules\@vue\component-compiler-utils\dist\parse.js:15:23)
    at Object.module.exports (C:\workspace\StatusTool\dummy-project\node_modules\vue-loader\lib\index.js:67:22)

What am I doing wrong?

Version Information:

• @vue/cli: 4.5.6
• vue-cli-plugin-apollo: "0.22.2"
• apollo: 2.31.0

Seems like package vue-apollo is not installed

Answer 1

Do not use vue/cli: 4.5.6 instead you need to use Manual install

vue add apollo is only for vue-cli 3 projects.

It is simple to install.

npm install --save vue-apollo graphql apollo-boost

or

yarn add vue-apollo graphql apollo-boost

You still will be able to use apollo-boost