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.

People reacted to this story.
Show comments Hide comments
Comments to: Vue packages version mismatch error fix
Write a response

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.

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


Welcome to Typer

Brief and amiable onboarding is the first thing a new user sees in the theme.
Join Typer
Registration is closed.
%d bloggers like this: