Introduction
Learn more about what Vuetify is, how to create an application from scratch, browse API references, sample code, tutorials, and more.
What is Vuetify?
Since its initial release in 2014, Vue.jshas grown to be among the most popular JavaScript frameworks in the world. One of the reasons for this popularity is the wide use of componentswhich enable developers to create small modules to be used and re-used throughout an application. Vuetify is a collection of pre-made components paired with powerful features such dynamic themes, global defaults, application layouts, and more. Its goal is to provide developers with all of the necessary tools to build rich and engaging user experiences.
Getting started
The fastest way to try Vuetify is in the browser at 🎮play.vuetifyjs.com. For a complete list of installation options please navigate to the Installation page.
Why Vuetify?
Vuetify is a powerful Vue Component Framework built from the ground up to be easy to learn and rewarding to master. Our collection of UI components maintain a consistent style throughout your application with enough customization options to meet any use-case.
It’s free
Vuetify is an Open Source project available for free under the MIT licensed. Additionally, Vuetify’s source code is available on GitHub, allowing developers to modify and contribute to its development if they choose to do so.
Flexible components
Every component in Vuetify is handcrafted under the guise of Google’s Material Design specificationand comes with hundreds of customization options that fit any style or design; even if it’s not Material. Write Vue templates that are as concise or verbose as you want using exclusively or in combination, props, slots, and components.
Tooling
Vuetify has a large ecosystem of supporting tools that enrich the development experience that range from project creation to design UI kits.
- 🎨 Figma UI Component Kit
- ⚡ First-party Vite support
- 🏗️ Pre-configured Vue 3 applications for TypeScript and JavaScript
- ⌨️ Intellisense & autocomplete support for VSCodeand JetBrainsproducts
- 🖼️ Wireframe examples
Community
When you develop with Vuetify, you are never alone. Stuck on a problem? Take advantage of our massive Discord communityand collaborate with other Vuetify developers in one of our public help channels. Need a more personalized support solution? Vuetify offers Enterprise supportwith options tailored to individuals and businesses. Check out some other ways to Sponsor Vuetify development.
Professional and Enterprise support
Vuetify offers an array of support services designed to help you get the most out of your application. Let our experience team provide you with the tools that you need to succeed with:
- ↗️ Vuetify version upgrades
- 📊 Performance review & analysis
- ⛑️ SLA & direct support
For more information regarding our professional support options, navigate to our Enterprise supportpage.
Active development
Vuetify has been in active development since 2016 and is constantly responding to community issues and reports at breakneck speed, allowing you to get your hands on bug fixes and enhancements more often. Our overall release cadence typically follows:
- 🔨 PATCH (Weekly)
- ⛏️ MINOR (Quarterly)
- ⚒️ MAJOR (Bi-yearly to Yearly)
In addition, after every MAJOR release, the previous version is still maintained with 18 months of Long-term support.
So what are you waiting for? Head over to the Installationpage and start building your next great idea today.
Feature Guides
Learn more about the inner workings of Vuetify and become a skilled v-developer with our detailed feature guides. Each guide is designed to teach you how to get the most out of your development experience with information on: how to build responsive pages using Layouts, how to customize the style of your application with SASS variables, and how to slim down your application’s package size via Treeshaking, and more.
| Feature | Skill level | Time to read |
|---|---|---|
| Bidirectionality (LTR/RTL) | Beginner | 1 min |
| Global configuration | Beginner | 1 min |
| Icon Fonts | Beginner | 15 min |
| Layouts | Beginner | 5 min |
| Theme | Beginner | 15 min |
| Accessibility (a11y) | Intermediate | 10 min |
| Aliasing | Intermediate | 5 min |
| Application layout | Intermediate | 15 min |
| Display & Platform | Intermediate | 15 min |
| Internationalization (i18n) | Intermediate | 5 min |
| SASS variables | Intermediate | 10 min |
| Blueprints | Advanced | 10 min |
| Treeshaking | Advanced | 15 min |
Can’t find what you’re looking for? Help us improve! Please reach out to hello@vuetifyjs.comwith your feedback or join us in the Vuetify Discord community.