CODEWITHSUNDEEP
laravelwebpackvue.jslaravel-mix
maryyyyyyy
maryyyyyyy

Reputation: 127

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

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.

Upvotes: 2

Views: 18728

Answers (2)

Majid Alaeinia
Majid Alaeinia

Reputation: 1075

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

Upvotes: 1

Brian Lee
Brian Lee

Reputation: 18187

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>

Upvotes: 1

Related Questions