This is the Vuetify 3 documentation, examples and information may be broken or outdated.

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?

Vuetify is a complete UI framework built on top of Vue.js. The goal of the project is to provide developers with the tools they need to build rich and engaging user experiences. Vuetify is designed from the ground up to be easy to learn and rewarding to master with almost a hundred carefully crafted components from the Material Design specification.

Vuetify takes a mobile first approach to design which means your application just works out of the box — whether it’s on a phone, tablet, or desktop computer.

If you are an experienced developer and want to compare Vuetify to other libraries/frameworks, check out our Vue Framework Comparison Chart.

Getting started

The easiest way to try Vuetify is to use our Codepen template. This template is used by all examples within the documentation and is the perfect sandbox to play around with the framework. If you prefer to use a local index.html file, we have a guide on how to use Vuetify via CDN.

Why Vuetify?

Since its initial release in 2014, Vue.js has grown to be one of 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 concise modules to be used and re-used throughout their application. UI libraries are collections of these modules that implement a specific style guideline and provide the necessary tools to build expansive web applications.

Vuetify is developed exactly according to Material Design specification with every component meticulously crafted to be modular, responsive, and performant. Customize your application with unique and dynamic Layouts and customize the styles of your components using SASS variables.

Vuetify has a very active development cycle and is patched weekly, responding to community issues and reports at breakneck speed, allowing you to get your hands on bug fixes and enhancements more often. In addition, every major release is accompanied with 18 months of Long-term support for the previous minor version.

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 elite support through GitHub sponsorship with options tailored to individuals and businesses. Check out some other ways to Sponsor Vuetify development.

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.

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
IconsBeginner15 min
LayoutsBeginner5 min
ThemeBeginner15 min
Accessibility (a11y)Intermediate10 min
BreakpointsIntermediate15 min
Internationalization (i18n)Intermediate5 min
Programmatic scrollingIntermediate2 min
SASS variablesIntermediate10 min
PresetsAdvanced15 min
TreeshakingAdvanced15 min

Can’t find what you’re looking for? Help us improve! Please reach out to john@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.