how to install vuetify 3 in vue 3

How to Install Vuetify 3 in Vue 3


In this tutorial, I will show you how to install vuetifyjs 3 in vue 3. Vuetify 3 stable version recently release Vuetify is 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 "[email protected]" 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

Move to project directory and run the project

cd vuetify3
yarn dev


      <HelloWorld />

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

install vuetify 3 in vue 3

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 give project name select vuejs framework.

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

Select Typescript.

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

Move to project directory.

cd vuetify3
yarn dev

Install vuetify via yarn

yarn add vuetify@^3.0.0

Add vuetify components, directives main.ts or main.js


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({



<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out
import HelloWorld from "./components/HelloWorld.vue";

    <a href="" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    <a href="" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    <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>

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

<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);
install vite vue 3 vuetify

install vite vue 3 vuetify