Test

Get started with Vuetify 3

Get started with Vuetify, the world’s most popular Vue.js framework for building feature rich, blazing fast applications.


Installation

To get started with Vuetify 3, simply paste the following code into your terminal:

yarn create vuetify

This command prompts you with a few options before generating your scaffolded Vue / Vuetify 3 project.

success Installed "[email protected]" with binaries:
    - create-vuetify

? Project name: ❯ vuetify-project // the folder to generate your application
? Use TypeScript?: ❯ No / Yes
? Would you like to install dependencies with yarn, npm, or pnpm?:
  ❯ yarn
    npm
    pnpm
    none

After making your selections, create-vuetify will generate the structure for your new application.

Once the scaffold is complete, start the vite development server by running the following commands:

cd vuetify-project
yarn dev

For more information regarding supported package managers, please visit their official websites:

SSR

Vue 3 has no way to automatically detect if SSR is used — so nuxt, gridsome, and other SSR frameworks must manually set the ssr option to true in order to properly render the application.

src/plugins/vuetify.js
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

const vuetify = createVuetify({
  ssr: true,
})

Vue CLI

Vue CLI is currently in maintenance mode and no longer the default tooling used to build Vue applications. Vuetify projects are now generated using vite. We plan on enabling the Vue CLI installation path in an official guide in the future.

Manual steps

Follow these steps if for example you are adding Vuetify to an existing project, or simply do not want to use a scaffolding tool.

yarn add vuetify@^3.3.7

In the file where you create the Vue application, add the following code

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

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

createApp(App).use(vuetify).mount('#app')

This will include all components and directives regardless of whether or not you are using them. If you instead only want to include used components, have a look at the Vite or Webpack plugins, depending on your setup. The plugins also makes it possible to customize SCSS variables.

Lastly, do not forget to install icons.

CDN

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

https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css

https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js

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

const vuetify = createVuetify()

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

Using Laravel Mix

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives
})

createApp(App).use(vuetify).mount('#app')

To import the fonts you need to add to webpack.mix.js:

mix.copy('node_modules/@mdi/font/fonts/', 'dist/fonts/')

Exposed exports

JS

Name Description
vuetify Main entry point. Contains createVuetify() and public composables.
vuetify/styles Precompiled global CSS (reset, utilities, etc.), no component styles. Will be redirected to SASS if styles.configFile is set in vite or webpack.
vuetify/components All components. Not recommended as it will include all components during development, slowing down your build.
vuetify/components/<name> Individual components. Grouped by top-level name, for example VListItem, VListGroup, and VListItemTitle are all in vuetify/components/VList.
vuetify/directives All directives.
vuetify/directives/<name> Individual directives.
vuetify/blueprints/<name> Preset collections of prop defaults.
vuetify/locale Translations for strings in vuetify components. Each language is a named export.
vuetify/locale/adapters/<name> Adapters to retrieve translations from other libraries such as vue-i18n.
vuetify/iconsets/<name> Icon presets, see Icon Fonts

SASS

See SASS Variables for more information.

Name Description
vuetify Global CSS (reset, utilities, etc.), no component styles. Equivalent to vuetify/styles in JS.
vuetify/settings All SASS variables, including component variables.
vuetify/tools Mixins and functions.

Nightly Builds

The three development branches (master, dev, and next) are automatically published to NPM at 1200 UTC under the @vuetify/nightly namespace. They may be outdated or buggy and are therefore not officially supported and are only supplied for testing purposes. These builds can be installed with a package alias.

Branch name Purpose package.json entry Changelog
master Bug fixes "vuetify": "npm:@vuetify/nightly@latest" Changelog
dev New features "vuetify": "npm:@vuetify/nightly@dev" Changelog
next Breaking changes "vuetify": "npm:@vuetify/nightly@next" Changelog
 "devDependencies": {
-  "vuetify": "^3.3.0"
+  "vuetify": "npm:@vuetify/[email protected]"
 }

Questions

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 on GitHub