インストール

NuxtアプリケーションにNuxt UIをインストールして設定する方法を学びます。

Setup

Nuxtプロジェクトへの追加

Nuxt UIパッケージをインストールする

pnpm add @nuxt/ui tailwindcss

yarn add @nuxt/ui tailwindcss

npm install @nuxt/ui tailwindcss

bun add @nuxt/ui tailwindcss

`nuxt.config.ts`にNuxt UIモジュールを追加します。

nuxt.config.ts

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

Nuxt UIが自動的に登録するため、@nuxt/icon、@nuxt/fonts、@nuxtjs/color-modeをmodules配列に追加する必要はありません。icon、fonts、colorModeキーを使用して、nuxt.config.tsでこれらのモジュールを設定することができます。

Tailwind CSSとNuxt UIをCSSにインポート

@import "tailwindcss";
@import "@nuxt/ui";

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Nuxt Layersを使用すると、モジュールは各レイヤーディレクトリに対して@sourceディレクティブを自動的に生成します。

VSCode用のTailwind CSS IntelliSense拡張機能をインストールし、以下の設定を追加することをお勧めします。

.vscode/settings.json

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "tailwindCSS.classAttributes": ["class", "ui"],
  "tailwindCSS.classFunctions": ["defineAppConfig"]
}

Appコンポーネントでアプリをラップ

app.vue

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Appコンポーネントはグローバル設定を設定し、Toast、Tooltip、promaticオーバーレイに必要です。

Nuxtテンプレートを使う

officialテンプレートをGitHubまたはCLIのUse this templateボタンを使用して開始します。

npm create nuxt@latest -- -t ui

npm create nuxt@latest -- -t ui/landing

npm create nuxt@latest -- -t ui/docs

npm create nuxt@latest -- -t ui/saas

npm create nuxt@latest -- -t ui/dashboard

npm create nuxt@latest -- -t ui/chat

npm create nuxt@latest -- -t ui/portfolio

npm create nuxt@latest -- -t ui/changelog

npm create nuxt@latest -- -t ui/editor

npm create nuxt@latest -- -t ui/calendar

Starter

Nuxt UIを使い始めるための最小限のテンプレートです。

Landing

Nuxt Contentを搭載したモダンなランディングページテンプレート。

Docs

Nuxt Contentを利用したドキュメンテーションテンプレート。

SaaS

Nuxt Contentを搭載したランディング、価格設定、ドキュメント、ブログを含むSaaSテンプレート。

Dashboard

高度な管理インターフェイスを構築するための複数列レイアウトのダッシュボードテンプレート。

Chat

Vercel AI SDKを搭載した独自のチャットボットを構築するためのAIチャットボットテンプレート。

Portfolio

Nuxt Contentを活用した、あなたの仕事、スキル、ブログを紹介する洗練されたポートフォリオテンプレート。

Changelog

リポジトリを表示するための変更履歴テンプレートは、GitHub powered by Comarkからのメモをリリースします。

Editor

マークダウン、HTML、JSONコンテンツタイプをサポートするTipTapを搭載したリッチテキストエディタテンプレート。

Calendar

Appleカレンダーにインスパイアされたテンプレートで、曜日、週、月のビュー、ドラッグアンドドロップ、楽観的な更新が可能です。

Options

nuxt.config.tsでオプションを提供することで、Nuxt UIをカスタマイズできます。

`prefix`

コンポーネントのプレフィックスを変更するには、prefixオプションを使用します。

デフォルトU

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prefix: 'Nuxt'
  }
})

`fonts`

fontsオプションを使用して、@nuxt/fontsモジュールを有効または無効にします。

デフォルトtrue

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    fonts: false
  }
})

`colorMode`

colorModeオプションを使用して、@nuxt/color-modeモジュールを有効または無効にします。

デフォルトtrue

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    colorMode: false
  }
})

`theme.colors`

theme.colorsオプションを使用して、コンポーネントテーマの生成に使用される動的カラーエイリアスを定義します。

デフォルト['primary', 'secondary', 'success', 'info', 'warning', 'error']

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})

各エイリアスは、アプリケーションが使用しているかどうかにかかわらず、色バリアントを持つコンポーネントテーマ内の--ui-color-*シェードとバリアントの完全なセットを生成します。リストを実際に使用するエイリアスにトリミングし、フォームを使用する場合はerrorを保持します。バリデーションスタイルはerrorに依存します。

色のカスタマイズとテーマの詳細については、テーマセクションをご覧ください。

`theme.transitions`

