# Browser support

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.

# Browsers

Browser Status
Chromium (Chrome, Edge Insider) Supported
Edge Supported
Firefox Supported
Safari 10+ Supported
IE11/Safari 9 Supported with polyfill
IE9 / IE10 Not supported

# IE11 and Safari 9 support

Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for Internet Explorer 11 and Safari 9/10.

# Vue CLI

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:

// vue.config.js

module.exports = {
  transpileDependencies: ['vuetify']
}

# Webpack

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:

yarn add core-js regenerator-runtime
# OR
npm install core-js regenerator-runtime --save

Include the plugin as early as possible within your main.js file—or whatever the main entry point of your application is.

// src/main.js

// Polyfills
import 'core-js/stable'
import 'regenerator-runtime/runtime'

// Imports
import Vue from 'vue'
import vuetify from '@/plugins/vuetify'

new Vue({ vuetify }).$mount('#app')


# Babel preset-env

Instead of manually installing and importing the polyfills that you need, we recommend that you install @babel/preset-env. This package ensures only the necessary polyfills are added to your application based upon your designated settings.

yarn add @babel/preset-env -D
# OR
npm install @babel/preset-env -D

Once installed, add the preset to your babel.config.js file:

// babel.config.js

module.exports = {
  presets: ['@babel/preset-env']
}

or if using a .babelrc file:

// .babelrc

{
  "presets": ["@babel/preset-env"]
}

# Template caveat

Due to Internet Explorer’s limited support for <template> 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:

<!-- Vue Component -->

<template v-slot:items="props">
  <td>{‌{ props.item.name }‌}</td>
</template>

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:10/29/2020, 3:45:21 AM