<router-view> not funcitoning on upgrade to vue.js 2.0

Question

I am completely stuck on getting a component to render through router-view using the vue.js 2.0 and vue-router.

I have vue devtools installed and I do see the "fragment" label next to router-view, but no other details.

Might be important to note that I am using laravel-elixir-vueify and browserify.

App.js

var Vue = require('Vue');
var VueRouter = require('vue-router');

import dashboard from './components/dashboard.vue'

Vue.component('dashboard', dashboard);

Vue.use(VueRouter);


const router = new VueRouter({
  routes: [
    { path: '/', component: dashboard }
  ]

const app = new Vue({
  router
}).$mount('#vueapp')

dashboard.blade.php

<div id="vueapp">
  //other code removed for space
  <router-view></router-view>
</div>

dashboard.vue

<template>
    <div class="col-md-12 col-lg-12">
        <div class="block">
          <div id="showCalendar"></div>
        </div>
    </div>
</template>
//Note: I tried adding an extra <div></div> within the template, but that didn't make a difference. 

<script>

export default{

mounted: function() {

    this.CompCalendar();
},
methods: {

    CompCalendar: function() {

                /* Initialize FullCalendar */
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();

        this.$nextTick(function() {
            var events = this.$http.get('/events/local/index')
                .then(function(response){

                    $('#showCalendar').fullCalendar({
                    header: {
                        //unimportant options
                    },
                    //unimportant options
                    eventClick: function(calEvent, jsEvent, view){

                        var eventId = calEvent.id;
                        router.push({
                            path: 'details/'+eventId

                        });
                    },
                    });
                })
        });
    }
   }
};
</script>

I am pretty sure this is related to a laravel-elixir-vueify conflict that is referencing vue 1.0 — retrograde
did you run a gulp after updating? what does your packages.json and gulpfile.js look like? — jeremykenedy

Psi Psi · Accepted Answer · 2016-10-15T17:17:57

So the first thing, you dont need to register Vue.component('dashboard', dashboard) The Reference to in the routes is enough. Everything else looks good for me. Do you have any Errors in your console?

Try routes = [ { path: '', component ..

<router-view> not funcitoning on upgrade to vue.js 2.0

2 Answers