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.

Supported Browsers

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.

Chrome
Supported
Firefox
Supported
Edge
Supported
Safari 10+
Supported
IE11 / Safari 9
Supported with polyfill
IE9 / IE10
Not supported

New applications

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.

content_copy

For information on how to use Vue-CLI-3, visit the official documentation

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.

content_copy

Tip: If you already have vue-cli installed, make sure you are on the latest version by typing vue --version into your cli.

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

content_copy

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

content_copy

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

Existing applications

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.

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

content_copy

Once Vuetify has been installed, navigate to your application's main entry point. In most cases this will be index.js or main.js. In this file you will import Vuetify and tell Vue to use it.

content_copy

You must then pass the Vuetify object to your Vue options. This is similar to installing vuex or vue-router.

content_copy

When importing Vuetify, all of the base styles that your application will need are brought in as well. Each component is also responsible for their own styles and when using the vuetify-loader, only the components that you use (and their respective styles) will be included in your final bundle

You must also import the Google Roboto font to ensure you have the property typography.

content_copy
content_copy

You can also asynchronously load the fonts. For this, use npm or yarn to install webfontloader.

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.

Vue UI

Vuetify can also be installed using Vue UI, the new visual application for vue-cli-3. Ensure that you have the latest version of vue-cli installed and from your terminal type:

content_copy

This will start the Vue User Interface and open a new window in your browser. On the left side of your screen, click on Plugins. Once navigated, simply search for Vuetify in the input field.

Install Vuetify Plugin

After installation, you will have the option to configure your application's default Vuetify settings.

Configure your Vuetify installation

CDN Install

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.

content_copy

IE11 & Safari 9 support

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:

content_copy

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

content_copy

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

content_copy

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

content_copy
content_copy

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

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

content_copy

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:

content_copy
Edit this page | language on Github