How to set up a project with nuxt3 and vuetify3 with themes and Icon Pacs

In this article, I will guide you through the setup process of brand new nuxt3 and vuetify3. I will also show you the basic configurations you should need to know.

So let's get started!

Categoriesvue3 nuxt3vuetify3project setup

Date

2022-07-19

Creating a Nuxt3 Project

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

Nuxt 3 is based on Vue3, if you are already familiar with vue3, great!

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 set up your nuxt project run

npx nuxi init nuxt-app

In Your desired folder.

You may need to install nuxi, the new nuxt CLI, just type y if you were asked.

Then the project will be set up, this step takes less than a second, and we are ready to go.

Next navigate into your nuxt-app directory, or move the content of this directory to your wished location. I move it to my root folder since I like to have the package root directly contained in my root folder.

Then run

npm install

As always, to initially load all the dependencies.

When everything is done, run

npm run dev

To spin up the vite server and make nuxt available on http://localhost:3000/.

The first big difference to nuxt 2 is that this will take less than a minute since nuxt 3 is vite powered.

You will now see the beautiful landing page of nuxt3.

Install Vuetify3 inside nuxt3

Vuetify3 is currently also in beta. To use it run:

npm install vuetify@next

This will install the latest beta version of vuetify from npm.

Then create a plugins directory if you haven't.

Inside this directory, create a file named vuetify.ts.

Paste the following code into it:

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        components,
        directives,
    })

    nuxtApp.vueApp.use(vuetify)
})

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    css: ['vuetify/lib/styles/main.css'],
    build: {
        transpile: ['vuetify'],
    },
})

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

<template>
  <div>
    <v-card
class="mx-auto"
width="400"
prepend-icon="mdi-home"
    >
      <templatev-slot:title>
        Hello from Vuetify!
      </template>
      <v-card-text>
        When you see this inside a card, it worked!
      </v-card-text>
    </v-card>
    <NuxtWelcome />
  </div>
</template>

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

Further configuration of Vuetify3

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

This also works with vuetify3, the concepts are the same, but the syntax is slightly different.

Change the global Theme in vuetify3

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:

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',
  }
}

export default createVuetify({
  theme: {
    defaultTheme: 'myAllBlackTheme',
    themes: {
      myAllBlackTheme,
    }
  }
})

Add Icon fonts to vuetify3

By default, you can choose the well-known fonts: Material Design Icons, Material Icons, Font Awesome 4, and Font Awesome 5.

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

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { mdi } from 'vuetify/iconsets/mdi'
import { aliases, fa } from 'vuetify/iconsets/fa'

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({ // Replaces new Vuetify(...)
        components,
        directives,
        theme: {
            defaultTheme: 'dark'
        },
        icons: {
            defaultSet: 'fa',
            aliases,
            sets: {
                mdi,
                fa
            }
        },
    })

    nuxtApp.vueApp.use(vuetify)
})

You can add multiple Icon Fonts in Vuetify3!

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

The current state of Vuetify3

By the time of writing this article July 19, 2022, vuetify supports most of the well-known features from vuetify2 + some fresh new stuff like windows and defaults.

Where defaults are looking really useful to me.

You can define default values like a default elevation globally and apply this to all elements wrapped into the <v-defaults-provider> tag. I think this could be a huge help to reach consistent designs.

To keep up to date with the vuetify3 releases, you can frequently take a look at their release page.

Conclusion

With nuxt3 and vuetify3, there are finally coming two of my favorite parts of the vue2 ecosystem to vue3.

Both nuxt3 and vuetify3 are complete rewrites, and they really did a good job at it.

Even tho vuetify3 is still in beta, they already ported most of the components from vuetify2 and its directives and grid systems. You should definitely try it out!

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

Happy coding,