Get started with Vuetify 4

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

Installation

Vuetify has support for multiple different installation paths with the most common scaffolding tool being create-vuetify

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

Using Vite

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

::: tabs

bash

pnpm create vuetify

bash

yarn create vuetify

bash

npm create vuetify@latest

bash

bun create vuetify

:::

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

bash

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
    bun
    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:

bash

cd vuetify-project
pnpm dev

Using Nuxt 3

Nuxt is an open-source framework that has helpful features to quickly get you started with developing a full-stack Vue app, such as file-based routing, SSR and component auto-imports.

Manual setup

Nuxt is powered by Nitro and can be used with Vite or Webpack 5 bundlers, so the steps to get Vuetify working in Nuxt 3 are quite similar to the manual steps described below.

Start off creating a nuxt app by executing the following commands:

::: tabs

bash

pnpx nuxi@latest init <project-name>
cd <project-name>
# Create a .npmrc file with shamefully-hoist=true
pnpm install

bash

npx nuxi@latest init <project-name>
cd <project-name>
yarn

bash

npx nuxi@latest init <project-name>
cd <project-name>
npm install

bash

bunx nuxi@latest init <project-name>
cd <project-name>
bun install

:::

and then install the required Vuetify modules as dependencies:

::: tabs

bash

pnpm i -D vuetify vite-plugin-vuetify
pnpm i @mdi/font

bash

yarn add -D vuetify vite-plugin-vuetify
yarn add @mdi/font

bash

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

bash

bun add -d vuetify vite-plugin-vuetify
bun add @mdi/font

:::

Next, integrate the following entries into your nuxt.config.ts file:

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineNuxtConfig({
  //...
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    plugins: [
      // @ts-expect-error
      vuetify({ autoImport: true }),
    ],
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
})

Nuxt allows you to change its Vite config by using its built-in hook vite:extendConfig. In its callback function, add the Vuetify plugin to the array of Vite plugins. To resolve relative asset URLs that are passed to Vuetify components such as VImg (e.g. ~/assets/img/some.png) the transformAssetUrls function needs to be added in the vite entry .

In the next step, initialize Vuetify and add it to the main Vue app instance. This can be done in the plugins folder as any plugin that is placed in this folder will be automatically loaded by Nuxt at startup.

// import this after install `@mdi/font` package
import '@mdi/font/css/materialdesignicons.css'

import 'vuetify/styles'
import { createVuetify } from 'vuetify'

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    // ... your configuration
  })
  app.vueApp.use(vuetify)
})

Finally, add Vuetify's root VApp component either in ~/app.vue or ~/layouts/default.vue, for example:

html

<template>
  <NuxtLayout>
    <v-app>
      <NuxtPage />
    </v-app>
  </NuxtLayout>
</template>

html

<template>
  <v-app>
    <!-- .... -->
  </v-app>
</template>

You should now have access to all Vuetify components and tools in the Nuxt app.

vuetify-nuxt-module

Alternatively, you can use the vuetify-nuxt-module (works only with Vite). The module is strongly opinionated and has a built-in default configuration out of the box. You can use it without any configuration, and it will work for most use cases.

Check the documentation for more information on how to use it.

Using Laravel

The createApp() setup may differ, especially if your Laravel application uses inertiajs. As long as you chain with.use(), Vuetify should be properly registered and available.

import { createApp } from 'vue'

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

const app = createApp()

// Register Vuetify as plugin
const vuetify = createVuetify()
app.use(vuetify).mount("#app")

import vuetify from 'vite-plugin-vuetify'
// ... other imports

export default defineConfig({
  plugins: [
    // ... other plugins
    vuetify({ autoImport: true }),
  ],
})

If font is defined at resources/views/app.blade.php, Vuetify's font settings will not take effect.

Using CDN

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

https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.min.css { .text-truncate }

https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.min.js { .text-truncate }

Rememeber to include additional script for Vue.js. See full example below:

html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <!-- ... -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@{{ version }]/dist/vuetify.min.css" />
  </head>
  <body>
    <div id="app">
      <v-app>
        <v-container>
          <v-text-field label="My field" />
        </v-container>
      </v-app>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@{{ version }}/dist/vue.global.prod.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.min.js"></script>
    <script>
      const { createApp } = Vue
      const { createVuetify } = Vuetify
      const vuetify = createVuetify()
      const app = createApp()
      app.use(vuetify).mount('#app')
    </script>
  </body>
