[覚書] Nuxt4用のshadcnの設定

Nuxt4でディレクトリ構造に変更があるのでそれに合わせた設定ファイルを作成したのでメモしておきます。

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },

  future: {
    compatibilityVersion: 4,
  },

  modules: ["@nuxtjs/tailwindcss", "shadcn-nuxt"],

  shadcn: {
    prefix: '',
    componentDir: './app/components/ui' // デフォルトから変更
  }
})

app配下にcomponentsディレクトリが移動になりました。

components.json

{
  "$schema": "https://shadcn-vue.com/schema.json",
  "style": "default",
  "typescript": true,
  "tsConfigPath": ".nuxt/tsconfig.json",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "app/assets/css/tailwind.css",
    "baseColor": "gray",
    "cssVariables": true
  },
  "framework": "nuxt",
  "aliases": {
    "components": "@/components",
    "utils": "@/utils/cn"
  }
}

aliases.componentsを@/components/uiから@/componentsに変更しています。

utilsはNuxtのutilsディレクトリからのオートインポートに含めてしまいたいのでデフォルトから変更していますがNuxt3から僕はこの設定を使っています。お好みでどうぞ。