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

Question

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)
});

your code seems work – Boussadjra Brahim Dec 16 '18 at 23:45 — Boussadjra Brahim, Dec 16 '18 at 23:45

mava · Answer 1 · 2018-12-17T00:48:14.777

18

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.

edited Dec 17 '18 at 00:48

answered Dec 17 '18 at 00:05

mava

2,544
1
10
17

2

Thanks for your advice, but I tried this and it didn't work. – bakis Dec 17 '18 at 20:21
Whats the output if you console.log both Import Typs? – mava Dec 17 '18 at 20:26
This has made may 25th December a good day to celebrate – mwangaben Dec 25 '20 at 12:03
Tried this and it DID work :) I was updating all my npm dependencies, which in some cases were major version changes eg Mix 5 to Mix 6. – jeff-h Nov 09 '21 at 00:49

score 2 · Accepted Answer · answered Dec 17 '18 at 21:35

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>

score 0 · Answer 3 · answered Sep 20 '22 at 06:35

I had to update the script element that points to the index.js according to what was produced after npm run build in index.html. This was the difference in loading with old webpack and with vite (I had to add type="module" so it could work properly).

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

3 Answers3

Linked