Vue route: Uncaught TypeError: window.Vue.use is not a function

6
votes

in my Laravel project I'm using Vue library and I'm trying to use vue router in my modules, but when I tried import vue router as usually (see code below) I got an error in my console: Uncaught TypeError: window.Vue.use is not a function

Any ideas how to solve this issue? I have created this module using webpack.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './App.vue'

const router = new VueRouter({
    routes: [{
        'path' : '/user/:id/'
    }]
});

new Vue({
  router,
  el: '#play',
  render: h => h(App)
});
2
vue.jswebpackvuejs2
your code seems work - Boussadjra Brahim

2 Answers

14
votes

I think it's an issue with loading/importing Vue in laravel.
Have you tried changing it to the following:

import Vue from 'vue/dist/vue'

window.Vue = Vue
Vue.use(VueRouter)

You could try console.log(window.Vue) to see if Vue gets attached correctly, or if window.Vue is undefined. You could also try that like console.log(Vue) to see what gets imported.

2
votes

Not sure, but probably it was a fault of my negligence.

The problem was in JS files order while the page was loading up. Still not sure why this happened. I tried to use generated JS file before tag, but this didn't work, so I just put my JS file right after Vue template container and it started to work (check snippet below). If somebody has any explanation for that, I would be glad to hear that, because now I could call it "magic".

<body>
    @yield('after_body_open')

    {{--Header--}}
    <header>
        @include('layouts.top-bar')

        @include('layouts.header')
    </header>

    {{--Page content--}}
    <main>
        @yield('content')
    </main>

    <div id="play"></div>{{--Vue instance--}}
    <script src="{{ asset('js/vue/play.js') }}"></script> **TO HERE**


    {{--Footer--}}
    <footer></footer>

    {{--Notifications block--}}
    <div id="notifications"></div>{{--Vue instance--}}

    {{--Required JS files--}}
    <script src="{{ asset('js/vue/navigation.js') }}"></script>
    <script src="{{ asset('js/vue/notifications.js') }}"></script>
    <script src="{{ asset('js/vue/play.js') }}"></script> **FROM HERE**

    @yield('before_body_close')
</body>