I am currently facing an issue with rendering a component through router-view using vue.js 2.0 and vue-router.
Upon inspecting vue devtools, I noticed the "fragment" label next to router-view, but no additional information was provided.
It is worth mentioning that I am utilizing laravel-elixir-vueify and browserify in my setup.
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 brevity.
<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>
<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>