Material Component Framework For Vue JS 2 – Vuetify

Material Component Framework For Vue JS 2 – Vuetify

Vuetify is a component framework for VueJS 2.0 that aims to provide clean, semantic and reusable components that make building your application a breeze. Vuetify utilizes Google's Material Design design pattern.

travis ci badge Coverage Consulting Downloads Downloads
codebeat badge License zenhub Chat
Version Next version CDN

Supporting Vuetify

Vuetify is an open source MIT project that has been made possible due to the generous contributions by community backers. If you are interested in supporting this project, please consider:

Premiere Sponsor

Diamond Sponsors

Palladium Sponsors

Open Collective Sponsors

Donate to OpenCollective


Vuetify is a semantic component framework for Vue. It aims to provide clean, semantic and reusable components that make building your application a breeze.

Build amazing applications with the power of Vue, Material Design and a massive library of beautifully crafted components and features. Built according to Google's Material Design Spec, 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.

Harness the power of the Vuetify community and get help 24/7 from the development team and our talented community members across the world. Become a backer and get access to dedicated support from the team.

Browser Support

Vuetify supports all modern browsers, including IE11 and Safari 9+ (using polyfills). 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 websites optimized for SEO.


Link to Vuetify documentation.

One Click Quick-start

Codepen link

Vue CLI-3 Installation

vue create my-app
vue add vuetify


Project Version Description
vue-cli-plugin-vuetify Version A vue-cli-3 plugin for installing and configuring Vuetify
vuetify-loader Version A webpack plugin for treeshaking and progressive image support
eslint-config-vuetify Version An opinionated eslint-config for Vuetify
vuex-cognito-module Version A Vuex module for AWS Cognito

Manual Installation

yarn add vuetify
# OR
npm install vuetify
// main.js
import Vue from 'vue'
import Vuetify from 'vuetify'


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

<!-- index.html -->
<link href=",300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="" rel="stylesheet">

Or you can import it to your webpack entry point:

// main.js

For more information, please visit the quick-start guide.

Community Support

Ask your support questions on the Vuetify Discord Community.

Frequently asked questions and Gotchas on the FAQ Guide


Developers interested in contributing should read the Code of Conduct.

Please do not ask general questions in an issue. Issues are only to report bugs, suggest enhancements, or request new features. For general questions and discussions, ask in the Vuetify Discord Community.

It is important to note that for each release, the detailed changes are documented in the release notes.

Reporting Guide

You can report issues by following the Issue Template and providing a minimal reproduction with a CodePen template or a full project at CodeSandbox.

Good First Issue

To help you get you familiar with our contribution process, we have a list of good first issues that contain bugs which have a relatively limited scope. This is a great place to get started.

We also have a list of help wanted issues that you might want to check.



This project exists thanks to all the people who contribute.


Thank you to all our backers!

Github Repository

Tags: #VueJs