[Bug]: moduleOptions.styles.configFile + treeshaking make component style not found in development browser console

[Slackluky]

Contact Details

No response

What happened?

Hi, i'm glad that someone made this module for vuetify in nuxt3, and i'm using it in my latest project right now. i love to combine vuetify components and windicss utility classes and i using it on my Vuejs projects and worked like charm!

but when i add configFile in vuetify config in nuxt.config.ts, no error in command console, but in my browser console i had this errors

and the drawer become to look like this

this is my nuxt-vuetify config

vuetify: { /* vuetify options */ vuetifyOptions: { // @TODO: list all vuetify options }, moduleOptions: { /* nuxt-vuetify module options */ treeshaking: true, styles: { configFile: "~/assets/settings.scss" } } }

i hope i can get a solution, thanks

Version

1.0.2 (Default)

What browsers are you seeing the problem on?

Microsoft Edge, Firefox, Chrome

Relevant log output

No response

Additional context

No response

[jvhellemondt]

Thanks for reporting this. Can you include your config file?

[jvhellemondt]

If I remember correctly, you need to add @use 'vuetify'; to your sass file if you're using a config file. Can't find it right now tho, so I'll check it out in the weekend if necessary.

[Slackluky]

Thanks for reporting this. Can you include your config file?

Thank you for cheking over my report, here's the content of my config file

@use 'vuetify' with (
  $utilities: false,
  $font-size-root: 13px,
  $body-font-family: "Manrope"
);

And i've a workaround for this issue by configuring moduleOptions.treeshaking to false, but i'd love to keep my bundle size tiny

[jvhellemondt]

I believe you are not exposing the styles (source here, definitely not sure though)

I will try the following config file asap:

// within your nuxt.config.ya

export default defineNuxtConfig({
  modules: [
    '@invictus.codes/nuxt-vuetify'
  ],
  vuetify: {
    moduleOptions: {
      treeshaking: true, 
      styles: { 
        configFile: "~/assets/settings.scss" 
      } 
    }
  },
  css: ['vuetify/styles'],
  ...
})

// within your .scss 

@use 'vuetify/settings' with (
  $utilities: false,
  $font-size-root: 13px,
  $body-font-family: "Manrope"
);

[BayBreezy]

For this issue, you might want to consider adding this nitro plugin as part of the module. This should only be applied if ssr == true.

/**
 * Special thanks to mhfeizi for this fix - > https://github.com/mhfeizi
 * https://github.com/nuxt/nuxt/issues/15412#issuecomment-1398110500
 */
export default defineNitroPlugin((nitroApp) => {
    nitroApp.hooks.hook("render:response", (response: any) => {
        response.body = response.body.replaceAll("/_nuxt/\0", "/_nuxt/");
    });
});

[Slackluky]

I believe you are not exposing the styles (source here, definitely not sure though)

I will try the following config file asap:

// within your nuxt.config.ya

export default defineNuxtConfig({
  modules: [
    '@invictus.codes/nuxt-vuetify'
  ],
  vuetify: {
    moduleOptions: {
      treeshaking: true, 
      styles: { 
        configFile: "~/assets/settings.scss" 
      } 
    }
  },
  css: ['vuetify/styles'],
  ...
})

// within your .scss 

@use 'vuetify/settings' with (
  $utilities: false,
  $font-size-root: 13px,
  $body-font-family: "Manrope"
);

this is the solution, i didn't know that i have to expose the vuetify styles (my bad). thank you for the solution. i will close this issue

[Slackluky]

i'm sorry for reopen this issue, however in development server i still getting errors in browser console, but all the component styles are loaded but worked with zero errors in production server

it's minor problem tho, but i have a bit kind of concern in DX.

[moranje]

What about if you point it at vuetify/lib/styles/main.sass? I'm not getting it too work either but with a different error: WARN Sourcemap for "plugin-vuetify:components/... .sass" points to missing source files.

import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
import {
  mdiClipboardTextOutline,
  mdiCogOutline,
} from '@mdi/js';

export default defineNuxtConfig({
  typescript: {
    shim: false,
  },

  // debug: true,
  // ssr: false,

  css: ['vuetify/lib/styles/main.sass', '@/assets/main.scss'],

  modules: [
    '@kevinmarrec/nuxt-pwa',
    '@nuxtjs/google-fonts',
    '@pinia/nuxt',
    '@pinia-orm/nuxt',
    'nuxt-vitest',
    '@invictus.codes/nuxt-vuetify',
  ],

  build: {
    transpile: ['vuetify'],
  },

  vite: {
    optimizeDeps: {
      needsInterop: [
        'monaco-editor/esm/vs/editor/standalone/browser/inspectTokens/inspectTokens.js',
      ],
    },
  },

  vuetify: {
    vuetifyOptions: {
      icons: {
        defaultSet: 'mdi',
        aliases: {
          ...aliases,
          pages: mdiClipboardTextOutline,
          settings: mdiCogOutline,
        },
        sets: {
          mdi,
        },
      },
    },

    moduleOptions: {
      /* nuxt-vuetify module options */
      treeshaking: true,
      useIconCDN: false,

      /* vite-plugin-vuetify options */
      styles: { configFile: './assets/variables.scss' },
      autoImport: true,
    },
  },

  googleFonts: {
    families: {
      Inter: [400, 700],
      'Fira+Code': [400, 700],
    },
  },
});

[jvhellemondt]

Thanks guys. I'll look into it asap!

[men232]

Hi guys, have the same issue, any updates?

[jvhellemondt]

I believe this is (temporarily) fixed if you disable ssr. Permanent fix still needed

[nonomaxxis]

Hi guys, have the same issue, any updates?