ハコザキです。 今回は、NuxtプロジェクトにStorybookの導入、基本的な使い方、Amplifyへの自動デプロイまでをご紹介します! はじめに Storybookとはコンポーネントの見た目・挙動を開発環境を立ち上げることなく確認できる コンポーネントライブラリツールです。 カタログのような見た目で共有できるのでデザイナーの方とのやりとりも容易になります。 Storybookの詳しいメリットなどについては、こちらで詳しく説明がされてました..! 今回は3つに分けて解説していきたいと思います! Nuxt.jsプロジェクトにStorybookを導入、共通設定コンポーネントごとのストーリーの定義Amplifyを用いての自動デプロイ、Basic認証 Nuxt.jsプロジェクトの新規作成についてはこちら ※今回のNuxt.jsのバージョンは 2.15.3 です 準備 このようなlist-item
![NuxtにStorybookを導入する 〜環境構築から使い方、Amplifyデプロイまで〜](https://cdn-ak-scissors.b.st-hatena.com/image/square/730921ff555d19178e55596c0c20e3bea7b86b48/height=288;version=1;width=512/https%3A%2F%2Fmavs-wp-media-server.s3.ap-northeast-1.amazonaws.com%2F2021%2F07%2F10111511%2Fnuxt-storybook.png)