storybook
@nuxtjs/storybook

StorybookをNuxtアプリケーションに簡単に統合し、UIコンポーネントを独立してデザイン、構築、テストできます。

Nuxt Storybook

Nuxt Storybook

StorybookNuxtアプリケーションに統合します。

インストール

npx nuxi@latest module add storybook

nuxt.configを更新します

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

次に、pnpm devを実行してNuxtサーバーを起動します。

デモ

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

機能

👌 ゼロ設定で開始(ビデオを参照)

🪄 Storybookターミナルへのアクセス

🎨 Storybookアプリ付きの開発ツールタブ

⚙️ アプリでStorybook設定を参照

📦 Nuxtモジュールによって拡張可能

🚀 Nuxt 3 / Storybook 8をサポート

Nuxt 2

Nuxt 2はStorybook v6でサポートされており、レガシーコードはv4ブランチで確認できます。

コントリビューション

  1. pnpmで依存関係をインストールします。
  2. pnpm dev:prepareを実行して、スタブされたdistディレクトリを生成します。
  3. 変更を加えます。
  4. pnpm lintを実行して、問題がないことを確認します(テストを追加することを検討してください)。
  5. プルリクエストを送信します。

ライセンス

このリポジトリはMITライセンスの下でライセンスされています。コードを自由に利用し、必要に応じて変更してください。

連絡先

🔖 メール: [email protected]

💬 Discord: ChakAs3

🐦‍⬛ Twitter: @ChakirQatab

スポンサー

Chromatic

UIの変更を確認し、視覚的なリグレッションを検出するのに役立つビジュアルテストプラットフォームを提供してくれたChromaticに感謝します。