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
– apokryfos, Commented Jul 30, 2018 at 8:43
I see. So how can I include the vue from node_modules using webpack? — maryyyyyyy
– maryyyyyyy, Commented Aug 1, 2018 at 4:07
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
– apokryfos, Commented Aug 1, 2018 at 7:35

Brian Lee · Accepted Answer · 2018-08-01 04:44:34Z

1

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>

edited Aug 1, 2018 at 4:44

answered Jul 30, 2018 at 8:33

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

maryyyyyyy Over a year ago

Thanks for your reply. I forgot to mention that I have node_modules folder that contains the Vue, webpack and laravel-mix. I just compiled using npm run dev, so what I have in my app.js is a compiled file from the webpack.mix.js which contains this: window.Vue = __webpack_require__(36);

Brian Lee Over a year ago

You've bundled Vue, WebPack and Mix into the app.js file?

maryyyyyyy Over a year ago

The compiled app.js is in public directory while the app.js that you are mentioning is also in the resources directory.

Brian Lee Over a year ago

Can you post your resources/assets/js/app.js?

maryyyyyyy Over a year ago

Sure! I just posted my app.js. This was generated when I did the npm install.

Majid Alaeinia · Accepted Answer · 2019-09-28 11:22:54Z

1

This error can be resolved by just removing the defer attribute from the script tag which defines the app.js.

answered Sep 28, 2019 at 11:22

Majid Alaeinia

1,0952 gold badges15 silver badges37 bronze badges

1 Comment

Adelin Over a year ago

can you explain more ?

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related