Tried Using with Vue Router Not Compatible...

[codeitlikemiley]

The First Page Loads Doest Do Any Console Error... But Succeeding clicking on a vue router link... what happen is the component for that vue is not rendered... Lets say im on home, .Home.vue then i navigated away to .About.vue for /about...

[excid3]

You'll have to provide an example app or something with more details. There really isn't any reason for you to use this or Turbolinks if you're using vue-router for page navigation.

[codeitlikemiley]

this is my code the error i get is this

app.js:46292 Uncaught TypeError: Cannot redefine property: $router
    at Function.defineProperty (<anonymous>)
    at Function.install (app.js:46292)
    at Function.Vue.use (app.js:23608)
    at Object.<anonymous> (app.js:48282)
    at __webpack_require__ (manifest.js:55)
    at Object.View.name (app.js:45692)
    at __webpack_require__ (manifest.js:55)
    at Object.module.exports.render._vm (app.js:49025)
    at __webpack_require__ (manifest.js:55)
    at Object.<anonymous> (app.js:48946)

app.js

/* Boostrap Our App */
import './bootstrap'
/* Vue Data */
import base from './mixins/base'
/* Vue Routing */
import router from './routes'
/* Listen to Echo Channels */
import privateChannel from './mixins/private-channel'
import globalChannel from './mixins/global-channel'
import groupChannel from './mixins/presence-channel'
/* Global Event Bus Dispatcher */
import dispatcher from './mixins/dispatcher'
import MainVue from './App.vue'

/* Vue Instance */
document.addEventListener('turbolinks:load', () => {
    var element = document.getElementById('app')
    if (element != null) {
        var app = new Vue({
            mixins: [base, globalChannel, privateChannel, groupChannel, dispatcher],
            router,
            el: element,
            template: '<MainVue/>',
            components: { MainVue }
        })
    }
})

App.vue

<template>
<div>
    <transition name="fade" mode="out-in">
            <router-view></router-view>
    </transition>
</div>
</template>

<script>
export default {
    data () {
        return {
            message: new Date()
        }
    }
}
</script>

<style>

</style>

bootstrap.js

window._ = require('lodash')
window.moment = require('moment')
window.Promise = require('promise')

/*
 * Define Moment locales
 */
window.moment.defineLocale('en-short', {
    parentLocale: 'en',
    relativeTime: {
        future: 'in %s',
        past: '%s',
        s: '1s',
        m: '1m',
        mm: '%dm',
        h: '1h',
        hh: '%dh',
        d: '1d',
        dd: '%dd',
        M: '1 month ago',
        MM: '%d months ago',
        y: '1y',
        yy: '%dy'
    }
})
window.moment.locale('en')

if (window.$ === undefined || window.jQuery === undefined) {
    window.$ = window.jQuery = require('jquery')
}

/**
 * Add Turbolinks
 */
var Turbolinks = require('turbolinks')
Turbolinks.start()

/**
 * Load Only Once Babel Polyfill
 */

if (!global._babelPolyfill) {
    require('babel-polyfill')
}

/**
 * Load Our Vue App
 */

if ($('#app').length > 0) {
    require('./vue-bootstrap')
}

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios')

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

let token = document.head.querySelector('meta[name="csrf-token"]')

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token')
}

window.axios.interceptors.response.use(function (response) {
    return response
}, function (error) {
    switch (error.response.status) {
    case 401:
        // LogOuts All Type of User...
        window.axios.get('/logout')
        // Redirect or Show Modal

        // Show Modal Session Expired
        break
        // Payment required Permission
    case 402:
        // Redirect To Payment Page

        break
    }

    return Promise.reject(error)
})

vue-bootstrap.js

/* IE 11 Compatible */
import Echo from 'laravel-echo'
import Vue from 'vue'
import Vuetify from 'vuetify'
import VueEcho from 'vue-echo'
import initialState from './mixins/initial-state'
import TurbolinksAdapter from 'vue-turbolinks'

/*
 * Load Wrapper for Turbolink
 */

Vue.use(TurbolinksAdapter)

/*
 * Load Vue
 *
 */
if (window.Vue === undefined) {
    window.Vue = Vue
    window.Bus = new Vue()
}
/*
 * All Global Mixins
 *
 */
Vue.mixin(initialState)

/**
 * Load the Vuetified form utilities.
 */
require('./forms/form-bootstrap')

/**
 * Load Vuetify Components
 */
Vue.use(Vuetify)

/**
 * Load Laravel Echo
 */

window.Echo = Echo

if (typeof io !== 'undefined') {
    let EchoInstance = new Echo({
        namespace: 'App\\Events',
        broadcaster: 'socket.io',
        host: `${window.location.hostname}:6001`
    })
    /* Install VueEcho: this.$echo */
    Vue.use(VueEcho, EchoInstance)
}

app.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Necessary To Authenticate Request Using Axios -->
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="stylesheet" href="{{ mix('/css/app.css') }}">
    <title>{{ config('app.name') }} </title>
    @include('partials.initial_state')
</head>

<body>
    <div id="app">
        <main-vue></main-vue>
    </div>
<script src="//{{ Request::getHost() }}:6001/socket.io/socket.io.js"></script>
<script src="{{ mix('/js/manifest.js') }}"></script>
<script src="{{mix('/js/vendor.js')}}"></script>
<script src="{{mix('/js/app.js')}}"></script>
</body>

</html>

As you can see the active Link is at Home meaning its using my Home.vue component in router

but the Courses.vue remains

[codeitlikemiley]

miraculously ive fixed it, is it really relevant to use turbolinks with vuerouter, ive just test it if it will work, but heck , finally make it happen... ive the component handling my side bar links... what happens was it was loading a new page, but using the vue... so theoretically, turbolinks cached it, and the router can initialized and the component was not loaded. the fixed i did was pragmattic navigation with vue router