Vue.js Compile Error: no-unused-vars & no-undef

Question

I'm currently trying to create a Vue.js component. When I start the app there's an error. The error message as shown below:

<template>
    <div class="hello" id="app">
         <span style="font-size:30px;cursor:pointer;" onclick="openNav()">&#9776;</span>

        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="#">{{name1}}</a>
            <a href="#">{{name2}}</a>
            <a href="#">{{name3}}</a>
            <a href="#">{{name4}}</a>

            <div id="bottom">
                <input v-model="name1" style="margin-left: 25px;max-width: 50%;">
                <input v-model="name2" style="margin-left: 25px;max-width: 50%;">
                <input v-model="name3" style="margin-left: 25px;max-width: 50%;">
                <input v-model="name4" style="margin-left: 25px;max-width: 50%;">
            </div>

        </div>
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque elit velit, dictum in urna et,
            vulputate ornare sapien. Phasellus sed metus sed dolor hendrerit iaculis.
            Cras eget libero sit amet massa aliquet dignissim. Vivamus faucibus lorem sit amet semper luctus.
            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In at placerat
            felis,
            id finibus mauris. Proin maximus orci quis lacus pellentesque, ac dignissim sapien vestibulum. Maecenas
            pharetra
            vulputate semper.
            Suspendisse potenti. Donec nisi nisi, aliquam eget felis euismod, semper dictum ligula.
            Aenean mauris enim, iaculis vel malesuada vel, pulvinar et risus. Fusce sit amet orci eget diam commodo
            ultricies sed vel elit.
            Curabitur quis scelerisque est.</p>
    </div>
</template>

<script>
    //Vue App
    var app = new Vue({
        el: '#app',
        data: {
            /*
            navlink: [
                {id: 1, link: "https://www.tfbern.ch"}, 
                {id: 2, link: "https://www.tfbern.ch"},
                {id: 3, link: "https://www.tfbern.ch"},
                {id: 4, link: "https://www.tfbern.ch"}
                ]
            */

            name1: 'name 1',
            name2: 'name 2',
            name3: 'name 3',
            name4: 'name 4'
        }
    })
    export default {
        name: 'NavigationDrawer',
        props: {
            msg: String
        }
    }

    //Navbar Animation
   /* 
   function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
    }

    function closeNav() {
        document.getElementById("mySidenav").style.width = "0"; -->
    }
     */
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Navigation-Drawer.vue

---

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <App msg="test">
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import App from './components/Navigation-Drawer.vue'
export default {
  name: 'App',
  components: {
    HelloWorld,
    App
  }
}

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue

Answer 1

The CLI should have created a file called main.js. In there you'll have something a bit like this that creates a new Vue instance:

new Vue({
  render: h => h(App)
}).mount('#app')

It might use an el property instead of calling mount and it may mention store or router if you chose to include those when creating the project. It doesn't really matter, the key thing is that this is where the root Vue instance gets created. Unless you're writing an atypical application you shouldn't need to use new Vue again. You certainly shouldn't be using it inside a .vue file.

The App referenced in the code I wrote above should be the component in App.vue, which should be imported earlier in main.js.

Then there's your App.vue. This line is a bit odd:

import App from './components/Navigation-Drawer.vue'

Technically it isn't wrong but it's really confusing. Rename App to some a bit more sensible, like NavigationDrawer. You'll need to update everywhere it's used, including the template.

Next up, Navigation-Drawer.vue. There are several problems here.

Firstly, get rid of the id="app" on the template, that just shouldn't be there and may cause problems.

To implement onclick="openNav()" in Vue you'd instead write @click="openNav" and then define openNav within the methods section of the component.

The script section should look something like this:

<script>
    export default {
        name: 'NavigationDrawer',

        props: {
            msg: String
        },

        // Note that this is a function when used on a component
        data () {
            return {
                name1: 'name 1',
                name2: 'name 2',
                name3: 'name 3',
                name4: 'name 4'
            }
        },

        methods: {
            openNav() {
                console.log('openNav called')
            },

            closeNav() {
                console.log('closeNav')
            }
        }
    }
</script>

Hopefully that'll be enough to get it all working.

The original linting errors were caused because:

1. You were creating a variable called app but never using it.
2. You were trying to call new Vue but hadn't imported Vue. In general you need to import things if you want to be able to access them from inside a .vue file.

However, the linting errors were just side-effects of the more serious problems I've outlined above.

Answer 2

These are the errors from eslint. See https://eslint.org/docs/rules/no-unused-vars and https://eslint.org/docs/rules/no-undef for details.

In order to remove these errors, add this line just before the line where you are initializing the app

    // eslint-disable-next-line
    var app = new Vue({ 
    // rest of the code 

Make sure that the line with eslint-disable-next-line is commented. This will tell eslint to ignore that line and not lint it.