πŸ‰ Material Component Framework for Vue.js 2
Clone or download
nekosaur and johnleider fix(VTreeview): correcly handle updating items array of equal size (#…
…6202)

the VTreeview component did not handle updating items prop with an array
of equal size as current array.

fixes #6181
Latest commit 4177931 Jan 19, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github chore: fix typo in pull request template (#5645) Nov 18, 2018
packages fix(VTreeview): correcly handle updating items array of equal size (#… Jan 18, 2019
scripts chore(script): set const to let Jan 12, 2019
.editorconfig mark normal files as non executable (#4877) Aug 17, 2018
.eslintrc.js chore: update dependencies, fix npm scripts Oct 29, 2018
.gitignore chore: update ignore files, move backers and travis to root Oct 28, 2018
.travis.yml chore(travis): add new stage for publishing dev Jan 3, 2019
BACKERS.md chore(BACKERS): update backers Jan 16, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md (#847) Jun 29, 2017
LICENSE.md docs: Happy New Year! 🎁 (#6003) Dec 30, 2018
README.md chore: moved licence file, fixed link to licence in README.md Nov 20, 2018
ecosystem-win.config.js chore: rename vuetifyjs.com package to docs (#6122) Jan 12, 2019
ecosystem.config.js chore: rename vuetifyjs.com package to docs (#6122) Jan 12, 2019
eslint-local-rules.js chore: move config and scripts to root Oct 27, 2018
jest.config.js test: skip typescript definitions for coverage Oct 29, 2018
lerna.json chore(release): publish v1.4.2 Jan 15, 2019
now.json chore(ci): re-use existing now deployment Nov 8, 2018
package.json chore: rename vuetifyjs.com package to docs (#6122) Jan 12, 2019
tsconfig.json chore: update vue to 2.5.21 (#5789) Dec 12, 2018
tslint.json fix: typescript lint errors (#5520) Nov 5, 2018
yarn.lock docs(fetch): add node polyfill Dec 23, 2018

README.md

travis ci badge Coverage codebeat badge Downloads 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 or donating to our OpenCollective.

Become a Patron
Donate to OpenCollective

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 id="app">
    <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 report issues by following the Issue Template and you can 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.

Credits

Contributors

This project exists thanks to all the people who contribute.

Backers

Thank you to all our backers! πŸ™ [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

Vuetify is MIT licensed.