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.

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.

FeatureSkill levelTime to read
Bidirectionality (LTR/RTL)Beginner1 min
Global configurationBeginner1 min
Icon FontsBeginner15 min
LayoutsBeginner5 min
ThemeBeginner15 min
Accessibility (a11y)Intermediate10 min
AliasingIntermediate5 min
Application layoutIntermediate15 min
Display & PlatformIntermediate15 min
Internationalization (i18n)Intermediate5 min
SASS variablesIntermediate10 min
BlueprintsAdvanced10 min
TreeshakingAdvanced15 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.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub