Skip to main content

​
Quick start

This guide will walk you through creating a simple Vuetify application from scratch.

​
Basic setup

1

Create your Vuetify instance

The createVuetify function is the entry point for configuring Vuetify. Here’s a basic example:
main.ts
import { createApp } from 'vue'
import { createVuetify } from 'vuetify'
import 'vuetify/styles'
import App from './App.vue'

const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
  },
})

const app = createApp(App)
app.use(vuetify)
app.mount('#app')
The createVuetify function accepts options for configuring themes, icons, locale, and more.
2

Use Vuetify components

Now you can use any Vuetify component in your application:
App.vue
<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row>
          <v-col cols="12">
            <h1>Welcome to Vuetify</h1>
          </v-col>
        </v-row>

        <v-row>
          <v-col cols="12" md="6">
            <v-card>
              <v-card-title>Getting Started</v-card-title>
              <v-card-text>
                Vuetify components are easy to use and highly customizable.
              </v-card-text>
              <v-card-actions>
                <v-btn color="primary">Learn More</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>
Every Vuetify application should be wrapped in a v-app component, which provides the layout framework.

​
Configuration options

The createVuetify function accepts various configuration options:

​
Theme configuration

Customize your application’s color palette: 
const vuetify = createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#1867c0',
          secondary: '#5CBBF6',
        },
      },
      dark: {
        colors: {
          primary: '#2196F3',
          secondary: '#424242',
        },
      },
    },
  },
})

​
Component defaults

Set default props for all instances of a component: 
const vuetify = createVuetify({
  defaults: {
    VBtn: {
      color: 'primary',
      variant: 'outlined',
    },
    VCard: {
      elevation: 2,
    },
  },
})

​
Icons configuration

Vuetify supports multiple icon sets: 
import { aliases, mdi } from 'vuetify/iconsets/mdi'

const vuetify = createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

​
Locale and internationalization

Configure language support: 
import { en, sv } from 'vuetify/locale'

const vuetify = createVuetify({
  locale: {
    locale: 'en',
    messages: { en, sv },
  },
})

​
Using individual components

For optimal tree-shaking, import only the components you need: 
import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'
import { VCard } from 'vuetify/components/VCard'

const vuetify = createVuetify({
  components: {
    VBtn,
    VCard,
  },
})
Alternatively, use the Vite or Webpack plugin for automatic imports.

​
Component aliases

Create custom component aliases with pre-configured props: 
import { VBtn } from 'vuetify/components/VBtn'

const vuetify = createVuetify({
  aliases: {
    PrimaryBtn: VBtn,
  },
  defaults: {
    PrimaryBtn: {
      color: 'primary',
      variant: 'outlined',
      class: 'text-none',
    },
  },
})
Now use <v-primary-btn> in your templates with these defaults applied.

​
Interactive example

Here’s a complete working example with theme switching: 
<template>
  <v-app>
    <v-app-bar color="primary">
      <v-app-bar-title>My Vuetify App</v-app-bar-title>
      <v-spacer></v-spacer>
      <v-btn icon @click="toggleTheme">
        <v-icon>mdi-theme-light-dark</v-icon>
      </v-btn>
    </v-app-bar>

    <v-main>
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-card>
              <v-card-title>Welcome to Vuetify</v-card-title>
              <v-card-text>
                Click the icon above to toggle between light and dark themes.
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup>
import { useTheme } from 'vuetify'

const theme = useTheme()

function toggleTheme() {
  theme.global.name.value = theme.global.current.value.dark ? 'light' : 'dark'
}
</script>

​
Next steps

Now that you have a working Vuetify application:

Build docs developers (and LLMs) love

Get started for freeTalk to us