Cannot find element in Vue Js Applications

Question

I created vue js applications with visual studio 2017 . but the problem is when i run the applications , i got following errors in google chrome console windows .

[Vue warn]: Cannot find element: #intro [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

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 class="intro" style="text-align:center;">
        <h1>{{ message }}</h1>
    </div>


</template>

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

<style scoped>
</style>

Here is the screen shot of the google console windows ..

Decade Moon Decade Moon · Accepted Answer · 2019-07-06T02:31:32

You have set the class on the element instead of the id.

But that is irrelevant anyway because you do not need to any of this for a single file component; just do this instead (as you did for App.vue):

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

<script>
    export default {
        data() {
            return {
                message: 'My first VueJS Task'
            }
        }
    }
</script>

Constructing a Vue component manually with new Vue() is only necessary for the root component instance.

Cannot find element in Vue Js Applications

1 Answers