내 컴포넌트를 추가하세요.

Plugin 설치

앱의 개발 의존성으로 Vitrine을 추가합니다.

Vite에 추가

vite.config.ts에서 React 플러그인 옆에 vitrine()을 넣습니다. vite serve에서만 동작하며 프로덕션 빌드에는 아무것도 추가하지 않습니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import vitrine from "vite-plugin-react-vitrine";

export default defineConfig({
  plugins: [react(), vitrine()],
});

컴포넌트 표시

export한 컴포넌트 바로 위에 주석을 추가합니다. export 이름이 갤러리 항목 이름이 됩니다.

/** @preview */
export function Button() {
  return <button>Save</button>;
}

갤러리 열기

평소처럼 개발 서버를 켠 다음 같은 주소의 /__vitrine을 엽니다.