Integrating Vuetify 3 with Vue 3 and TypeScript

This guide provides a straightforward method to add Vuetify 3 to a Vue 3 application with TypeScript, utilizing the Composition API and <script setup>. It includes optional configurations for icons using Material Design Icons (MDI) and Iconify.

Prerequisites

Ensure you have the following installed:

• Node.js: Version 14.18+, 16+, or 18+.
• npm or yarn: For managing dependencies.
• Vite: For creating and building Vue projects.

Project Setup

1. Create a New Vue 3 Project

Use Vite to scaffold a new Vue 3 project with TypeScript support.

npm

# Using npm
npm create vite@latest my-vue-app -- --template vue-ts

# Navigate to the project directory
cd my-vue-app

# Install dependencies
npm install

yarn

# Using yarn
yarn create vite my-vue-app --template vue-ts

# Navigate to the project directory
cd my-vue-app

# Install dependencies
yarn install

Installing Vuetify and Dependencies

1. Install Vuetify 3 and Required Plugins

Install Vuetify 3 and the necessary plugins.

npm

npm install vuetify@3 vite-plugin-vuetify @mdi/font @vitejs/plugin-vue

yarn

yarn add vuetify@3 vite-plugin-vuetify @mdi/font @vitejs/plugin-vue

• vuetify@3: The Vuetify 3 library.
• vite-plugin-vuetify: Integrates Vuetify with Vite.
• @mdi/font: Material Design Icons font.
• @vitejs/plugin-vue: Vite plugin for Vue support.

Configuring Vuetify

1. Update vite.config.ts

Integrate the Vuetify plugin into Vite.

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vuetify from "vite-plugin-vuetify";

export default defineConfig({
  plugins: [
    vue(),
    vuetify({ autoImport: true }), // Enable auto-import
  ],
});

2. Create a Vuetify Plugin

Create a vuetify.ts file to configure Vuetify, including component registration and icon setup.

src/plugins/vuetify.ts

import "@mdi/font/css/materialdesignicons.css"; // Import MDI icons
import "vuetify/styles"; // Import Vuetify styles

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as labsComponents from "vuetify/labs/components";

export default createVuetify({
  components: {
    ...components,
    ...labsComponents,
  },
  theme: {
    defaultTheme: "light",
  },
});

3. Update main.ts

Integrate Vuetify into your Vue application.

src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import vuetify from "./plugins/vuetify"; // Import Vuetify

createApp(App)
  .use(vuetify) // Use Vuetify
  .mount("#app");

Using Vuetify Components

Now you can use Vuetify components in your Vue components.

Example Component with <script setup>

src/components/HelloVuetify.vue

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-card class="ma-5 pa-3">
          <v-card-title>Welcome to Vuetify 3 with Vue 3</v-card-title>
          <v-card-text>
            This is an example of integrating Vuetify into a Vue 3 app using
            TypeScript and the Composition API.
          </v-card-text>
          <v-card-actions>
            <v-btn color="primary" @click="showAlert">
              <v-icon left>mdi-thumb-up</v-icon>
              Click Me
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-container>
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
function showAlert() {
  alert("Button clicked!");
}
</script>

<style scoped>
/* Component-specific styles */
</style>

Update App.vue

Include the new component in your main application.

src/App.vue

<template>
  <HelloVuetify />
</template>

<script setup lang="ts">
import HelloVuetify from "./components/HelloVuetify.vue";
</script>

<style>
/* Global styles if needed */
</style>

Additional Configuration

Using Iconify for More Icons

To use Iconify icons in your project, install the @iconify/vue package.

npm

npm install @iconify/vue

yarn

yarn add @iconify/vue

Update vuetify.ts for Iconify

src/plugins/vuetify.ts

import "@mdi/font/css/materialdesignicons.css";
import "vuetify/styles";

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as labsComponents from "vuetify/labs/components";
import { aliases, mdi } from "vuetify/iconsets/mdi";
import { IconifyIcon } from "@iconify/vue";
import { fa } from "vuetify/iconsets/fa-svg"; // Example for FontAwesome

export default createVuetify({
  components: {
    ...components,
    ...labsComponents,
  },
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
      fa,
      iconify: {
        component: (props) => h(IconifyIcon, { icon: props.icon }),
      },
    },
  },
  theme: {
    defaultTheme: "light",
  },
});

Usage in Components

<v-icon icon="mdi-home" />
<v-icon icon="fa:fa-solid fa-user" />
<v-icon icon="iconify:logos:vue" />

Customizing the Theme

You can customize the Vuetify theme in vuetify.ts.

src/plugins/vuetify.ts

export default createVuetify({
  // ... other configurations
  theme: {
    defaultTheme: "customLightTheme",
    themes: {
      customLightTheme: {
        dark: false,
        colors: {
          primary: "#1E88E5",
          secondary: "#424242",
          accent: "#82B1FF",
          error: "#FF5252",
          info: "#2196F3",
          success: "#4CAF50",
          warning: "#FB8C00",
        },
      },
    },
  },
});

Global Styles

Vuetify's styles are already imported via import 'vuetify/styles' in vuetify.ts.

For additional global styles, create a CSS file and import it in main.ts.

src/main.ts

import { createApp } from "vue";
import App from "./App.vue";
import "./styles/global.css"; // Import global styles
import vuetify from "./plugins/vuetify";

createApp(App).use(vuetify).mount("#app");

Troubleshooting

Vuetify Components Not Styled Correctly

• Ensure import 'vuetify/styles' is present in vuetify.ts.
• Check that vite-plugin-vuetify is correctly configured in vite.config.ts.
• Restart your development server after installing new dependencies.

TypeScript Errors

• Ensure your tsconfig.json includes Vuetify types.

  tsconfig.json

  {
    "compilerOptions": {
      // ... other options
      "types": ["vuetify"]
    }
  }

• Vuetify 3 includes TypeScript types, so no additional type installations are needed.

Sass Errors

• Vuetify 3 uses CSS variables and does not require Sass by default.
• If you encounter Sass-related errors, ensure that your project can process .scss files or remove Sass dependencies.

Conclusion

By following this updated guide, you have integrated Vuetify 3 into your Vue 3 application with TypeScript, the Composition API, and <script setup>. You're now ready to build feature-rich applications using Vuetify's extensive component library.

For more information, refer to the official Vuetify documentation.

References

• Vuetify 3 - Installation
• Vue 3 Documentation
• Vite Documentation
• Iconify for Vue