Getting Started
Use one of the Vuetify.js Vue CLI packages (based on the official examples) to get your project started in no time. Vuetify.js supports SSR (server-side rendering), SPA (single page application), PWA (progressive web application) and standard HTML pages.
warning
In order for your application to work properly, you must wrap it in a v-app component. This component is used for dynamically managing your content area and is the mounting point for many components.

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.
<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <main>
        <v-container>Hello world</v-container>
      </main>
    </v-app>
  </div>
 
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({ el: '#app' })
  </script>
</body>
</html>
content_copy

New applications

Vuetify has 8 pre-made Vue CLI templates, 3 which are forked from official Vue.js templates. They contain small modifications to help you get started with Vuetify even faster. These packages require vue-cli. For more information on vue-cli, visit the official Github repository. These templates are designed to get you started as fast as possible with your next project
This template is intended for users who want to try out Vue.js and Vuetify.js in the most simplistic way. It contains a basic index.html with no additional functionality. This is useful for developers who want to easily preview the features of the framework.
This template is intended for users who are already familiar with Vue/Webpack. It contains a very simple webpack setup and is targetted at developers creating prototype or basic applications.
This template is intended for users who are looking for out of the box linting and unit testing.
This template is for advanced users looking to utilize the new Vue SSR (server-side rendering). Based off of the structure in the Vue.js 2 Hackernews repository. The Vuetify.js SSR template provides next generation functionality for advanced Vue applications.
Utilizing the power of NUXT, supercharge your development experience with a bootstraped version ready to go with Vuetify out of the box.
A pre-configured PWA (Progressive Web Application) template is at your disposal. Bootstraped with service workers, application manifest, and a 90+/100 Lighthouse score.
Vuetify's official Electron template for creating desktop applications.
In this template you can see an example of how to select only the components you want to use. This is useful for reducing package size with unused components.
  • This template is intended for users who want to try out Vue.js and Vuetify.js in the most simplistic way. It contains a basic index.html with no additional functionality. This is useful for developers who want to easily preview the features of the framework.

Existing applications

To include Vuetify into an existing project, you must pull it into your node_modules. 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 to 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.
$  npm install vuetify
# or
$  yarn add vuetify
content_copy
Once Vuetify has been installed, navigate to your applications 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.
import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)
content_copy
You will also need to include the Vuetify css file. Simply include the Vuetify css file in your index.html or import the actual stylus file or the minified css.
// index.js or main.js
import('path/to/node_modules/vuetify/dist/vuetify.min.css') // Ensure you are using css-loader
content_copy
// main.styl
@import 'path/to/node_modules/vuetify/src/stylus/main.styl' // Ensure you are using stylus-loader
 
content_copy
The easiest way to include the Material Design icons is to add a link tag to your index.html file.
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
</head>
content_copy
warning
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.

Support Browsers

Vuetify.js 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.
    • IE9 / IE10
      Not supported
      clear
    • IE11
      Supported w/ polyfill
      check
    • Edge
      Supported
      check
    • Chrome
      Supported
      check
    • Firefox
      Supported
      check
    • Safari 9+
      Supported
      check

Internet Explorer 11 Support

To use Vuetify.js with Internet Explorer, you must include a polyfill in your project. Vuetify.js can work with either polyfill.io or babel-polyfill. The polyfill must be loaded before your project source code. Other polyfills may be needed to use specific features in your project. Keep in mind, the CDN versions of these polyfills do not always include everything by default. It is recommended that you pull the package into your project locally and import it there.
Due to Internet Explorer's limited support for <template> tags, you must take care to 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:
<template slot="items" scope="props">
  <td>{‌{ props.item.name }‌}</td>
</template>
content_copy
Using a custom component, in this example <cell>, we could use this markup:
<!--Example component declaration-->
Vue.component('cell', { template: '<td><slot></slot></td>' });
 
<!--Example scoped slot-->
<template slot="items" scope="props">
  <cell>{‌{ props.item.name }‌}</cell>
</template>
content_copy
priority_high
If you still find yourself struggling with IE11, come get help from the Vuetify community.