Vue packages version mismatch error fix

Approachable, Versatile and Performant are the words used to describe Vue.js on their website.  Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries. Vue is widely used with Laravel framework, By default, fresh Laravel applications contain an ExampleComponent.vue Vue component located in the resources/assets/js/components directory. The ExampleComponent.vue file is an example of a single file Vue component which defines its JavaScript and HTML template in the same file. Single file components provide a very convenient approach to building JavaScript driven applications. Vue packages version mismatch error occurs when the vue and vue-template-compiler version numbers are different.

vue package version mismatch
vue package version mismatch

As shown in the image above, my vue version is higher than that of the vue-template-compiler, this may cause things to work incorrectly. Make sure to use the same version for both. Specifying exact versions of vue and vue-template-compiler rather than leaving it up to npm to install or yarn to figure out dependencies helps keep both in sync hence keeping the occurrence of vue packages version mismatch not rampant

How I got it to work

Since the version of the vue-template-compiler is older than that of the vue I decided to update it to same version number as the vue thus 2.5.16 In your case the number might not be same as mine so replace the version number with what you see in your error message in the following command

npm install vue-template-compiler@2.5.16 --save-dev
vue-template-compiler update result
vue-template-compiler update result

The above command would fix the version mismatch error as shown in the accompanying image above.


Allan Philip Barku

People are often unreasonable and self-centered. Forgive them anyway. If you are kind, people may accuse you of ulterior motives. Be kind anyway. If you are honest, people may cheat you. Be honest anyway. If you find happiness, people may be jealous. Be happy anyway.

1 comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most discussed

%d bloggers like this: