Setting up vue 3 with vuetify, icons and themes

Setting up vue 3 with vuetify, icons and themes In this article, I will guide you through the setup process to use Vuetify 3 with Vue 3! I will also show you the basic configurations you should need to know to get up and running in just a few minutes! So let's get started!
Categoriesvue3vuetify3project setup

How to create a vue3 project

Vue3 is the newest version of vue.js. It comes backed with vite, options and composition API, many improvements with DX. In short, an amazing base for your next Project!

If you think you should catch up a little on it, I could highly recommend the course:

Vue - The Complete Guide (incl. Router & Composition API) * by Maximilian Schwarzmüller. This is the course I learned vue with, and in my opinion the best course out there to learn vue. It is completely updated for vue3.

To make this article fit for all editor choices, I will use the CLI to create the project.

To set up your vue3 project run

npm init vue@latest

In Your desired folder, note that a folder with your project name will be created inside this folder!

You will be asked if you like to install the newest vue CLI if you do not have it already.

Install vue 3

Next, you will be guided through some steps to set up the project correctly.

vue 3 configuration with vuetify

I will briefly explain all the vue 3 installation steps to you.

✔ Project name: vue3vuetifytemplate // Your desired project name.

✔ Package name: … vue3vuetifytemplate // your desired package name

✔ Add TypeScript? … No / Yes // if you prefer using TypeScript, this decision is up to you, but I suggest you're using TypeScript. Once learned, you will get a massive productivity boost! Also, your code will be easier to read and understand

✔ Add JSX Support? … No / Yes

✔ Add Vue Router for Single Page Application development? … No / Yes // vue-router is the spa router package for vueJS, it makes it easy to add navigation to your SPA (single page application)

✔ Add Pinia for state management? … No / Yes // pinia is the vue3 state management library, like vuex was for vue 2, Pinia is simply amazing, you should add it!

✔ Add Vitest for Unit Testing? … No / Yes // just say yes, vitest is a superfast unit test runner based on vite.

If you wish to learn more about it, check out this article.

✔ Add an End-to-End Testing Solution? › Playwright // playwright is a Multiplatform e2e test runner by Microsoft. Cypress is also Ok, but we recently moved from cypress to playwright since it provides multi browser and platform support, auto waits, better state management and many more useful features.

✔ Add ESLint for code quality? … No / Yes // ESLint is an incredible tool to automatically analyze your code and ensure a good quality and use of best practices.

✔ Add Prettier for code formatting? … No / Yes // prettier auto formats your code so that it will be prettier and more readable to you and your colleagues.

Then run

cd vue3VuetifyTemplate
  npm install
  npm run lint
  npm run dev

To spin up the vite server and make your vue 3 app available on the prompted port.

The first big difference to vue 2 is that start up will take less than a minute, since vue 3 is vite powered.

You will now see the beautiful landing page of vue 3! Now it is time to set up vuetify 3.

vue 3 successful install

Using vuetify with vue 3

To install vuetify 3 in your vue 3 project, run:

npm install vuetify@next

This will give you the latest version of vuetify 3, by now 28. Dezember 2022 a normal install would still install vuetify 2.

In your main.ts paste the following code:

// set up vuetify with theme and icons
// Vuetify
import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";