</html>

Using as ES Module with CDN

To import Vuetify (and Vue) using an import map you can use the same CDN but contain it in a ES module without tooling

::: info Unlike regular CDN links, import map expects .../vuetify.esm.js (*esm.js instead of *.min.js) :::

html

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.min.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css" />
  <link rel="stylesheet" href="https://fonts.bunny.net/css?family=roboto:400,500,700" />
  <script type="importmap">
  {
    "imports": {
      "vue": "https://cdn.jsdelivr.net/npm/vue@latest/dist/vue.esm-browser.js",
      "vuetify": "https://cdn.jsdelivr.net/npm/vuetify@{{ version }}/dist/vuetify.esm.js"
    }
  }
  </script>
</head>

html

<script type="module">
  import { createApp, ref, computed } from "vue"
  import { createVuetify } from "vuetify"
  //... setup as usual
</script>

Using Vitepress

You can use Vuetify's components in your Vitepress static site.

After initializing your Vitepress project, add Vuetify to your dependencies

::: tabs

bash

pnpm i vuetify

bash

yarn add vuetify

bash

npm i vuetify

bash

bun add vuetify

:::

Then, in your .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import 'vuetify/styles'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { createVuetify } from 'vuetify'

const vuetify = createVuetify({ components, directives })

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    app.use(vuetify)
  },
}

Existing projects

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

::: tabs

bash

pnpm i vuetify

bash

yarn add vuetify

bash

npm i vuetify

bash

bun add vuetify

:::

::: tip

If you are upgrading from an earlier version of Vuetify, make sure to check out our Upgrade Guide

:::

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

import { createApp } from 'vue'

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

// Components
import App from './App.vue'

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.

Fonts

Vuetify uses Roboto as its default font. To ensure your project renders correctly, you need to add the Roboto font yourself. We recommend using @fontsource/roboto or bundling with unplugin-fonts which is the default used in vuetify-create installations.

Option A — Install via @fontsource/roboto

::: tabs

bash

pnpm i @fontsource/roboto

bash

yarn add @fontsource/roboto

bash

npm i @fontsource/roboto

bash

bun add @fontsource/roboto

:::

Then import the styles you need in your main.ts or main.js:

import '@fontsource/roboto/100.css'
import '@fontsource/roboto/300.css'
import '@fontsource/roboto/400.css'
import '@fontsource/roboto/500.css'
import '@fontsource/roboto/700.css'
import '@fontsource/roboto/900.css'

/* optional italic styles */
import '@fontsource/roboto/100-italic.css'
import '@fontsource/roboto/300-italic.css'
import '@fontsource/roboto/400-italic.css'
import '@fontsource/roboto/500-italic.css'
import '@fontsource/roboto/700-italic.css'
import '@fontsource/roboto/900-italic.css'

Option B — Install via unplugin-fonts + @fontsource (recommended)

::: tabs

bash

pnpm i --save-dev unplugin-fonts
pnpm i @fontsource/roboto

bash

yarn add --save-dev unplugin-fonts
yarn add @fontsource/roboto

bash

npm i --save-dev unplugin-fonts
npm i @fontsource/roboto

bash

bun add --save-dev unplugin-fonts
bun add @fontsource/roboto

:::

Update your vite.config.ts:

import { defineConfig } from 'vite'
import ViteFonts from 'unplugin-fonts/vite'

export default defineConfig({
  plugins: [
    ViteFonts({
      fontsource: {
        families: [
          {
            name: 'Roboto',
            weights: [100, 300, 400, 500, 700, 900],
            styles: ['normal', 'italic'],
          },
        ],
      },
    }),
  ],
})

And import the generated CSS once in your main.ts or main.js:

import 'unfonts.css'

SSR caveats

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.

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

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

Exposed exports

The following export paths exist for the Vuetify framework:

JS / TS

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

diff

 "devDependencies": {
-  "vuetify": "^3.3.0"
+  "vuetify": "npm:@vuetify/[email protected]"
 }

Questions

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