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
<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
<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>
Javed sheikh
Hello there! I’m Javed Sheikh, a frontend developer with a passion for crafting seamless user experiences. With expertise in JavaScript frameworks like Vue.js, Svelte, and React, I bring creativity and innovation to every project I undertake. From building dynamic web applications to optimizing user interfaces,