vuetifyjs/vuetify


🐉 Material Component Framework for Vue

https://vuetifyjs.com

License: MIT

Language: TypeScript

Keywords: javascript, material, material-components, material-design, material-theme, semantic, typescript, ui, ui-components, ui-kit, vue, vue-component, vue-components, vue-material, vue2, vuejs, vuejs2, vuetify, vuetifyjs


travis ci badge Coverage Downloads Downloads
License zenhub Chat
Version Next version CDN


Supporting Vuetify

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:


Sponsors

$1500/mo

$500/mo

$250/mo



Open Collective Sponsors


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, Material Design and a massive library of beautifully crafted components and features. Built 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 3 Webpack SSR (Server side rendered) template and build websites optimized for SEO.

For more information about IE11 and Safari 9+ polyfills, visit our Quick Start Guide

Documentation

To view our docs 📑, get support 🤯 and the store 🛒 visit us at vuetifyjs.com.

Getting Started

To get started with Vuetify, you can follow one of these simple set-up instructions.

One Click Quick-start

Looking to dive right in with zero setup and downtime? Check out our CodePen.io One Minute Quickstart

Vue CLI 3 Installation

Setting up Vuetify with Vue's CLI is really easy 👌.

(Unsure of how to install Vue's CLI on your system? Check out the official Installation Instructions or our Quick Start Guide)

If you're setting up a new project, first create it using the CLI's create command.

vue create my-app

If you are adding Vuetify to an existing Vue CLI 3 project, navigate to your project's root inside your terminal.

cd /path/to/project

Now, add Vuetify as a plugin with the CLI's add utility.

vue add vuetify

Note that you can also find and install Vuetify through Vue's UI!

Navigate to your project folder, or create a new Vue CLI app, then run the following command.

vue ui

Once the UI launches in your browser, click the + Add plugin button on the top right corner of your screen. On the next screen, search for Vuetify on the list, select it, and install it using the Install vue-cli-plugin-vuetify button on the bottom right.

Vue CLI 3 Ecosystem 🌎

Project Version Description
vue-cli-plugin-vuetify Version A Vue CLI 3 plugin for installing and configuring Vuetify
vuetify-loader Version A webpack plugin for treeshaking and progressive image support
eslint-config-vuetify Version An opinionated eslint-config for Vuetify
vuex-cognito-module Version A Vuex module for AWS Cognito

Manual Installation Through Package Managers

Looking to add Vuetify to your project directly as a node module? You can easily accomplish this by using yarn or npm package managers 📦.

yarn add vuetify
# OR
npm install vuetify

Once you have the library installed, we need to hook it up to Vue.

Fire up your favorite IDE, and head to the file in which you are importing Vue to your project and creating your application.

import Vue from 'vue'
import Vuetify from 'vuetify' // Import Vuetify to your project

Vue.use(Vuetify) // Add Vuetify as a plugin

For including styles 🎨, you can either place the below styles in your index.html (if using the CLI) or directly at your app's entry point.

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

Or you can import it to your webpack entry point file. This is usually your main.js file.

import 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/dist/vuetify.min.css'

Don't forget to install Material Design Icons as a dependency:

yarn add @mdi/font -D
# OR
npm install @mdi/font -D

For more information, please visit the quick-start guide.

Manual Installation Through CDN

To use Vuetify in your project by directly importing it through CDNs (Content Delivery Networks), add the following code to the <head> of your HTML document.

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

Don't forget to add both Vuetify and the main Vue library to your HTML file before the closing </body> tag.

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

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 👩‍💻👨‍💻 and the Contribution Guide.

Please do not ask general questions in an issue. Issues are only to report bugs, suggest enhancements, or request new features. For general questions and discussions, ask in the Vuetify Discord Community.

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

Reporting Guide

You can report issues by following the Issue Template and providing 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.

Project Statistics

Sourcerank 20
Repository Size 53 MB
Stars 22,790
Forks 3,226
Watchers 558
Open issues 1,012
Dependencies 2,129
Contributors 371
Tags 305
Created
Last updated
Last pushed

Top Contributors See all

John Leider Kael Jacek Karczmarczyk Albert Kaaman Dmitry Sharshakov aka. sh7dm MajesticPotatoe Marco Ferreira David Graham Elijah Kotyluk Pedro Vieira Phlow2001 Евгений Плотников juanpa669 Ilian Iliev Dmitry Murzin kevinmarrec Daan Roet Mohamed Elbahja Enric Bisbe Gil Loduis Madariaga Barrios

Packages Referencing this Repo

@swisstech/st-vuetify
Vue.js 2 Semantic Component Framework
Latest release 1.5.14 - Published - 22.8K stars
vuetify-for-external-systems
Vue.js 2 Semantic Component Framework. Changed for Successful Integration into external systems
Latest release 1.5.16-rc1 - Updated - 22.8K stars
@conzian/vuetify
Vue.js 2 Semantic Component Framework
Latest release 1.1.2 - Updated - 22.8K stars
lq-vuetify
## Project setup ``` yarn install ```
Latest release 0.0.60 - Updated - 22.8K stars
vuetify-rtl
Vue.js 2 Semantic Component Framework
Latest release 1.4.3 - Published - 22.8K stars
@jumpitt/vuetify
Vue.js 2 Semantic Component Framework
Latest release 0.0.1 - Published - 22.8K stars
vuetify
Vue Material Component Framework
Latest release 2.2.0-beta.0 - Updated - 22.8K stars
ps-tree-view
Vue.js 2 Semantic Component Framework
Latest release 1.1.17 - Updated - 22.8K stars
vuetify-mod
Vue.js 2 Semantic Component Framework
Latest release 1.1.0 - Published - 22.8K stars
@fisky/vuetify
Vue.js 2 Semantic Component Framework
Latest release 1.0.9 - Updated - 22.8K stars
@transplace/vuetify
Vue.js 2 Semantic Component Framework
Latest release 1.0.0-beta.5-TP.1.2 - Updated - 22.8K stars
org.webjars.npm:github-com-vuetifyjs-vuetify
WebJar for vuetify
Latest release 1.0.17 - Updated - 22.8K stars
@mparkitny/vuetify
Vue.js 2 Semantic Component Framework
Latest release 1.3.1 - Updated - 22.8K stars
Vue.js.Vuetify.UI
Vuetify is an open source MIT project that has been made possible due to the generous contributio...
Latest release 2.1.6 - Published - 22.8K stars
tst-vuetify
Vue.js 2 Semantic Component Framework
Latest release 2.0.0 - Updated - 22.8K stars
ps-tree2
Vue.js 2 Semantic Component Framework
Latest release 1.0.14 - Published - 22.8K stars

Recent Tags See all

v2.2.0-beta.0 December 03, 2019
v2.1.13 December 03, 2019
v2.1.12 November 27, 2019
v2.1.11 November 20, 2019
v2.1.10 November 12, 2019
v1.5.21 November 11, 2019
v2.1.9 October 31, 2019
v2.1.8 October 31, 2019
v1.5.20 October 31, 2019
v2.1.7 October 25, 2019
v2.1.6 October 22, 2019
v2.1.5 October 17, 2019
v2.1.4 October 15, 2019
v1.5.19 October 15, 2019
v1.5.19 October 15, 2019

Interesting Forks See all

Vanessa219/vuetify
Vuetify with the markdown editor
JavaScript - Last pushed - 4 stars - 1 forks
spezzino/vuetify
Material Component Framework for Vue JS 2.0
CSS - Last pushed - 1 stars
sksadri/vuetify
Material Component Framework for Vue.js 2
JavaScript - Last pushed - 1 stars
devmedoo/vuetify
Material Component Framework for Vue.js 2
JavaScript - Last pushed - 1 stars
krishna2nd/vuetify
Material Component Framework for Vue.js 2
JavaScript - Updated - 1 stars

Something wrong with this page? Make a suggestion

Last synced: 2019-09-26 10:15:22 UTC

Login to resync this repository