Nuxt•16mo ago

Adding Vuetify 3 to a Nuxt 3 project

I am trying to add Vuetify 3 to my project using this guide Guide, but on the Configure Nuxt 3 to use our new plugin and Integrate Vuetify's mdi icons step its failing with this. How should i resolve it ? I looked at the nuxt 3 config page and it seems to have a "css item", so ive got no idea

25 Replies

Lean•16mo ago

This is my entire nuxt.config.ts now

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  css: [
    '@mdi/font/css/materialdesignicons.min.css',
    'vuetify/lib/styles/main.sass'
  ],
  devtools: { enabled: true },
  modules: [
    "@nuxtjs/color-mode",
    "@formkit/nuxt",
    "dayjs-nuxt",
    "@sidebase/nuxt-auth",
  ],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({
  css: [
    '@mdi/font/css/materialdesignicons.min.css',
    'vuetify/lib/styles/main.sass'
  ],
  devtools: { enabled: true },
  modules: [
    "@nuxtjs/color-mode",
    "@formkit/nuxt",
    "dayjs-nuxt",
    "@sidebase/nuxt-auth",
  ],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

dmarr•16mo ago

I don't know how trustworthy that blog post is. I have seen a few people try the transpile method but it's never mentioned in the vuetify docs so I wouldn't recommend it. My formula has been to copy the code from here: https://vuetifyjs.com/en/getting-started/installation/#manual-steps into a ~/plugins/vuetify.ts file. you would need to adjust it (added labs in this example):

import "@mdi/font/css/materialdesignicons.css";
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as labs from 'vuetify/labs/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  ssr: true,
  components: {
    ...components,
    ...labs,
  },
  directives,
})

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.use(vuetify);
})

import "@mdi/font/css/materialdesignicons.css";
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as labs from 'vuetify/labs/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  ssr: true,
  components: {
    ...components,
    ...labs,
  },
  directives,
})

export default defineNuxtPlugin(({ vueApp }) => {
  vueApp.use(vuetify);
})

since you're using ssr, you need to also: 1. add ssr: true to the createVuetify call above. 2. add to nuxt config:

vite: { ssr: { noExternal: ['vuetify'] }}

vite: { ssr: { noExternal: ['vuetify'] }}

for your vitest.config.ts file, you will also need:

test: {
  deps: {
    inline: ['vuetify'],
  },
...

test: {
  deps: {
    inline: ['vuetify'],
  },
...

Lean•16mo ago

vitests.config.ts ? I aint got that from what i can tell, should i create that ?

Lean•16mo ago

...

dmarr•16mo ago

sorry vitest.config.ts

Lean•16mo ago

The same with vitest Despite all the errors, it seems to work lol At least the default nav drawer is showing up as its supposed to

dmarr•16mo ago

you can ignore if you aren't using vitest can't find vuetify module? not sure about that

Lean•16mo ago

yeah idk, i just changed the extension to .js and continuted. Everything works now, even tho the layouts are kind of weird. I put the navigation bar in a default.vue layout, defined that as a layout for my index page and the text on that page is going "below" the layout That didnt happen on Nuxt 2

dmarr•16mo ago

did you wrap with <v-app><v-main /></v-app>? for example your app.vue could look like:

<template>
<v-app>
  <v-main>
    <v-container fluid>
      <TheNav />
      <NuxtPage />
    </v-container>
  </v-main>
</v-app>
</template>

<template>
<v-app>
  <v-main>
    <v-container fluid>
      <TheNav />
      <NuxtPage />
    </v-container>
  </v-main>
</v-app>
</template>

Lean•16mo ago

Oh, no.. Thanks Will try that

dmarr•16mo ago

you wouldnt need layouts if you did that. it would just read the pages/* files

Lean•16mo ago

Yea but wouldnt that mean i will have to "include" the navbar in every page seperately ? Feels kind of non-practical

dmarr•16mo ago

you could put it above the nuxt page see above

warflash•16mo ago

You could also wrap the nuxtpage on the the app.vue with nuxt layout and put your things there, right?

dmarr•16mo ago

yes you could use nuxtlayout, and in the layout itself use <slot /> instead of nuxtpage

Lean•16mo ago

Another thing i havent quite grasped yet is, in Nuxt 2 for example, id grab my data in the mounted or created methods(?), how do i do it before the actual page load in Nuxt 3 ? Previously i was grabbing the data from my express api, but im guessing theres no need to create a seperate API in this case is there ? i can just use the built in server

warflash•16mo ago

useAsyncData/useFetch

Lean•16mo ago

Just that ?

warflash•16mo ago

sure

Lean•16mo ago

Time to look at tutorials ig

Unknown User•16mo ago

Message Not Public

dmarr•16mo ago

the nuxt 3 docs don't mention vuetify @Mufc0726

Unknown User•16mo ago

Message Not Public

Lean•16mo ago

Thats a module

Unknown User•16mo ago

Message Not Public

Gaming

Programming

Adding Vuetify 3 to a Nuxt 3 project