Vue Js Applications Failed to Display the Page

Question

I am new to vue js application. I am using visual studio 2017 for creating vue js applications . I am following tutorials but when i run the applications i got following errors in Node js Console windows in this line ....

**var vue_det = new Vue({ **// vue_det assigned not never used ..

Here is the code for App.vue ...

<template>
    <div id="app">
        <Home msg="Hello world!" />
    </div>
</template>

<script>
    import Home from './components/Home.vue';
    import component1 from './components/component1.vue';

    export default {
        name: 'app',
        components: {
            Home,
           component1

        }

    };


</script>

<style>
</style>

Here is the code for component1.vue ...

<template>
        <div id="intro" style="text-align:center;">
            <h1>{{ message }}</h1>
        </div>


</template>

<script type = "text/javascript">
    import Vue from 'vue'; 
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'My first VueJS Task'
            }
         });
      </script>

<style scoped>
</style>

Here is the screen shot of the error when i run the applications ..

ittus ittus · Accepted Answer · 2019-07-06T01:36:46

It's eslint error. You can read the message:

vue_det is assigned a value but never used

Please try removing it

<script type = "text/javascript">
import Vue from 'vue'; 
new Vue({
el: '#intro',
data: {
    message: 'My first VueJS Task'
}
});
</script>

Vue Js Applications Failed to Display the Page

1 Answers