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

Vuetify 3 Beta

Welcome to the Vuetify 3 Beta release. To get started, select an installation method below or review some of the most Frequently Asked Questions

Installation

To get started with Vuetify 3 create a new Vue project using Vue CLI. For Vite preview, installations, there is an added step you must first use the create command using one of the following package managers:

We recommend using yarn, but any will work just fine. For more information on different installation options for vite, visit the official installation guide.

Vite

Vite is a build tool from the creator of Vue designed to provide faster and leaner development. It offers significantly lower build and compilation times during development and extremely fast Hot Module Replacement (HMR). The following sections cover how you can create a new vite application for Vue and Vuetify 3.

yarn create vite my-app --template vue

Once your project is created, navigate to the Adding Vuetify section to continue.

Vue CLI

For more information on how to setup Vue CLI, see the official installation guide.

Generate a new Vue 3 application by entering the following command into your terminal:

vue create my-vuetify-app

When prompted, select the Vue 3 Preview preset:

? Please pick a preset:
    Default ([Vue 2] babel, eslint)
  ❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint)
    Manually select features

After choosing your option, Vue CLI generates a new Vue 3 project located in the my-vuetify-app folder (or whatever name you provided).

Adding Vuetify

Navigate to your new project’s folder, and using Vue CLI, add the vuetify package:

cd my-vuetify-app
vue add vuetify

Once prompted, choose Vuetify 3 Preview:

? Choose a preset:
  Vuetify 2 - Configure Vue CLI (advanced)
  Vuetify 2 - Vue CLI (recommended)
  Vuetify 2 - Prototype (rapid development)
  Vuetify 3 - Vite (preview)
❯ Vuetify 3 - Vue CLI (preview 3)

Usage

With Vue 3.0, the initialization process for Vue apps (and by extension Vuetify) has changed. With the new createVuetify method, the options passed to it have also changed. Please see the pages in the Features section of the documentation for further details.

main.js
import 'vuetify/styles' // Global CSS has to be imported
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import App from './App.vue'

const app = createApp(App)
const vuetify = createVuetify() // Replaces new Vuetify()

app.use(vuetify)

app.mount('#app')

Components and directives are no longer included by default, they either have to imported separately or loaded automatically with the appropriate Vite or Webpack plugin. See treeshaking for more information.

main.js
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

CDN

We recommend using the latest version of Vuetify 3 from jsdelivr. All components and styles are included.

https://cdn.jsdelivr.net/npm/vuetify@3.0.0-beta.11/dist/vuetify.min.css

https://cdn.jsdelivr.net/npm/vuetify@3.0.0-beta.11/dist/vuetify.min.js

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp()
app.use(vuetify).mount('#app')

Frequently asked questions

Table of Contents

Questions

Have a question that belongs here? Tell us in our Discord Community or create a request on our Issue Generator.

  • What is included in the Beta?

    Currently most base functionality of Vuetify is included in the beta. This includes core services such as theme, configuration, and layout. A small subset of base components are also included such as grid system, sheets, and buttons. For full list of available components, visit the UI Component and API sections.

  • When will Vuetify 3 be released?

    Beta could take upwards of 2 months. Immediately following is a Release Candidate and then final release. Follow our progress via our project on Github or read an overview of what’s to come on our Roadmap.

  • Can I use it with Vite?

    Yes. We recommend creating a new project using the vite installation instructions.

How to report an issue or bug

For bugs related to the Beta, please create an issue via our Issue Generator using the following Reproduction Template. At this time we are only accepting bugs for the following:

  • Vuetify components and functions available in the Beta
  • Documentation content

How to connect with Vuetify team

The Vuetify team can be reached via Discord Community. If you have questions or would like to discuss Vuetify 3, come visit the #v3-discussion channel.

Ready for more?

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