[Vuejs]-How to init Vuejs + VueRouter on certain pages within Laravel

by

2👍

✅

Based on the code that you posted try to build the options object beforehand than to pass it to the new Vue instance. Like that:

let options = {
    el: '#app',
    name: 'app',
    render: app => app(App),
    data: {
        a: 1
    },
    created: function () {
        // `this` points to the vm instance
        console.log('a is: ' + this.a)
    },
    mounted() {
      console.log('done');
      auth.check()
    }
}
if(document.getElementById("app-with-routes"))//yaah we have app with routes
{
    window.VueRouter = require('vue-router');
    let router = new VueRouter({
        routes: [
            {
                path: '/',
                name: 'home',
                component: Vue.component('home', require('./components/Home.vue'))
            },
            // .... all the routes you need
            ]});
    options['router'] = router
}

const app = new Vue(options);

That way you will be able to use all vue sweet parts without having to deal with the router.

👤melanholly

0👍

Have you tried including your vue.js only in pages that you need to?

@section('styles')
{{ (Route::current()->getName() == 'vue-page1') ? '<script src="https://unpkg.com/vue/dist/vue.js"></script>' : '' }}
@endsection
👤Ferran

Leave a comment