3分でNuxt.js(+TailwindCSS) + StorybookでAtomic Designする環境を作る

はじめに

これはNuxt.js + Storybookの環境を作りたいけど色々めんどくさい人のために作った雛形です。
とりあえずサンプル用に Button だけ作成してます。

Let's 3分クッキング✊😸

GitHub

手順

Git for WindowsとかTerminalを起動して作業ディレクトリで下記コマンドを順番に入力します。

git clone https://github.com/tsuengineer/nuxt-storybook.git

cd nuxt-storybook

npm i

npx nuxt storybook

最後のコマンドの実行が終わると勝手にブラウザが起動するはずですが、localhost:3003 でも開けます

Storybookの画面

うまくいくとこんな感じの画面が表示されます。

ボタンに関するソースコードは /components/atoms/Button ディレクトリの中にあります。

このボタンを実際に使ったところ

下記コマンドを実行したあとに localhost:3000 にアクセスすると右下に(青い)ボタンが表示されます。

どうやってButtonコンポーネントをimportしてるかは /pages/index.vue の中見ればわかると思います。

npm run dev

以上です😽