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
<!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># npm
npm install vuetify# yarn
yarn add vuetifyimport 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.
Ask your support questions on the vuetifyjs discord.
Codepen starter Vuetify Template
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent