[Bug Report][3.3.21] Integration with Nuxt 3 results in Unknown file extension ".css" error

[Sascha-Block]

Environment

Vuetify Version: 3.3.21
Vue Version: 3.3.4
Browsers: Chrome 117.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Hello Vuetify team,

I am attempting to integrate Vuetify with a fresh installation of Nuxt 3, but I encounter an error related to the CSS file imports.

Environment:

Vuetify version: [Bitte geben Sie die verwendete Version von Vuetify an]
Nuxt version: 3.x
Node.js version: [Bitte geben Sie die verwendete Node.js-Version an]
OS: [z.B. macOS, Windows, Linux, geben Sie Version und Distribution an, falls zutreffend]
Steps to Reproduce:

Create a fresh Nuxt 3 project.
Integrate Vuetify following the recommended setup.
Run the Nuxt development server.
Expected Behavior:
Vuetify should integrate seamlessly with Nuxt 3 without any errors and the development server should run as expected.

Actual Behavior:

Expected Behavior

Vuetify should integrate seamlessly with Nuxt 3 without any errors and the development server should run as expected.U

Actual Behavior

Upon starting the development server, I encounter the following error.
Unknown file extension ".css" for /Users/xxx/nuxt-project-name/node_modules/vuetify/lib/components/VApp/VApp.css

at __node_internal_captureLargerStackTrace (node:internal/errors:496:5)
at new NodeError (node:internal/errors:405:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:79:11)
at defaultGetFormat (node:internal/modules/esm/get_format:124:36)
at defaultLoad (node:internal/modules/esm/load:84:20)
at nextLoad (node:internal/modules/esm/loader:163:28)
at ESMLoader.load (node:internal/modules/esm/loader:603:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:22)
at new ModuleJob (node:internal/modules/esm/module_job:64:26)
at #createModuleJob (node:internal/modules/esm/loader:480:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:434:34)
at async ModuleWrap. (node:internal/modules/esm/module_job:79:21)

Reproduction Link

https://github.com/rock-the-prototype/nuxt3-project-name

Other comments

Followed by a stack trace indicating the error originates from Node's internal ES modules handling.

I haven't experienced this issue with other packages, so I suspect it might be something specific to Vuetify's integration with Nuxt 3.

Is this a known issue, or is there a recommended workaround? Any assistance would be greatly appreciated.

Thank you for your time and for the great work on Vuetify!

[MajesticPotatoe]

Nuxt support (even since v2) has been a community driven effort.
according to nuxt/nuxt#12215 you just need to add build: { transpile: ['vuetify'] } to your nuxt config. I have tested and confirmed this works with a clean install as outlined.

[Sascha-Block]

@MajesticPotatoe Great! Thank's that you've updated also the Vuetify Install Docu for Nuxt3, otherwise I would have done so. 👍

Thanks for the clarification and providing a solution. Just to further clarify for others who come across this thread:

Transpiling libraries like Vuetify into Nuxt can sometimes be necessary to ensure they work correctly with the Nuxt build process. Especially if the library uses ES6 code or other modern JavaScript features that cannot be run directly in all target environments.

By adding build: { transpile: ['vuetify'] } to nuxt.config.js (or .ts), you tell Nuxt to transpile the vuetify source code during the build process. This ensures that Vuetify's code will work correctly in the application Nuxt builds, regardless of the specific JavaScript environment or browsers you want to support.

This is especially important for those working in an environment where older browsers need to be supported, or when using special configurations or plugins that may have issues with modern JS code.

[Darkmift]

Hey everyone.

Had several deploys work great but after adding some inputs the deploy fails at the generate phase

I am unsure what to do here & would appreciate your help:

[6:34:29 PM]  ERROR  [nuxt] [request error] [unhandled] [500] Unknown file extension ".css" for C:\WORKSPACE\FORM_SHADAG\shadag-logistics-app\node_modules\.pnpm\vuetify@3.4.0_typescript@5.2.2_vite-plugin-vuetify@1.0.2_vue@3.3.8\node_modules\vuetify\lib\components\VCode\VCode.css
  at new NodeError (node:internal/errors:406:5)
  at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:99:9)
  at defaultGetFormat (node:internal/modules/esm/get_format:142:36)
  at defaultLoad (node:internal/modules/esm/load:120:20)
  at ModuleLoader.load (node:internal/modules/esm/loader:396:13)
  at ModuleLoader.moduleProvider 

// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';

export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
  },
  devtools: { enabled: true },
  build: {
    transpile: ['vuetify', 'vite-plugin-vuetify'],
  },
  modules: [
    // '@invictus.codes/nuxt-vuetify',
    '@nuxtjs/i18n',
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt',
    '@vee-validate/nuxt',
    (_options, nuxt) => {
      nuxt.hooks.hook('vite:extendConfig', (config) => {
        // @ts-expect-error
        config.plugins.push(vuetify({ autoImport: true }));
      });
    },
  ],

  i18n: {
    vueI18n: './plugins/i18n/i18n.config.ts',
    locales: ['en' /*, 'fr'*/], // used in URL path prefix
    defaultLocale: 'fr', // default locale of your project for Nuxt pages and routings
  },
  vite: {
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
/**/
  plugins: ['~/plugins/vee-validate.ts', '~/plugins/vuetify.ts'],
  css: ['~/assets/css/main.css'],
});