Vuetify for Vue.js
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
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">
</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 --save-dev# yarn
yarn add vuetify --devUse
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
Support and Questions
Ask your support questions on the vuetifyjs gitter.
Info
Codepen starter Vuetify Template
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent