shadcn/uiのNuxt用があることを知り狂喜乱舞した後に書いた記事 #TypeScript

viviONグループでは、DLsiteやcomipoなど、二次元コンテンツを世の中に届けるためのサービスを運営しています。
ともに働く仲間を募集していますので、興味のある方はこちらまで。

概要

みなさんはshadcn/uiというUIコンポーネントライブラリを知っていますか？

個人的に色々UIライブラリを見て回るのが好きなのですが、去年こちらのshadcn/uiが少し話題に挙がっていました。

後から知ったのですが、JSライジングスター2023のReactエコシステム部門で一位になっていたらしい

当時はそのことを知らず、なんとなく公式サイトを見て

「めっちゃおしゃれやんけ！！！！！！！！しかもTailwindサポートだから全然実務での採用も検討できるじゃん、ちょっと試してみよ」

とウキウキしていたら

Nuxtが....ない....（遺言）

ここで記事は途切れているようだ。

Nuxt用が！！！！！ある！！！！！！！！

...となるはずだったのですが、先日インターネットの海を目的もなく漂っているとshadcn-vueという文字が目に飛び込んできました。

公式サイトを見てみると....

Nuxtがいる！！！！！！

念のため記載しておくと、こちらは有志による非公式のライブラリです。
shadcn/ui作者から許諾を得て開発されたとのことです。

ということで試していきます。

検証環境

nuxt v3.11.2
vue v3.4.21
tailwindcss v3.4.3

導入手順

冒頭でUIコンポーネントライブラリと紹介しましたが、shadcn/uiの考えである「実装とスタイルは分けるべき（互いに依存してはいけない）」を実現するため、実はコンポーネント自体はnpmパッケージ化されていません。

Why copy/paste and not packaged as a dependency?

The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.

Start with some sensible defaults, then customize the components to your needs.

One of the drawback of packaging the components in an npm package is that the style is coupled with the implementation. The design of your components should be separate from their implementation.

代わりに専用のCLIを導入し、そこからコマンドで指定したコンポーネントのコードをプロジェクト内に追加する形をとっています。もちろんshadcn-vueも同様の形になります。

今回はNuxtで検証するため、Nuxt用の導入手順に倣って進めていきます。

必要なモジュールの追加

今回すでにtailwindcss, typescriptが導入済みのNuxtプロジェクトで検証を行っているので、モジュールの追加から行います。

Nuxt3の場合デフォルトでTypeScriptをサポートしてくれていますが、shadcn-vueを使う際は依存関係にtypescriptが含まれている必要があります。
devDependenciesにtypescriptが含まれていることを確認してください。

$ npx nuxi@latest module add @nuxtjs/tailwindcss

その後CLIモジュールを追加します

$ npx nuxi@latest module add shadcn-nuxt

CLIモジュールが追加できたら、nuxt.config.tsにshadcnの設定を追記します。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', 'shadcn-nuxt'],
  shadcn: {
    prefix: '', // 追加したコンポーネントに付与するプレフィックス
    componentDir: './components/shadcn' // デフォルトは'./components/ui'
  }
})

※ここで型エラーが出る方は一度vscodeを再起動するかnpm run devなどを実行すると解消されるかもしれません

CLIのセットアップ

ここまでで無事CLIモジュールが追加できたので、用意されてるinitコマンドでセットアップします。

$ npx shadcn-vue@latest init

Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate / Gray / Zinc / Neutral / Stone
Where is your tsconfig.json or jsconfig.json file? › ./tsconfig.json
Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Write configuration to components.json. Proceed? > Y/n

カラーはtailwindのカスタムカラーのうち、暗色系の5つが選べるみたいです 🥰
今回は以下のように設定しました。

設定例