CODEWITHSUNDEEP
javascriptphplaravelvue.jswebpack
Jesse Luke Orange
Jesse Luke Orange

Reputation: 1999

Using Vue in Laravel

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?

Upvotes: 2

Views: 1349

Answers (1)

Brian Lee
Brian Lee

Reputation: 18197

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.

Upvotes: 2

Related Questions