Vuejs Support for Legacy Browsers — Laravel

I hope this post will help fellow coders that will have the unfortunate luck of running into the headache I endured recently when finalizing yet another Laravel project.

After a couple of weeks of coding away Vuejs components — all tested using Mozilla Firefox. I started testing my application against other browsers. The application worked as intended on all the other browsers, but Internet Explorer 11 (IE11); every area covered by my Vuejs components were blank.

Internet Explorer 11 (IE11)

I did some Google searches and tried out some of the solutions I found from various sources, and they were all useless. This is my solution and I hope it will be of use to you fellow coder — I’ll try keep it short, simple and direct.

Step 01:

Install ‘targets-webpack-plugin’

# npm install --save-dev targets-webpack-plugin


# yarn add --dev targets-webpack-plugin

Step 02:

Under your project root, open webpack.mix.js, require ‘targets-webpack-plugin’ and make alterations to the webpackConfig as shown on the image below.

Step 03:

Run the command below then re-run your application.

# npm run dev


‘targets-webpack-plugin’ is a webpack plugin for transcompilig final bundles so they support legacy browsers. To learn more, follow this link:

I hope this will be helpful to you as it was helpful to me. Cheers!