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.js has grown to be among the most popular JavaScript frameworks in the world. One of the reasons for this popularity is the wide use of components which 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 UI 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.

Flexible components

Every component in Vuetify is handcrafted under the guise of Google’s Material Design specification and 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 exlusively or a combination of 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 community and collaborate with other Vuetify developers in one of our public help channels. Need a more personalized support solution? Vuetify offers Enterprise support with 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 support page.

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.

Framework comparison

Below is a list of the top Vue.js frameworks and the features that we feel are important to developers and businesses when choosing a UI library.

Vue Framework Comparison 2023
Features
Vuetify
BootstrapVue
Buefy
Element UI
Quasar
Accessibility and section 508 support
Business and enterprise support
18 months LTS (Long-term support)
Release cadence**WeeklyBi-WeeklyBi-MonthlyBi-WeeklyBi-Weekly
RTL support
Premium themes
TreeshakingAutomaticManualManualManualAutomatic
**Based on average of all Major/Minor/Patch releases over the last 12 months.

So what are you waiting for? Head over to the Installation page 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.com with 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