Nuxt•2y ago

How to auto import vuetify components in nuxt 3 ?

Hello, I'm trying to add auto import for vuetify components in my nuxt 3 project, however, I can't find a working solution. I've tried to add a modules/vuetify.ts file to my project with the following content :

import { resolve } from 'node:path'
import { readdir } from 'node:fs/promises'
import { addComponent, defineNuxtModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-module-vuetify',
  },
  async setup(_opts, _nuxt) {
    const componentPath = resolve(__dirname, '../../node_modules/vuetify/lib/components')
    const files = await readdir(componentPath, { withFileTypes: true })

    const componentsNames = files.filter(f => f.isDirectory()).filter(f => f.name.startsWith('V')).map(f => f.name)

    for (const name of componentsNames) {
      addComponent({
        name,
        export: name,
        filePath: `vuetify/components/${name}`,
      })
    }
  },
})

import { resolve } from 'node:path'
import { readdir } from 'node:fs/promises'
import { addComponent, defineNuxtModule } from 'nuxt/kit'

export default defineNuxtModule({
  meta: {
    name: 'nuxt-module-vuetify',
  },
  async setup(_opts, _nuxt) {
    const componentPath = resolve(__dirname, '../../node_modules/vuetify/lib/components')
    const files = await readdir(componentPath, { withFileTypes: true })

    const componentsNames = files.filter(f => f.isDirectory()).filter(f => f.name.startsWith('V')).map(f => f.name)

    for (const name of componentsNames) {
      addComponent({
        name,
        export: name,
        filePath: `vuetify/components/${name}`,
      })
    }
  },
})

It works well, however, on the server I get the following error :

[nuxt] [request error] [unhandled] [500] Unknown file extension ".css" for /home/leoc/Projects/eliah/website/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vuetify/lib/components/VApp/VApp.css                 21:30:35
  at new NodeError (node:internal/errors:387:5)
  at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
  at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
  at defaultLoad (node:internal/modules/esm/load:81:20)
  at nextLoad (node:internal/modules/esm/loader:165:28)
  at ESMLoader.load (node:internal/modules/esm/loader:608:26)
  at ESMLoader.moduleProvider (node:internal/modules/esm/loader:464:22)
  at new ModuleJob (node:internal/modules/esm/module_job:63:26)
  at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:483:17)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:441:34)

[nuxt] [request error] [unhandled] [500] Unknown file extension ".css" for /home/leoc/Projects/eliah/website/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vuetify/lib/components/VApp/VApp.css                 21:30:35
  at new NodeError (node:internal/errors:387:5)
  at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
  at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
  at defaultLoad (node:internal/modules/esm/load:81:20)
  at nextLoad (node:internal/modules/esm/loader:165:28)
  at ESMLoader.load (node:internal/modules/esm/loader:608:26)
  at ESMLoader.moduleProvider (node:internal/modules/esm/loader:464:22)
  at new ModuleJob (node:internal/modules/esm/module_job:63:26)
  at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:483:17)
  at ESMLoader.getModuleJob (node:internal/modules/esm/loader:441:34)

Does anyone got this to work ? Thanks

1 Reply

sigveh•2y ago

Try checking the file extension when filtering the files 😊 You can also read the docs here, in the Nuxt tab: https://vuetifyjs.com/en/features/treeshaking/

Gaming

Programming

How to auto import vuetify components in nuxt 3 ?