How to fix vue is not defined

In this article, you are going to learn about how to fix Uncaught ReferenceError: Vue is not defined.

“Uncaught ReferenceError: Vue is not defined” is a common problem and if you are an absolute beginner you will face this problem once in your programming career. This error may occur for a few reasons. I will explain my experience while I was facing this problem and how I solved it and later on I will show a few other reasons for this problem and the solution for it. First see the error below:

I was facing this error while working with Vue and first I have no idea why this was happening. But later on, I have figured out that I was linking my files in the wrong order. I was linking my app.js file first and then the Vue CDN file and for this reason, I was getting that particular error. See the wrong code in the below example:

<script src="app.js"></script>
<script src="<https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js>"></script>

This is the wrong order. You have to link the CDN file first and your own created file and this is the convention of linking JavaScript files into HTML. When I follow the convention the error has vanished. See the correct code in the below example:

<script src="<https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js>"></script>
<script src="app.js"></script>

If you have faced this error, you should check the HTML file. In there if you link JavaScript file in the wrong order then write it in the right order and this will fix the problem.

Now, if you maintain the order and still have faced error then there will be a different cause for it. You may create a type error while importing Vue in your project. See the below code example :

import Vue from 'Vue'

If you write this code while importing Vue, you will simply get “Uncaught ReferenceError: Vue is not defined” this error. Because you have spelled in the correct form but both’s first latter in UpperCase. Which is creating the case-sensitive issue. See the correct code in the below example:

import Vue from 'vue'

This problem has occurred for some silly mistakes. You need to be careful and focus while working with Vue and by doing this you may avoid this kind of error.