Nuxt 3 + Vuetify 3[Question]:

[Dinuz]

What is your question?

First thing thank you for the css-grid tip:)

Do you have idea how implement it into the nux3 + vuetify 3 combo? Nuxt 3 uses vite by default, so your technique doesn't really work properly.

Do you have time to discuss?

[github-actions[bot]]

Message that will be displayed on users' first issue

[Dinuz]

@andrejsharapov Guess what? I got you a solution:))

The built remains more or less the same, but few modifications must be done in order for it to properly work in the new environment.

(1) I transformed the style in scss from sass (I like it more, and I do have everything else in scss so I wanted to avoid syntattic conflicts).

the new file will be _vuetify_css_grid.scss and it is stored in a folder extends.

(2) I use directly the vuetify variable that I can overwrite for the grid-breakpoints, and import it in the new css grid file.

I build everything in the final settings.scss and I use this specific file in the nuxt.config.ts I am using vite, so it will be included in the following way:

vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use './assets/styles/settings.scss' as *;`,
        },
      },
    },
  },
hooks: {
    'vite:extendConfig': (config) => {
      config.plugins?.push(
        vuetify({
          autoImport: true,
          styles: { configFile: 'assets/styles/settings.scss' },
        })
      )
    },
  },

This is the clean way to let vuetify works properly in Nuxt 3. The vite scss is used to share the variables in the components (so I can access them directly in the