node package manager
Stop writing boring code. Discover, share, and reuse within your team. Create a free org »


Vuetify for Vue.js

travis ci badge codebeat badge Downloads Version CDN License Chat

Vuetify.js is a semantic component framework for Vue.js 2. It aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify.js uses Google's Material Design design pattern, taking cues from other popular frameworks such as Materialize.css, Material Design Lite, Semantic UI and Bootstrap 4

Build amazing applications with the power of Vue and Material Design with a massive library of beautifully crafted components. Built for speed, Vuetify components feature an easy-to-remember semantic design that shifts remembering complex classes and markup, to type-as-you speak properties that have simple and clear names.

Vuetify.js supports all modern browsers, including IE11 and Safari 9+. From mobile to laptop to desktop, you can rest assured that your application will work as expected. Interested in the bleeding edge? Try the vue-cli Webpack SSR (Server side rendered) template and build the ultimate UI.

Vuetify.js is proudly sponsored by:

Looking for Vue.js jobs? Check out

Support Vuetify.js's development with:
Patreon  or  Paypal

Demo and Documentation


CDN Quick-start

<!DOCTYPE html>
  <link href=',400,500,700|Material+Icons' rel="stylesheet">
  <link href="" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <div id="app">
        <v-container>Hello world</v-container>
  <script src=""></script> 
  <script src=""></script> 
    new Vue({
      el: '#app'

Project Install

# npm
npm install vuetify
# yarn
yarn add vuetify


import Vue from 'vue'
import Vuetify from 'vuetify'

For including styles, you can either place the below styles in your index.html

<link href=',400,500,700|Material+Icons' rel="stylesheet">
<link href="" rel="stylesheet">

Or you can import it to your webpack entry point


Keep in mind, you will need to ensure your webpack config contains a css-loader.

Frequently asked questions and Gotchas

Frequently asked questions

Support and Questions

Ask your support questions on the vuetifyjs discord.


Codepen starter Vuetify Template