Uncaught ReferenceError: Vue is not defined when using laravel-mix webpack

Question

I am using laravel-mix with webpack to include Vue, but it always causes this error:

Uncaught ReferenceError: Vue is not defined

I use this command to compile the file:

npm run dev

I compile the Vue from this file: webpack.mix.js

let mix = require('laravel-mix');

mix.webpackConfig({
    externals: {
        'vue':'Vue',
        'vuejs-dialog': 'VuejsDialog'
    }
});

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css');

And I use this to include on my html file:

<script src="{{ URL::asset('js/app.js') }}"></script>

package.json

    {
    "private": true,
    "scripts": {
      "dev": "npm run development",
      "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
      "watch": "npm run development -- --watch",
      "watch-poll": "npm run watch -- --watch-poll",
      "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
      "prod": "npm run production",
      "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
      "axios": "^0.18",
      "bootstrap": "^4.0.0",
      "popper.js": "^1.12",
      "cross-env": "^5.1",
      "jquery": "^3.2",
      "laravel-mix": "^2.0",
      "lodash": "^4.17.4",
      "vue": "^2.5.7"
    },
    "dependencies": {
      "axios": "^0.18.0",
      "vuedialog": "^1.0.0"
    }
  }

resources/assets/js/app.js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

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

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

I already tried this method, but still it gives me the undefined error: https://laravel.com/docs/5.6/mix#working-with-scripts

What should I do to fix it? Hope someone can help me. Thank you.

You've declared vue as an external for some reason. That means webpack (mix) will expect it to be loaded externally like e.g. from a CDN — apokryfos
I see. So how can I include the vue from node_modules using webpack? — maryyyyyyy
Remove it from the externals object then if webpack encounters a require('vue') or import Vue from 'vue' it will know to look for vue in node_modules instead of expecting it to be externally defined. — apokryfos

DigitalDrifter DigitalDrifter · Accepted Answer · 2018-07-30T08:33:47

Vue needs to be required from within the actual application script. Where you are currently importing Vue is in the mix config file, which is used for producing build files.

Look here at the app.js in then Laravel repository:

https://github.com/laravel/laravel/blob/master/resources/assets/js/app.js

'resources/assets/js/app.js' needs:

window.Vue = require('vue');
const app = new Vue({
    el: '#app'
});

Since you're using Laravel Mix, you should include bundled assets using the mix function:

<script src="{{ mix('/js/app.js') }}"></script>

Uncaught ReferenceError: Vue is not defined when using laravel-mix webpack

2 Answers