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">
<head>
<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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- Your Vue.js app content will be mounted here -->
</div>
<!-- Your Vue components or other scripts -->
<script src="your-script.js"></script>
</body>
</html>
Make sure that the Vue.js library script tag (<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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.
