Vue Answers

How to fix Uncaught ReferenceError: Vue is not defined when put vue setting in Index.html error?

Spread the love

The error “Uncaught ReferenceError: Vue is not defined” typically occurs when the Vue.js library is not loaded before attempting to use it in our HTML file.

To fix this error when setting up Vue.js in our index.html, make sure we include the Vue.js library script before any other scripts that rely on Vue.

Here’s an example of how we should structure index.html:

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your App</title>
  <!-- Include Vue.js library -->
  <script src=""></script>
  <div id="app">
    <!-- Your Vue.js app content will be mounted here -->

  <!-- Your Vue components or other scripts -->
  <script src="your-script.js"></script>

Make sure that the Vue.js library script tag (<script src=""></script>) is included before any other scripts that depend on Vue.

And the Vue components or other scripts are included after Vue.js.

This way, Vue.js will be defined before our application code attempts to use it, and we should no longer encounter the “Vue is not defined” error.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

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