Vue template not being displayed?

Question

I am new to vue and I am trying to get a simple component to display in a div. I am using laravel 5.4 with laravel mix and vue version 2.6.6 to display a vue component.

this is the div in my view file:

<div id="sidenav"> </div>

This is my app.js

require('./bootstrap');
import Vue from 'vue';
Vue.component('SideNav', require('./components/SideNav.vue').default);

var SideNav = new Vue({
    el: '#sidenav'
});

This is SideNav.vue

<template>
    <div>
        <h1>Test</h1>
    </div>
</template>

<script>
    export default {
        name: 'SideNav'
    }
</script>

There aren't any errors with npm install, npm build, npm run dev, or npm run watch. On the page I do not see

Test

I'm sorry for such a newb question, but this has been driving me crazy for a few hours.

Try changing your template to include the SideNav component <div id="sidenav"> <SideNav/></div> or <div id="sidenav"> <div is="SideNav"></div></div> — Connor
@Connor I get the same result when I add <div id="sidenav"> <SideNav/></div> inside my template of my SideNav file. Thanks for your help. — user908759

McCleery McCleery · Accepted Answer · 2019-02-20T22:05:22

Try something like this;

<div id="sidenav">
    <SideNav></SideNav>
</div>

You "mount" your Vue instance to the root element with id #sidenav here:

var SideNav = new Vue({
    el: '#sidenav'
});

meaning, when you created your Vue component here: Vue.component('SideNav', require('./components/SideNav.vue'));, you have access to the <SideNav> tag within that root element.

Also, I'm not sure if you need the .default at the end of your Vue.component(...) creation.

Vue template not being displayed?

Test

1 Answers