JavaScript CSS TypeScript Other
Switch branches/tags
Clone or download
Permalink
Failed to load latest commit information.
.github Creates Issue templates and adds links in README (#4505) Jul 7, 2018
build fix: don't reduce animation keyframes (#4564) Jul 11, 2018
dev chore(dev): mount vue after content load Jul 7, 2018
eslint-rules refactor: render components with direct references instead of strings ( Mar 5, 2018
src Merge branch 'master' into dev Jul 18, 2018
test fix(inputs): don't override aria-label attribute Jul 18, 2018
types chore(typescript): application.js, applicationable.js converted to ty… Jul 10, 2018
.babelrc chore(build): update to webpack 4 (#4162) May 30, 2018
.editorconfig updates for linting Jan 27, 2017
.env.example refactor pre-commit checks (#3003) Jan 15, 2018
.eslintignore test: add tests for type definitions May 23, 2018
.eslintrc.js chore(lint): enable eslint-plugin-vue Jun 24, 2018
.gitignore chore: set up ts -> es5 build + webpack externals May 3, 2018
.npmignore chore: set up ts -> es5 build + webpack externals May 3, 2018
.travis.yml chore(build): update to ts 2.9, enable tslint and happypack (#4311) Jun 16, 2018
.tslint.js fix: replace no-unused-variable with noUnusedLocals, enable noImplici… Jul 9, 2018
BACKERS.md Update BACKERS.md Jul 1, 2018
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md (#847) Jun 29, 2017
LICENSE Dev (#613) May 27, 2017
README.md Creates Issue templates and adds links in README (#4505) Jul 7, 2018
eslint-local-rules.js chore: replace eslint-plugin-rulesdir with eslint-plugin-local-rules Mar 7, 2018
package.json [release] 1.1.6 Jul 18, 2018
postcss.config.js chore(build): update to webpack 4 (#4162) May 30, 2018
process.config.js feat(pm2): add process file Jul 13, 2018
tsconfig.dev.json Convert entry module to typescript and set up tslint Apr 6, 2018
tsconfig.dist.json feat(a-la-carte): add types and sourcemaps May 10, 2018
tsconfig.json fix: replace no-unused-variable with noUnusedLocals, enable noImplici… Jul 9, 2018
yarn.lock chore(lint): enable eslint-plugin-vue Jun 24, 2018

README.md

travis ci badge Coverage codebeat badge Downloads
License zenhub Chat
Version CDN


Professionally-supported Vuetify.js now available

Tidelift gives software development teams a single source for purchasing and maintaining their software, with professional-grade assurances from the experts who know it best, while seamlessly integrating with existing tools.


Supporting through Patreon

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 becoming a patron.

Become a Patron

Diamond



Palladium


Introduction

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 and Material Design and a massive library of beautifully crafted components. Created 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.

Documentation

You can find the Vuetify documentation on the website.

One Click Quick-start

Codepen link

<!DOCTYPE html>
<html>
<head>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/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>
    <v-app>
      <v-toolbar app>
        <v-toolbar-title>My Application</v-toolbar-title>
      </v-toolbar>
      <v-navigation-drawer app></v-navigation-drawer>
      <v-content>
        <v-container fluid>
          Hello World
        </v-container>
      </v-content>
      <v-footer></v-footer>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

Vue CLI-3 Install

vue create my-app
// THEN
vue add vuetify

Installation

# npm
npm install vuetify
# yarn
yarn add vuetify

Usage

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://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">

Or you can import it to your webpack entry point

require('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons')
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.

Community Support

Ask your support questions on the Vuetify Discord Community.

Frequently asked questions and Gotchas on the FAQ Guide

Contributing

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, request enhancements, or request new features. For general questions and discussions, ask on the Vuetify Discord Community.

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

Contributing Guide

You can request features using the Feature Request Template or report bugs using the Bug Report Template and create 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.

License

Vuetify is MIT licensed.