Laravel-Mix: Vue not available in app.js and bootstrap.js after Laravel-Mix upgrade to v6

So I just upgraded from Laravel-Mix v1 to v6.

For example, in app.js I do the following to register all Vue components:

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

But I get this error:

app.js:17638 Uncaught ReferenceError: Vue is not defined

I read about it and added these lines in webpack.mix.js:

resolve: {
    alias: {
        vue: 'vue/dist/vue.js'
    }
}

but unfortunately that doesn't do anything. Same error still.

When I add import Vue from 'vue/dist/vue.js' on top of app.js and bootstrap.js I don't get these error no longer, but the code for registering vue components is not working.

Bootstrap.js: https://www.codepile.net/pile/8rX4Qlrm

package.json: https://www.codepile.net/pile/JBA4NYLk

Does anyone have an idea what's going on here? Thanks!

dima23

5 years ago

Level 2

What your webpack.mix.js looks like? In mix v6 for vue you should add .vue() Here are some notes on upgrading: https://laravel-mix.com/docs/6.0/upgrade

hillcow

5 years ago

Level 4

Yes I did that.

kleninmaxim

5 years ago

Level 50

I think. This is because of new version of Laravel-Mix. Try that code in your app js, where 'example-component' your name using in blade and './components/ExampleComponent.vue' - the your file to the folder relative to the file app.js:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({ el: '#app', });

The bootstrap file must be:

window._ = require('lodash'); window.io = require('socket.io-client');

try { window.Popper = require('popper.js').default; window.$ = window.jQuery = require('jquery'); require('bootstrap'); } catch (e) {}

window.axios = require('axios');

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

Please or to participate in this conversation.