@storefront-ui/nuxt

すべての依存関係をインストール

Nuxt 3 では、最も手軽な開始方法は @storefront-ui/nuxt モジュールを使用することです。Storefront-io Nuxt モジュール は、nuxt 内に @nuxtjs/tailwindcss と storefront-ui tailwindcss プリセットを自動的にインストールします。

# npm
npm i -D @storefront-ui/nuxt

# yarn
yarn add -D @storefront-ui/nuxt

# pnpm
pnpm add -D @storefront-ui/nuxt

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

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@storefront-ui/nuxt']
})

Tailwind 設定

内部的には @nuxtjs/tailwindcss を使用しているため、nuxt.config.ts ファイルで tailwindcss プロパティを使用できます。それ以外には、tailwind.config.ts ファイルを使用して、デフォルトの tailwind 方式で設定を作成できます。

内部的には、@nuxtjs/tailwindcss は設定を追加できる 3 つの場所をマージします。優先順位は次のとおりです。

1. tailwind.config.ts ファイル
2. tailwindcss プロパティを含む nuxt.config.ts ファイル
3. Storefront UI デフォルト設定

::tip インストール済みパッケージへのパスを追加する Storefront UI コンポーネントで使用されているユーティリティ クラスを Tailwind が適切に検出するためには、node_modules フォルダーが配置されている場所へのパスを content プロパティに追加する必要があります。以下の例では、node_modules のデフォルトの場所を使用していますが、モノリポジトリで作業している場合は変更される可能性があります。:

// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default <Config>{
  content: ['./**/*.vue'],
};

カスタム tailwind.css ファイル

独自の Tailwind CSS ファイルを作成する場合は、Tailwind の各レイヤー タイプ (base、components、utilities) に @tailwind ディレクティブを必ず追加してください。

/* ~/assets/css/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

これで準備完了です

これで、アプリに Storefront UI コンポーネントをインポートできるようになり、@storefront-ui/vue ライブラリのすべての Tailwind ユーティリティをプロジェクトで使用できます。storefront-ui はモジュールからも提供されるため、@storefront-ui/vue は Nuxt の自動インポートから利用できます。