--- title: Vite description: "Vite.jsのプロジェクトにYamada UIをインストールして使用するためのガイド。" --- ## インストール ### アプリケーションを作成する Viteのアプリケーションを作成します。 ```bash pnpm create vite my-app --template react-ts ``` ```bash npm create vite my-app -- --template react-ts ``` ```bash yarn create vite my-app --template react-ts ``` ```bash bun create vite my-app --template react-ts ``` ### セットアップするコマンドを実行すると、プロジェクトに必要なファイルやフォルダが作成されます。 ```bash pnpm dlx @yamada-ui/cli init ``` ```bash npx @yamada-ui/cli init ``` ```bash yarn dlx @yamada-ui/cli init ``` ```bash bunx @yamada-ui/cli init ``` ### パッケージをインストールするアプリケーションに`@workspaces/ui`をインストールします。 ```bash pnpm add "@workspaces/ui@workspace:*" ``` ```bash npm install "@workspaces/ui@workspace:*" ``` ```bash yarn add "@workspaces/ui@workspace:*" ``` ```bash bun add "@workspaces/ui@workspace:*" ``` ### プロバイダーを追加するインストール後、アプリケーションのルートに`UIProvider`を追加します。 ```tsx import { StrictMode } from "react" import { createRoot } from "react-dom/client" import App from "./App.tsx" import { UIProvider } from "@workspaces/ui" createRoot(document.getElementById("root")!).render( , ) ``` ### コンポーネントを使用する `UIProvider`を追加したら、アプリケーション内でコンポーネントを使用します。 ```tsx import { Button } from "@workspaces/ui" function App() { return } export default App ``` これで、Yamada UIのセットアップは完了です！ ## スクリプト ### ColorModeScript [カラーモード](https://yamada-ui.com/docs/theming/color-mode.md)を使用する場合は、正常に動作させるために`body`に`ColorModeScript`を追加する必要があります。理由は、カラーモードが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。 ```ts title="vite.config.ts" {1,4-18,22} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: "light" }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectColorModeScript()], }) ``` もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultColorMode`を変更した場合は、`ColorModeScript`に`defaultValue`を設定します。 ```ts title="vite.config.ts" {5,14} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { COLOR_MODE_STORAGE_KEY, getStorageScript } from "@workspaces/ui" import { config } from "@workspace/theme" function injectColorModeScript(): Plugin { return { name: "inject-color-mode-script", transformIndexHtml(html) { const content = getStorageScript( "colorMode", COLOR_MODE_STORAGE_KEY, )({ defaultValue: config.defaultColorMode }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectColorModeScript()], }) ``` ### ThemeSchemeScript [テーマの切り替え](https://yamada-ui.com/docs/theming/switching-themes.md)を使用する場合は、正常に動作させるために`body`に`ThemeSchemeScript`を追加する必要があります。理由は、テーマの切り替えが`localStorage`や`cookies`を用いて実装されており、ページの読み込み時に同期を正しく機能させるためです。 ```ts title="vite.config.ts" {1,4-18,22} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-scripts", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: "base" }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectThemeSchemeScript()], }) ``` もし、[コンフィグ](https://yamada-ui.com/docs/theming/configuration/overview.md)の`defaultThemeScheme`を変更した場合は、`ThemeSchemeScript`に`defaultValue`を設定します。 ```ts title="vite.config.ts" {5,14} import type { Plugin } from "vite" import { defineConfig } from "vite" import react from "@vitejs/plugin-react" import { getStorageScript, THEME_SCHEME_STORAGE_KEY } from "@workspaces/ui" import { config } from "@workspace/theme" function injectThemeSchemeScript(): Plugin { return { name: "inject-theme-scheme-scripts", transformIndexHtml(html) { const content = getStorageScript( "themeScheme", THEME_SCHEME_STORAGE_KEY, )({ defaultValue: config.defaultThemeScheme }) return html.replace("", ``) }, } } // https://vite.dev/config/ export default defineConfig({ plugins: [react(), injectThemeSchemeScript()], }) ```