Using Vue in Laravel

Question

I am new to Vue but I thought I'd give it a go in a recent project, I can see why its liked. Anyway, everything was going great until I switched over to IE, where nothing worked at all.

With errors such as Object doesn't support property or method 'assign' I gave it a Google and apparently IE doesn't support ES6 very well, according to this question: Getting Error: Object doesn't support property or method 'assign'

So, I'd heard of Babel and it looked like the sort of thing that would do the job as it is capable of converting from ES6. Following this I attempted to integrate Babel into my Laravel project.

I updated my webpack.min.js as follows:

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

/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/

mix.js('resources/assets/js/app.js', 'public/js')
    .webpackConfig({
        module: {
            rules: [{
                test: /\.jsx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            }]
        }
    })
    .sass('resources/assets/sass/app.scss', 'public/css');

if (!mix.inProduction()) {
    mix.webpackConfig({
            devtool: 'source-map'
        })
        .sourceMaps();
} else if (mix.inProduction()) {
    mix.version();
}

mix.browserSync({
    proxy: '127.0.0.1:8000'
});

The env package refers to: https://babeljs.io/docs/en/babel-preset-env

However, this did not seem to solve my problem.

Should I just use mix.babel instead?

Normally you would use npm run dev to compile for development. I suppose that is what laravel mix helps with that is it wraps around tools to compile assets code to compatible ones. Have you made use of Laravel mix properly? — omitobi
– omitobi, Commented Nov 9, 2018 at 13:32

Brian Lee · Accepted Answer · 2018-11-09 14:02:23Z

2

You need a polyfill: https://babeljs.io/docs/en/babel-polyfill

Import that as the first line in your entry (app.js).

However, I'd recommend using vue cli instead of laravel mix entirely.

answered Nov 9, 2018 at 14:02

Brian Lee

18.3k3 gold badges45 silver badges55 bronze badges

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

3 Comments

Jesse Luke Orange Over a year ago

I've literally spent hours looking at this o_O... is there a way to load it via Mix? Also, why should I scrap Mix for vue-cli?

Brian Lee Over a year ago

All you need to do is import "@babel/polyfill"; as the first line in app.js. Mix should handle the rest. Vue CLI handles everything pretty much out of the box and supports webpack 4. It's a much better build tool all around.

Jesse Luke Orange Over a year ago

Okay, does Mix utilize babel to some degree anyway? As require is not a native JS function

Collectives™ on Stack Overflow

Using Vue in Laravel

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related