appvue requires one element (vue2) - vue.js

Question

app.vue
<template>
<div id="nav">
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
</div>
<router-view/>
</template>
<script>
export default {
mounted() {
this.$store.commit('updateCartFromLocalStorage')
}
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
background-color: rgb(245, 245, 245);
}
#nav {
padding: 10px;
width: 100%;
height: 30px;
background-color: white;
line-height: 30px;
}
a {
font-weight: bold;
color: darkgray;
text-decoration: none;
margin: 0 5px 0 5px;
font-size: 1.25rem;
&.active {
color: #2c3e50;
}
}
.text-center {
text-align: center;
}
</style>
I'm getting an error:
Failed to compile.
./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js)
The template root requires exactly one element vue/valid-template-root
How can I fix it? I tried adding more div but it is still not working.

Answer 1

There are two roots in your component:
<template>
<div id="nav"> 1️⃣
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
</div>
<router-view/> 2️⃣
</template>
To create a single root, wrap the entire template in another element, such as a div:
<template>
<div>
<div id="nav">
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
</div>
<router-view/>
</div>
</template>

Answer 2

You need to add one root level element for vue2
<template>
<div id="nav">
<router-link :class="{active: $route.name === 'Home'}" to="/">Home</router-link>
<router-link :class="{active: $route.name === 'Cart'}" to="/cart">Cart</router-link>
<router-view/>
</div>
</template>
Here div is root-level element.
However, if you are using vue3, you don't need one root level element.