Vuetify is a progressive framework that attempts to push web development to the next level.
In order to best accomplish this task, some sacrifices had to be made in terms of support for older versions of Internet Explorer.
This is not an exhaustive list of compatible browsers, but the main targeted ones. Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for Internet Explorer 11 and Safari 9/10.
Unfortunately Vue CLI doesn’t automatically bring IE11 compatibility in which you may encounter various errors (such as Symbol is not defined).
To assist in resolving these errors you need to manually add transpileDependencies parameter in vue.config.js:.
If you are using a custom Webpack setup, you will need to install the core-js and regenerator-runtime packages. In your terminal, run the following command:.
Include the plugin as early as possible within your main.js file—or whatever the main entry point of your application is.
Instead of manually installing and importing the polyfills that you need, we recommend that you install @babel/preset-env.
#IE11 and Safari 9 support
Once installed, add the preset to your babel.config.js file:.
or if using a .babelrc file:. Due to Internet Explorer’s limited support for tags, you must send fully compiled dom elements to the browser.
This can be done by either building your Vue code in advance or by creating helper components to replace the dom elements.
For instance, if sent directly to IE, this will fail:. Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
You will notice a browserslist field in package.json (or a separate .browserslistrc file) specifying a range of browsers the project is targeting.
Ready for more?
By default, it passes useBuiltIns: 'usage' to @babel/preset-env which automatically detects the polyfills needed based on the language features used in your source code. This ensures only the minimum amount of polyfills are included in your final bundle.
Modern Mode #
However, this also means if one of your dependencies has specific requirements on polyfills, by default Babel won't be able to detect it. If one of your dependencies need polyfills, you have a few options:. If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js.
This would enable both syntax transforms and usage-based polyfill detection for that dependency. If the dependency ships ES5 code and explicitly lists the polyfills needed: you can pre-include the needed polyfills using the polyfills option for @vue/babel-preset-app.
Note that es.promise is included by default because it's very common for libs to depend on Promises. It's recommended to add polyfills this way instead of directly importing them in your source code, because polyfills listed here can be automatically excluded if your browserslist targets don't need them.
|UMD||CommonJS||ES Module (for bundlers)||ES Module (for browsers)|
useBuiltIns: 'usage' #
If the dependency ships ES5 code, but uses ES6+ features without explicitly listing polyfill requirements (e.g.
Vuetify): Use useBuiltIns: 'entry' and then add import 'core-js/stable'; import 'regenerator-runtime/runtime'; to your entry file.
This will import ALL polyfills based on your browserslist targets so that you don't need to worry about dependency polyfills anymore, but will likely increase your final bundle size with some unused polyfills.
See @babel/preset-env docs for more details. When using Vue CLI to build a library or Web Components, it is recommended to pass useBuiltIns: false to @vue/babel-preset-app to disable automatic polyfill injection.
This ensures you don't include unnecessary polyfills in your code, as it should be the responsibility of the consuming app to include polyfills. With Babel we are able to leverage all the newest language features in ES2015+, but that also means we have to ship transpiled and polyfilled bundles in order to support older browsers.
These transpiled bundles are often more verbose than the original native ES2015+ code, and also parse and run slower.
Given that today a good majority of the modern browsers have decent support for native ES2015, it is a waste that we have to ship heavier and less efficient code to those browsers just because we have to support older ones. Vue CLI offers a "Modern Mode" to help you solve this problem. When building for production with the following command:.
Vue CLI will produce two versions of your app: one modern bundle targeting modern browsers that support ES modules, and one legacy bundle targeting older browsers that do not.
Polyfills when Building as Library or Web Components #
The cool part though is that there are no special deployment requirements. The generated HTML file automatically employs the techniques discussed in Phillip Walton's excellent post:. The modern bundle is loaded with