Nuxt•2y 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

LeanOP•2y 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•2y 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'],
  },
...

LeanOP•2y ago

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

LeanOP•2y ago

...

dmarr•2y ago

sorry vitest.config.ts

LeanOP•2y 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•2y ago

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

LeanOP•2y 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•2y 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>

LeanOP•2y ago

Oh, no.. Thanks Will try that

dmarr•2y ago

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

LeanOP•2y ago

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

dmarr•2y ago

you could put it above the nuxt page see above

warflash•2y ago

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

dmarr•2y ago

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

LeanOP•2y 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•2y ago

useAsyncData/useFetch

LeanOP•2y ago

Just that ?

warflash•2y ago

sure

LeanOP•2y ago

Time to look at tutorials ig

Unknown User•2y ago

Message Not Public

dmarr•2y ago

the nuxt 3 docs don't mention vuetify @Mufc0726

Unknown User•2y ago

Message Not Public

LeanOP•2y ago

Thats a module

Unknown User•2y ago

Message Not Public

Gaming

Programming

Adding Vuetify 3 to a Nuxt 3 project