こんにちは。kickflowエンジニアの芳賀と申します。
kickflowのフロントエンドはNuxtを利用しており、 Nuxt、および周辺のエコシステムまでふんだんに利活用し開発しております。
また、oxc の登場や rolldown の開発など、これからにも期待できますよね。

Nuxtは一通り触ってきたかな、と思っていた私ですが、Nuxt UI の存在がすっぽり抜けておりました。業務では別のUIライブラリを使用しているため、他のキャッチアップが疎かになっていたなと反省しております。

今回は、私のキャッチアップがてらNuxt UIについて調査しました。

Nuxt UIとは

Create beautiful, responsive & accessible web apps quickly with Vue or Nuxt. Nuxt UI is an open-source UI library of 50+ customizable components built with Tailwind CSS and Reka UI.

VueやNuxtを使って、美しくレスポンシブでアクセシブルなWebアプリケーションを素早く作成しましょう。Nuxt UIは、Tailwind CSSとReka UIで構築された50以上のカスタマイズ可能なコンポーネントからなるオープンソースのUIライブラリです。

基礎技術はVue、Nuxt、Tailwind、Reka UIから成るようです。
また、特長としては以下があるとのことです。

Tailwind CSS v4 でのスタイリング
Reka UI でアクセシビリティ担保
TypeScript での型セーフ

この中でReka UIというのを初めて聞きました。
RekaUIは「Vueでアクセシブルなアプリを作る」ことを掲げており、WAI-ARIAオーサリングプラクティスガイドラインに従い、幅広いモダンブラウザと一般的に使用されている支援技術でテストされているとのことです。
数年前は遠くにあったアクセシビリティが今では「標準」という形で提供されていることに良き時代の流れを感じております。
アクセシビリティがガッチリした Headless UI の一つ、という感じでしょうか。

まとめると、Reka UIで基本的なコンポーネントが定義されており、その上にTailwindでカスタマイズされることでNuxt UIが提供されている様子でした。
その他にも、Reka UI単体と比較し、以下の違いがあるようでした。

Reka UI を利用したより複雑なコンポーネント
@nuxt/fonts、@nuxt/icon、@nuxtjs/color-modeなどとの統合
デザインシステムの基底部分の定義（セマンティックカラーやデザイントークンなど）
i18n対応

なんとNuxt UI Proもある

ありました。
さらに豊富なコンポーネントの定義やレスポンシブなコンポーネントを提供している様子です。
お試しで利用する分には無料ですが、本番リリースする際はライセンスを購入し、ビルド時にライセンスキーを利用するとのことです。

実際に見てみる

Showcase があったので色々と見てみます。
Tailwindを使っているだけあり、多種多様なページが構築されていました。

また、Reka UIの実力がどんなものか数ページサンプリングしてLighthouseでアクセシビリティのスコアを計測してみました。

サイト名	アクセシビリティスコア	アクセシビリティの指摘
サイトA	92	- 背景と文字のコントラスト比 - Heading要素がリストとして利用されている
サイトB	87	- ボタンがアクセシブルな名前ではない - リンクに分かりやすい名前がない - 背景と文字のコントラスト
サイトC	96	- 背景と文字のコントラスト比

全体的に高スコアでした。
（ちなみにkickflowのスコアは80でした）

指摘内容を見ると開発者側で対応しなければならない点やおそらくブランディング的に変えづらい内容だったりするのがほとんどでした。
裏を返すとReka UI に裏打ちされた部分のアクセシビリティはかなり担保されていると言えます。

実際に触ってみる

ということで実際に触ってみました。
インストールは簡単で npm のインストールの中で ui を選択すれば完了です。

…なはずですが、実際に画面を作るにあたり、Nuxt UI Proのコンポーネントがないと実装できないケースがあったため、インストール後に以下ファイルを変更してNuxt UI Proに変更しました。

package.json

-  "@nuxt/ui": "3.1.0",
+  "@nuxt/ui-pro": "^3.1.0",

nuxt.config.ts

-  modules: [''@nuxt/ui']
+ modules: ['@nuxt/ui-pro']

assets/css/main.css

-  @import "@nuxt/ui"
+  @import "@nuxt/ui-pro"

ということで準備が整ったので、実際に以下の画面を作ってみました。
よくあるサービスの画面風にしてみました。

例えばですが、入力とボタンが一緒になっている箇所ですが、以下のように記述します。

<UCard>
  <template #header>
    なにかを変更
  </template>
  <label for="input">なにかの入力</label>
  <UInput id="input" v-model="value" />
  <UButton label="Save">Save</UButton>
</UCard>

実際のコードを触った感触ですが、最初はラーニングコストがかかる印象です。スタイルは自由にいじれるものの、コンポーネント自体はガッチリ組まれておりコンポーネント同士の役割や配置を理解した上ではないと一苦労するかな、という感じです。この点は Vuetify と似ているかもしれません。

さて最後に気になるのはアクセシビリティのスコア。
結果は…

94！ほぼ何もせずにこれはすごい！
ここから更にスコアを上げるためにはもっとコードの内部に手を突っ込む必要があるかと思います。

まとめ

一通り触ってみて、Nuxt UIは「次世代のBootstrap」「スタイルが自由な Vuetify」のような感じがしました。
ただ、UI部分がTailwindに一任されているので、UIの調整幅はかなり広いように思えます。
これだけ（いい意味で）味がない状態であればどんなサービスにも適用できるのではないかなと感じております。
また、これさえあれば後はロジックに集中できるという意味で、なにかアプリケーションを作りたいときの走り出しにも十分つかえる印象がありました。