theme.transitionsオプションを使用して、コンポーネントのトランジションを有効または無効にします。

デフォルト：true

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      transitions: false
    }
  }
})

このオプションは、ホバーまたはアクティブ状態のコンポーネントにtransition-colorsクラスを追加します。

`theme.unstyled` badge{label="4.9+" class="align-text-top"}

theme.unstyledオプションを使用して、コンポーネントからすべてのデフォルトのテーマクラスを削除し、その構造とclass、ui、またはapp.config.uiを通じて提供するクラスのみを保持します。

デフォルトfalse

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      unstyled: true
    }
  }
})

これによりstructuralクラス位置決め、トランジション、フレックス/グリッドも削除されます。Modal、Drawer、Calendarのようなレイアウトが重いコンポーネントは、PrimeVueのスタイルなしモードと同様にレイアウトを再供給する必要があります。

`theme.defaultVariants`

theme.defaultVariantsオプションを使用して、コンポーネントのデフォルトのcolorおよびsizeバリアントをオーバーライドします。

デフォルトはprimaryまたはmdのみ置き換えられるため、Avatarはcolor: 'neutral'を保持し、Separatorはsize: 'xs'を保持します。

デフォルト{ color: 'primary', size: 'md' }

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      defaultVariants: {
        color: 'neutral',
        size: 'sm'
      }
    }
  }
})

`theme.prefix` badge{label="4.2+" class="align-text-top"}

theme.prefixオプションを使用して、Tailwind CSSインポートで設定したプレフィックスと同じプレフィックスを設定します。これにより、Nuxt UIコンポーネントが正しいプレフィックス付きユーティリティクラスとCSS変数を使用することが保証されます。

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  }
})

@import "tailwindcss" prefix(tw);
@import "@nuxt/ui";

@nuxt/fontsモジュールでprefixオプションを使用するためにfonts.processCSSVariablesを有効にする必要があるかもしれません。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    theme: {
      prefix: 'tw'
    }
  },
  fonts: {
    processCSSVariables: true
  }
})

これはNuxt UIコンポーネントテーマのすべてのTailwindユーティリティクラスとCSS変数の前に自動的に表示されます。

<!-- Without prefix -->
<button class="px-2 py-1 text-xs hover:bg-primary/75">Button</button>

<!-- With prefix: tw -->
<button class="tw:px-2 tw:py-1 tw:text-xs tw:hover:bg-primary/75">Button</button>

接頭辞の使用については、Tailwind CSSドキュメントを参照してください。

`prose`

@nuxtjs/mdc @nuxt/content @comark/nuxtがインストールされていなくても、Nuxt UI Proseコンポーネントを強制的にインポートするには、proseオプションを使用します。

デフォルトfalse

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    prose: true
  }
})

`mdc` badge{label="Deprecated" color="warning" class="align-text-top"}

代わりにproseオプションを使用してください。

`content`

contentオプションを使用して、@nuxt/contentがインストールされていない場合でも、Nuxt UI散文およびコンテンツコンポーネントを強制的にインポートします。

デフォルトfalse

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    content: true
  }
})

`experimental.componentDetection` badge{label="4.1+" class="align-text-top"}

experimental.componentDetectionオプションを使用して、ツリーシェイクの自動コンポーネント検出を有効にします。この機能はソースコードをスキャンして、実際に使用されているコンポーネントを検出し、それらのコンポーネント（依存関係を含む）に必要なCSSのみを生成します。

デフォルトfalse
タイプboolean | string[]

自動検出を有効にする：

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: true
    }
  }
})

動的使用のための追加コンポーネントを含める：

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  ui: {
    experimental: {
      componentDetection: ['Modal', 'DropdownMenu', 'Popover']
    }
  }
})

コンポーネント名の配列を指定する場合、自動検出が有効になり、これらのコンポーネント依存関係が含まれることが保証されます。これは<component :is="..." />のように静的に解析できない動的コンポーネントに便利です。

継続的リリース

Nuxt UIは継続的なプレビューリリースにpkg.pr.newを使用し、開発者は公式リリースを待たずに最新の機能やバグ修正に即座にアクセスできます。

v4ブランチへのすべてのコミットとPRに対して自動プレビューリリースが作成されます。パッケージバージョンを特定のコミットハッシュまたはPR番号に置き換えて使用してください。

package.json

{
  "dependencies": {
-   "@nuxt/ui": "^4.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}

pkg.pr.newはインストールURLをPRに自動的にコメントし、変更を簡単にテストできます。

Introduction

Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.

Migration

A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.