Use one of the Vuetify Vue CLI packages (based on the official examples) to get your project started in no time. Vuetify supports SSR (server-side rendering), SPA (single page application), PWA (progressive web application) and standard HTML pages.

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.

Vue-CLI 3 is the next generation cli tool made to help you get started more easily than before. When you start your app with vue-cli you will also be able to get the official webpack updates and config changes, as well as Vuetify's updates without an arduous upgrade process.

Once the cli is installed, you can generate a new project scaffold. Select the default install unless you have specific packages that you need to include (e.g. vuex or vue-router). This will create a new Vue project that's ready to go with your selected options.

Tip: If you already have Vue CLI installed, you can check if you are on the latest version by typing vue --version from your terminal.

Now that you have an instantiated project, you can add the Vuetify package using the cli.

This will provide you with a set of options for customizing your installation. The default preset has a-la-carte already enabled for you.

After installation simply run yarn serve or npm run serve to start your application.

To include Vuetify into an existing project, you must install its npm package. You can use either npm or yarn to accomplish this task. These are both package managers that allow you to control what resources are available in your application.

If your existing application is using vue-cli@3, please use the above guide on how to install the Vuetify package.

For a detailed explanation of how to get npm running in your environment, check out the official npm documentation. Alternatively, if you wish to use yarn, you can find more information on the official yarn documentation. Once setup, you can run either command from the cli.

Once Vuetify has been installed, create a folder within you src directory called plugins. Inside, add a vuetify.js file. This is where we will handle all of our bootstrapping and setup of Vuetify for your project.

Warning: While Vuetify attempts to not cause any css collision as much as possible, there is no guarantee that your custom styles will not alter your experience when integrating this framework into your existing project.

There are three ways in which you can install Vuetify. The first (and recommended) way is to utilize the vuetify-loader or what we call automatic A-la-carte. This will ensure that your application only uses the features and styles from Vuetify that are needed, significantly reducing your application's compiled size. Keep in mind, when importing from vuetify/lib, the necessary styles are automatically imported for you.

If there is a reason you are unable to utilize the vue-cli-plugin package, you can manually install the vuetify-loader through your vue.config.js or webpack config. For more information on manual installation, navigate to the A-la-carte page.

The last method will import and setup all of Vuetify's features and styles. As stated above, it is still recommended that you utilize the vuetify-loader if at all possible. For this install, you will need to manually import the Vuetify styles. This is also the process used when bootstrapping Vuetify through a browser as opposed to compiling. You can observe the browser installation in our cdn quickstart.

When using webpack, you have the ability to setup your application with either of the above options (Full or A-la-carte install). However, you will need to configure add a webpack rule (or modify an existing one) for sass files. You can start by installing the necessary dependencies:

Once installed, locate your webpack.config.js file and copy the snippet below into the rules array. If you have an existing sass rule configured, you may need to apply some or all of the changes below. If you are you looking to utilize the vuetify-loader as well, you can find more information on setting it up with webpack on the A-la-carte page.

Once you have setup your initial Vuetify options in your src/plugins/vuetify.js file, you must then pass that object into your main Vue instance options. This install process is similar to vue-router and vuex

To test using Vuetify.js without installing a template from Vue CLI, copy the code below into your index.html. This will pull the latest version of Vue and Vuetify, allowing you to start playing with components. You can also use the Vuetify starter on codepen. While not recommended, if you need to utilize the cdn packages in a production environment, it is recommended that you scope the versions of your assets. For more information on how to do this, navigate to the jsdelivr website.

Vuetify utilizes features of ES2015/2017 that require the need to use polyfills for Internet Explorer 11 and Safari 9/10. If you are using vue-cli-3, this is done automatically for you. Otherwise, in your project directory, you can install babel-polyfill:

It is important to include the plugin as early as possible within your main index.js file. If using a Vuetify SSR package, this will apply to the client-entry.js file

It is recommended that you use babel-preset-env with the corresponding polyfill to ensure only the necessary polyfills are added to your application. For more information on babel-present-env, visit the documentation

Once installed, add the preset to your .babelrc or babel.config.js

Unfortunately vue-cli-3 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 may need to manually add transpileDependencies parameter in vue.config.js

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: