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.

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

Vue CLI-3 Install

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.

$ yarn global add @vue/cli
// OR
$ npm install @vue/cli -g

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

Tip: If you don't want to overwrite your current vue-cli because you still need vue init from version 2, then try this.

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.

$ vue create my-app

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

$ vue add vuetify

Keep in mind, if you are installing the Vuetify package on an existing vue-cli-3 project, ensure you have a clean working directory in case there are issues with the merge.

After installation, you can run the dev npm script in package.json. This will start a local development server at https://localhost:8080.

$ yarn serve
// OR
$ npm run serve

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://cdn.jsdelivr.net/npm/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://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/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 templates are designed to get you started as fast as possible with your next project.

These packages require [email protected]. If you are starting a brand new application, it is recommended to use [email protected]. The below packages are currently being converted to use the new system. For more information on using version 3, click here

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 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 [email protected], 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 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

Some components like the date picker use Material Icons. The easiest way to include them 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>

Alternatively use npm or yarn to install material-design-icons-iconfont.

// index.js or main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader

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

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:

// my-project/
$ npm install babel-polyfill --save
// or
$ yarn add 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

// my-project/src/index.js
import 'babel-polyfill'
...
new Vue()

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

$ yarn add @babel/preset-env -d
// or
$ npm install @babel/preset-env --save-dev

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

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

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>