Vue.js error "app' is assigned a value but never used no-unused-vars

Question

**"10:7 error 'app' is assigned a value but never used no-unused-vars" I know there is some similar question due this. But I dont know why my code doesnt work at all.

So the error is at the main.js file line 10. I thought I'm using my "app" with el:'app' or in export fault with 'app'

I have 2 files

**App.vue:****






    <template>
      <div id="app" v-cloack>
        <img src="./assets/999.jpg">
        <h1>{{ msg }}</h1>
        <ul>
          <input type="file" ref="myFile" @change="selectedFile"><br/>
          <textarea v-model="text"></textarea>
      </div>
    </template>


    <script>
    //import HelloWorld from './components/HelloWorld';
    //import main from './main.js';
    export default {
      name: 'app',
      data: ()=> {
        //
          return{
              msg: 'Datei uploaden'

          }
      },
    }
    </script>

    <style>

    </style>'''





**main.js:**




    import Vue from 'vue'
    import App from './App.vue'
    import vuetify from './plugins/vuetify';

    Vue.config.productionTip = false
    Vue.config.devtools = false;
    export default {
      name: 'app',
      data: ()=> {
      var app;
      app =new Vue({

    el: '#app',
    vuetify,
    render: h => h(App),
    data: {
      text:''
    },

    methods:{
        selectedFile() {
          console.log('selected a file');
          console.log(this.$refs.myFile.files[0]);

          let file = this.$refs.myFile.files[0];
          if(!file || file.type !== 'text/plain') return;

          // Credit: https://stackoverflow.com/a/754398/52160
          let reader = new FileReader();
          reader.readAsText(file, "UTF-8");
          reader.onload =  evt => {
            this.text = evt.target.result;
          }
          reader.onerror = evt => {
            console.error(evt);
          }

        }
    }
  })
  }
}
//.$mount('#app')

I really struggle since a few days. I would be very happy if anybody can help Thanks

Answer 1

You can add /* exported variableName */ to ignore the eslint since you are using app variable outside your file

so above your app variable add /* exported app */

to read more https://eslint.org/docs/rules/no-unused-vars

Change main.js to this code

import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;
Vue.config.devtools = false;

var app = new Vue({
    el: '#app',
    vuetify,
    render: h => h(App),
    data: {
        text: ''
    },
    methods: {
        selectedFile() {
            console.log('selected a file');
            console.log(this.$refs.myFile.files[0]);

            let file = this.$refs.myFile.files[0];
            if (!file || file.type !== 'text/plain') return;

            // Credit: https://stackoverflow.com/a/754398/52160
            let reader = new FileReader();
            reader.readAsText(file, "UTF-8");
            reader.onload = evt => {
                this.text = evt.target.result;
            }
            reader.onerror = evt => {
                console.error(evt);
            }

        }
    }
})

export default app