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

vuetify

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 vuejobs.com

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

Demo and Documentation

Documentation

CDN Quick-start

<!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>

Project Install

# npm
npm install vuetify
# yarn
yarn add vuetify

Use

import Vue from 'vue'
import Vuetify from 'vuetify'
 
Vue.use(Vuetify)

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

<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">

Or you can import it to your webpack entry point

require('/path/to/node_modules/vuetify/dist/vuetify.min.css')

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.

Info

Codepen starter Vuetify Template

how? learn more

Collaborators list

Stats

Try it out

Keywords

None

Dependencies

None

Dependents (16)

vuedoo, vuetify-dropzone, vuetify-category-card, vue-circle-avatar, nateify, native-scripts, rest-bundle, lavas-extension-appshell, vuetify-mediabox, vuetify-quill, @nuxtjs/vuetify, @orcproject/orc, and more