Sometimes, we want to fix the ‘Vue is not defined’ with JavaScript.

In this article, we’ll look at how to fix the ‘Vue is not defined’ with JavaScript.

How to fix the ‘Vue is not defined’ with JavaScript?

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.

For instance, we write:

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

<div id='app'>

</div>

to add the script above the app container.

Then we write:

const v = new Vue({
  el: '#app',
  template: `<p>{{exampleContent}}</p>`,
  data: {
    'exampleContent': 'hello'
  },

});

in a script tag below the div to run the code

We set el to an element that’s added above the code.

And we also add a template and some data to render on the template.

Therefore, we should see ‘hello’ displayed.

Conclusion

To fix the ‘Vue is not defined’ with JavaScript, we should make sure the Vue script is added at the top of the page.