Nuxt Storybook

將 Storybook 整合到您的 Nuxt 應用程式中。

安裝

npx nuxi@latest module add storybook

更新您的 nuxt.config

  modules: [
    '@nuxtjs/storybook',
  ],
  storybook: {
    url: 'https://127.0.0.1:6006',
    storybookRoute: '/__storybook__',
    port: 6006,
  },

然後執行 pnpm dev 來啟動您的 Nuxt 伺服器。

示範

https://github.com/storybook-vue/nuxt-storybook-module-demo

功能

👌 零配置即可開始（請參閱影片）

🪄 存取 Storybook 終端機

🎨 帶有 Storybook 應用程式的 Devtools 標籤

⚙️ 在您的應用程式中參考您的 Storybook 設定

📦 可由 Nuxt 模組擴充

🚀 支援 Nuxt 3 / Storybook 8

Nuxt 2

Storybook v6 支援 Nuxt 2，您可以在 v4 分支上查看舊版程式碼。

貢獻

1. 使用 pnpm 安裝相依性。
2. 執行 pnpm dev:prepare 以產生虛擬的 dist 目錄。
3. 進行您的變更。
4. 執行 pnpm lint 以驗證沒有問題（考慮加入測試）。
5. 提交 PR。

授權

本儲存庫依 MIT 授權授權。您可以自由使用程式碼並根據您的需求修改它。

聯絡方式

🔖 電子郵件：javachakir@gmail.com

💬 Discord：ChakAs3

🐦‍⬛ Twitter：@ChakirQatab

贊助商

感謝 Chromatic 提供視覺測試平台，協助我們審查 UI 變更並捕獲視覺迴歸。