[Vue warn]: Failed to mount app: mount target selector returned null

Hi,
This is my first Vue 3 application and I am getting a weird error. The source code is given below. I have tried this source in codepen. It’s working there, but when I try the same code locally, I get the error mentioned in the subject. Have tried in Safari and Chrome. I guess I am doing something fundamentally wrong here !

    <!DOCTYPE html>
<html lang="en">
	<head>
		<title>What is your goal</title>
		<link rel="stylesheet" type="text/css" href="./main.css"/>
		<script src="http://unpkg.com/vue@next"></script>
		<script>
			const { createApp } = Vue;
			const configuration = {
				data() {
					return {
						goals: [],
						enteredGoal: ''
					};
				},
				methods: {
					addGoal() {
						if (!this.enteredGoal) return;
						this.goals.push(this.enteredGoal);
						this.enteredGoal = '';
					}
				}
			};

			createApp(configuration).mount("#app");
		</script>
	</head>
	<body id="app">
		<main>
			<div class="container">
				<p>Goal</p>
				<input type="text" name="goal" placeholder="Enter your goal here" v-model="enteredGoal"/>
				<button v-on:click="addGoal()">Add Goal</button>
				<div class="goals">
					<ul>
						<li v-for="goal in goals">{{ goal }}</li>
					</ul>
				</div>
			</div>
		</main>
	</body>
</html>

Can anybody help me spot the issue !

The order matters. The code will run at the point the browser reaches it, before it parses the remaining HTML.

Move the <script> to be after the <body> and it should be fine.

4 Likes

Thanks @skirtle. I kept the cue library inside the head and moved the custom script tag below body. This time it worked. Thank you!

I got same warning on my console and it display nothing content from my vue component to my web page. however the bootstrap is working that was add in app.js.

my view is like this.

Laravel 8 project
<h2>Hello laravel 8</h2>

ty so much <3

Broooo thank you so much, so dumb and shitty but hey make sense, btw just register to say thanks brother haha