const vuetify = createVuetify({


Amazing! Now run npm run dev again, and you will see the same as before.

To change that, let us create a basic vuetify component that will be displayed in our app.vue

This will also be an amazing vuetify example to get started.

In your components folder, create a new file. Called helloVuetify.vue.

We will make our lives simple and just use the twitter card from the vuetify docs.

Feel free to copy this code into your helloVuetify.vue file.

And to verify the Installation, we will add a simple card on top of our welcome screen.

    <script setup lang="ts">
        <template v-slot:prepend>
          <v-icon size="x-large"></v-icon>
        <v-card-text class="text-h5 py-2">
          "Turns out semicolon-less style is easier and safer in TS because most
          gotcha edge cases are type invalid as well."
          <v-list-item class="w-100">
            <template v-slot:prepend>
            <v-list-item-title>Evan You</v-list-item-title>
            <v-list-item-subtitle>Vue Creator</v-list-item-subtitle>
            <template v-slot:append>
              <div class="justify-self-end">
                <v-icon class="mr-1" icon="mdi-heart"></v-icon>
                <span class="subheading mr-2">256</span>
                <span class="mr-1">·</span>
                <v-icon class="mr-1" icon="mdi-share-variant"></v-icon>
                <span class="subheading">45</span>

Then call the component in your app.vue

<script setup lang="ts"> 
  …some imports 
  import HelloVuetify from "./components/helloVuetify.vue"; 
…some vue code in your template
<hello-vuetify />

When the installation was successful, you should see something like this:

vuetify icons not shown

The card we’ve created in our example is already displayed well, but the icons are missing.

This leads us to the next step. Configure vuetify 3.

How to configure Vuetify 3

The configuration process is very similar to my other guide on setting up vuetify3 with Nuxt 3. However, for the sake of completeness, I will also explain it in this article.

One thing I like about Vuetify is its clean global configuration.

This also works with Vuetify 3, the concepts are the same, but the syntax is slightly different since also the vue3 syntax has moved on.

How to change the global Theme in Vuetify 3

If you would like to set the dark theme as default, you can do this easily in the configuration.

Put this into `createVuetify({` to enable the dark theme as the default theme

    theme: {
        defaultTheme: 'dark'

Or you can also create your own custom themes.

Just adapt your vuetify creation in your main.ts like following:

    const myAllBlackTheme: ThemeDefinition = {
      dark: false,
      colors: {
        background: "#000000",
        surface: "#000000",
        primary: "#000000",
        "primary-darken-1": "#000000",
        secondary: "#000000",
        "secondary-darken-1": "#000000",
        error: "#000000",
        info: "#000000",
        success: "#000000",
        warning: "#000000",
    const vuetify = createVuetify({
      theme: {
        defaultTheme: "myAllBlackTheme",
        themes: {

How to add Icons in Vuetify 3

By default, you can choose the well-known fonts: Material Design Icons (mdi), Material Icons(mi), Font Awesome 4(fa4), and Font Awesome 5(fa5).

To add a font to vuetify simply import the wished font from the icon sets directory and introduce it to vuetify in the exports.

Vuetify Icons not shown, how to resolve

It could happen that your Icons will not appear after you added them.

I also had this issue when trying this out for the first time.

To fix Vuetify icon's not shown error, make sure to install the corresponding font and add its CSS to your plugin config.

I will show you how to do this based on using font awesome and mdi as a default icon font.

This also applies if you want to install custom fonts!

Install the fon`

    npm install @fortawesome/fontawesome-free -D
    npm install @mdi/font

In your main.ts import the specific CSS file`

    import "@mdi/font/css/materialdesignicons.css";
    import "@fortawesome/fontawesome-free/css/all.css";

Make sure you are using a CSS loader. `

    import "vuetify/styles";
    import { createVuetify, type ThemeDefinition } from "vuetify";
    import * as components from "vuetify/components";
    import * as directives from "vuetify/directives";
    import { fa } from "vuetify/iconsets/fa";
    import { aliases, mdi } from "vuetify/lib/iconsets/mdi";
    // make sure to also import the coresponding css
    import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
    import "@fortawesome/fontawesome-free/css/all.css"; // Ensure your project is capable of handling css files
    const vuetify = createVuetify({
      theme: {
        defaultTheme: "dark",
      icons: {
        defaultSet: "mdi",
        sets: {

In the above snippet, I use font-awesome as my default icon font and mdi as an additional font.

Back at our example, we will now see the twitter card as expected, with some beautiful icons.

The twitter card should look like this:

vuetify 3 after configuring the icons


If your Icons are not shown, first try a rebuild.

If the problem still persists, make sure you have installed the icon packages and set up your CSS loader correctly. These are the most common sources of errors.

The request url is outside of Vite serving allow list.

This happened to me after the first time trying to add mdi icons to my vuetify app.

After a rebuild everything worked fine since vite then successfully checked the source and added it to the allow list.

Solution: rebuild the project.


With vue 3 and Vuetify 3 there are finally coming two of my favorite parts of the vue2 ecosystem to vue3.

Vuetify 3 already ported most of the components from vuetify2 and its directives and grid systems. The long awaited Data Tables will follow soon with version 3.1.

You should definitely try it out!

If you want to keep up to date with the releases of vue 3 and Vuetify 3, I would suggest following their roadmaps.

If you need a domain for a budget, with my link you can register a .com domain starting at $6.98!

You can find the code for this article on my GitHub.

Happy coding,


Recommended Products for you
recommended for you