🎮

NuxtUIを用いたWebアプリ構築

2024/03/28に公開

Nuxt

Tailwind CSS

Nuxt 3

tech

NuxtUIについて

Nuxt UI is a module that provides a set of Vue components and composables built with Tailwind CSS and Headless UI to help you build beautiful and accessible user interfaces.
Its goal is to provide everything related to UI when building a Nuxt app. This includes components, icons, colors, dark mode as well as keyboard shortcuts. （引用：NuxtUI Introduction）

上記の通り、NuxtUIはNuxtのUI構築において役立つ、TailwindCSS+HeadlessUIベースのUIコンポーネントライブラリです。Vuetifyをはじめ、QuasarやElement+、AntDesignなど多くのコンポーネントライブラリが存在しますが、NuxtUIはNuxtの公式が構築しているコンポーネントライブラリとなります。
カード、ダイアログ、ドロワー、ナビゲーションなど基本的なコンポーネントは一通り揃っており、デザイン面でもTailwindCSSの機能をそのまま利用できる点でカスタマイズ性も良いように筆者は感じました。

今回、このNuxtUIを用いてWebアプリケーションを作成する機会があったため、備忘録と情報共有のため、記事に残します。

NuxtUI Proについて

本記事では詳しく記載しませんが、NuxtUIにはPro版が存在しています。
こちらは、無料版の機能に加えてダッシュボードや認証フォームなど、基礎となるコンポーネントを基に作成したUI構築で必要になりそうなコンポーネント郡を有償で提供しています。
ただ、無料版のコンポーネントとロジックを組み合わせたものなので、素早くプロダクトを開発したい方やNuxtUIのプロジェクトを金銭面で支援したい方向けという意味が強い用に思います。
（TailwindUIのような感じ？）

NuxtUIの導入方法

導入は、通常のNuxtModulesの導入手順と変わりません。Nuxt公式サイトのModulesページにも掲載されています。

なお、NuxtにはTailwindCSSを導入するためのモジュール（@nuxtjs/tailwindcss）が存在しますが、NuxtUIを導入するとこのモジュールも一緒に導入されるため、個別にインストール・設定ファイルへ追加する必要はありません。

https://nuxt.com/modules/ui

npm add @nuxt/ui

nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@nuxt/ui"]
});

npx tailwindcss init --ts

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

※個人的に、Nuxtは各種ファイルが*.tsなので、揃えたくてTailwindCSSの設定ファイルもTSにしています。npx tailwindcss initでJSファイルとして生成しても問題なく動作するので、お好みで！

テーマカラーの変更

NuxtUIのデフォルトのテーマカラーはNuxtの公式サイトで使用されている青っぽい黒と蛍光緑です。
これを変更するには、app.config.tsを作成し、以下の通り定義します。（詳しくは、公式サイトのThemingを参照）

app.config.ts

export default defineAppConfig({
  ui: {
    primary: 'green',
    gray: 'cool'
  }
})

tailwind.config.ts

import type { Config } from 'tailwindcss'
import defaultTheme from 'tailwindcss/defaultTheme'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        green: {
          50: '#EFFDF5',
          100: '#D9FBE8',
          200: '#B3F5D1',
          300: '#75EDAE',
          400: '#00DC82',
          500: '#00C16A',
          600: '#00A155',
          700: '#007F45',
          800: '#016538',
          900: '#0A5331',
          950: '#052e16'
        }
      }
    }
  }
}

コンポーネントのデザインカスタマイズ

直接コンポーネントにクラスを指定しても意図したとおり反映されない場合があります。
NuxtUIのコンポーネントの多くはuiというPropsを持っており、これを使用することで細かいデザインの指定をTailwindCSSのクラスを使って行うことができるようです。

例えば、カードコンポーネント（<UCard></UCard>）を例に取ります。
NuxtUIにおけるカードコンポーネントは、ヘッダー/ボディ/フッターの3部構成です。

<UCard>
  <template #header>
    ここはヘッダーです
  </template>

  ここはボディです

  <template #footer>
    ここはフッターです
  </template>
</UCard>

templateタグにはクラスは記載できませんので、ヘッダーやフッターの装飾をしたい場合、どう行うか？というところですが、ここで登場するのがuiPropsです。

<UCard
  :ui="{
    base: '',
    background: 'bg-white dark:bg-gray-900',
    divide: 'divide-y divide-gray-200 dark:divide-gray-800',
    ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
    rounded: 'rounded-lg',
    shadow: 'shadow',
    body: {
      base: '',
      background: '',
      padding: 'px-4 py-5 sm:p-6',
    },
    header: {
      base: '',
      background: '',
      padding: 'px-4 py-5 sm:px-6',
    },
    footer: {
      base: '',
      background: '',
      padding: 'px-4 py-4 sm:px-6',
    },
  }"
>
  <template #header>
　　　　　　ここはヘッダーです
　　　　</template>

  ここはボディです

  <template #footer>
　　　　　　ここはフッターです
　　　　</template>
</UCard>

上記のように、uiに対してオブジェクトでCSSのクラスを指定することで反映されます。
NuxtUIの各コンポーネントには、ほぼほぼこのuiが存在しており、細かくデザインを調整する事が可能です。

所感

今回作成したWebアプリは、最初はVuetifyを使用していたのですが、画面遷移でのもたつきが目立ってきて、いよいよストレスフルになったので、途中からUIコンポーネントをNuxtUIに変更することにしました。
変更作業は大変でしたが、結果としてはかなり軽くなり、画面遷移でのもたつきは解消され、良かったように思います。
また、もともとTailwindCSSはある程度扱えたので、UIコンポーネントの便利さとTailwindCSSの手軽さが融合しており、個人的にはとても使いやすいUIコンポーネントだと感じました。

現在、HeadlessUIからRadixVueへの換装が進んでいるそうで、近い将来Radixの機能も使えるようになっていくものと思います。

今回作成したアプリ

https://pso2mingle.app/

株式会社SEGAが運営する、オンラインMORPG「Phantasy Star Online2」および同ゲームの後継である「Phantasy Star Online 2 NEW GENESIS」において、ユーザー自身が開催する様々な集会の情報を登録し、共有するためのWebアプリを今回作成しました。

技術スタック

上記アプリで使用している技術スタックは次のとおりです。
Nuxt / NuxtUI / CloudflarePages / Cloudflare D1

まだまだ機能改善を繰り返す中ですが、ここ数年で様々なオンラインゲームがリリースされ、いまいち盛り上がりに欠ける同ゲームが少しでも盛り上がることを願いながら、鋭意開発・運用中です。