【NuxtUI-Nuxt/Tailwindcss】注意点-NuxtUIのオートインストールが引き起こすエラー

NuxtUIのオートインストールが引き起こすエラー

下記をモジュールをインストールした後に@nuxt/uiをインストールするとエラーになります。

• @nuxt/icon
• @nuxtjs/tailwindcss
• @nuxtjs/color-mode

対象者

・Nuxt UIを使用したい方

NuxtUIのオートインストール

NuxtUIをインストールすることで下記の3つのモジュールがオートインストールされます。

そのため、nuxt.config.tsファイルで下記のような指定をすると、エラーが出ます。

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    "@nuxtjs/tailwindcss",
    "@nuxt/ui"
  ]
})

エラー

 ERROR  Pre-transform error: Failed to resolve import "#tailwind-config/theme/colors" from "node_modules/@nuxt/ui/dist/runtime/plugins/colors.js?v=24211689". Does the file exist?

解決策

  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: [
    "@nuxt/ui"
  ]
})

まとめ

今回はNuxtUIのオートインストールが引き起こすエラーについて解説しました。今後もフロント領域について発信していきます。