How to Install Vuetify 3 in Vue 3

In this tutorial, I’ll show you how to install Vuetify 3 in Vue 3. Vuetify 3 is the recently released stable version, offering a Material Component Framework for Vue.

Install Vuetify 3 in Vue 3

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

yarn create vuetify

Now select your project requirement.

success Installed "create-vuetify@1.0.3" with binaries:
   - create-vuetify

Vuetify.js - Material Component Framework for Vue

✔ Project name: … vuetify3
✔ Use TypeScript? … No / Yes
? Would you like to install dependencies with yarn, npm, or pnpm? › - Use arrow-keys. Return to submit.
❯  yarn
  npm
  pnpm
  none

Move to project directory and run the project.

cd vuetify3
yarn dev

src/App.vue

Vue

<template>
  <v-app>
    <v-main>
      <HelloWorld />
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
  import HelloWorld from '@/components/HelloWorld.vue'
</script>

Install Manual Vuetify 3 in Vue 3 with Vite

Install vue 3 with vite.

With NPM:

npm create vite@latest

With Yarn:

yarn create vite

With PNPM:

pnpm create vite

Now, please provide a project name and select the Vue.js framework.

✔ Project name: … yarn create vite
✔ Package name: … vuetify3
? Select a framework: › - Use arrow-keys. Return to submit.
  Vanilla
❯  Vue
  React
  Preact
  Lit
  Svelte
  Others

Select Typescript.

? Select a variant: › - Use arrow-keys. Return to submit.
  JavaScript
❯  TypeScript
  Customize with create-vue ↗
  Nuxt ↗

Move to project directory.

cd vuetify3
yarn
yarn dev

Install vuetify via yarn.

yarn add vuetify@^3.0.0

To add Vuetify components and directives to your Vue.js project, you can do so in the main.ts or main.js file.

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';

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')

src/App.vue

Vue

<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from "./components/HelloWorld.vue";
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <div>
    <v-btn> Button </v-btn>
    <v-btn variant="tonal"> Button </v-btn>
    <v-btn variant="flat"> Normal </v-btn>

    <v-btn variant="flat" color="secondary"> Secondary </v-btn>

    <v-btn variant="flat" color="error"> Error </v-btn>

  </div>
  <HelloWorld msg="Vite + Vue + Vuetify" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>