Quick start

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.

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.

The new Vuetify store is now live!. Help support the project and get some cool swag at the same time! Check it out

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

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>
      <v-content>
        <v-container>Hello world</v-container>
      </v-content>
    </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>

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

1
Experience

2
Application

3
Tests

4
SEO

5
Suggestion

  • One Minute Quickstart
  • Simple HTML
  • Webpack Simple
  • Webpack
  • Webpack SSR
  • NUXT
  • PWA
  • Electron
  • A La Carte
  • Cordova

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 --save
# or
$ yarn add vuetify

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)

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 'vuetify/dist/vuetify.min.css' // Ensure you are using css-loader
// main.styl
@import '~vuetify/src/stylus/main' // Ensure you are using stylus-loader

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>

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.

IE11 & Safari 9 support

In your project directory, install babel-polyfill and import it into your main entry:

// my-project/
$ npm install babel-polyfill --save
// or
$ yarn add babel-polyfill
// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()

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:

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