/how-to-use-vuetify-with-nuxt-3.html

[utterances-bot]

How to use Vuetify with Nuxt 3 | Cody Bontecou

Get Vuetify to work with Nuxt 3 with this quick tutorial.

https://codybontecou.com/how-to-use-vuetify-with-nuxt-3.html

[cindrmon]

Since Nuxt 3 got released today, I made a pull request updating from rc1 to stable: https://github.com/CodyBontecou/nuxt3-and-vuetify/pull/7

[tepafril]

Nuxt 3 + Vuetify 3 = Rapid Development :)

[Mattymoo007]

Hey Cody, thanks for the useful tut! I was wondering if you knew a way to manipulate the vuetify sass variables using this setup? 🙏

[Mattymoo007]

Also did you manage to get the theme configuration working? When I tried this the colors did not change according to my configuration. Cheers 🍻

// plugins/vuetify.ts

import { createVuetify, ThemeDefinition } from "vuetify";
import { VBtn, VApp } from "vuetify/components";

const theme: ThemeDefinition = {
  dark: false,
  colors: {
    primary: "#4093ff",
    secondary: "#4d4d4d",
    success: "#25c760",
    warning: "#ffc82e",
    error: "#ff4c29",
  },
};

export default defineNuxtPlugin((nuxtApp) => {
  const vuetify = createVuetify({
    theme: {
      themes: {
        theme,
      },
    },
    components: {
      VApp,
      VBtn,
    },
    ssr: true,
  });

  nuxtApp.vueApp.use(vuetify);
});

[mage1k99]

@Mattymoo007 refer this for updating your theme config

[letzfets]

How can I use use-display() inside a component with this configuration?

[Biancanfc]

For me works to override some sass variables css: [ 'vuetify/styles', '@mdi/font/css/materialdesignicons.min.css', ],

[g1ronn1mo]

How to get Nuxt3, Vuetify3 and Cypress or Storybook for component testing running? This would be an ideal setup. Either 2 of them go together well.

[begueradj]

I followed the steps you mentioned, and everything worked fine until I want to use <v-date-picker /> where I am getting this error:

[Vue warn]: Failed to resolve component: VDatepicker

How to fix this ? Thanks you, Billal Begueradj

[CodyBontecou]

Hey @begueradj, do you have a repo I can look at? Do any of the other Vuetify components work?

The v-date-picker component came out in Vuetify v3.3.4 so make sure your Vuetify package is up to date.

[begueradj]

@CodyBontecou Thank you. It is discussed here

[CodyBontecou]

Ah, wonderful!

[Reddohige]

Hi, I am having quite a few problems with vuetify 3, having said that I am also having the same problems with the repo marked above. Here is the warn code: WARN [nuxt] Cannot extract styles for ./VCode.css. Its styles will not be inlined when server-rendering.