Nuxt3のプロジェクトにStorybookを導入する

はじめに

表題そのまんまですがNuxt3でStorybookを扱うまでの手順です。

環境

• Node 16.17.0

Nuxt3のインストール

まずNuxt3プロジェクトを作成します。

npx nuxi init nuxt3-storybook
cd nuxt3-storybook
npm install

一度動作確認しておきます。

npm run dev

http://localhost:3000にアクセスして、ページが表示されればOK。

Storybookのインストール

Storybookを導入します。

npx sb init --type vue3 --builder @storybook/builder-vite

(補足)
最初公式にある通りnpx sb initとしてみたらダメでした。
typeにVue3を指定すること(--type vue3)と、ビルダーにviteを指定する(--builder @storybook/builder-vite)ことが必要だそうです。
参考

こちらもとりあえず動かしてみます。

npm run storybook

http://localhost:6006にアクセスして、ページが表示されればOK。

コンポーネントを用意する

Storybookで表示するコンポーネントを作成します。
プロジェクトルートにcomponentsディレクトリを作成し、その配下にコンポーネントを作成していきます。

components/Counter.vue

<script setup lang="ts">
import { ref } from 'vue';
// クリックしたらカウントUPするだけのボタン
const state = ref(0);
const increment = () => {
  state.value++;
};
</script>

<template>
  <div>Count: {{ state }}</div>
  <button @click="increment">Increment</button>
</template>

Storybookで表示するためにstoriesファイルも作成します。
今回はcomponentsディレクトリ配下にstoriesディレクトリを作成、その配下にstoriesファイルを作成していきます。

components/stories/Counter.stories.ts

import { Story } from "@storybook/vue3";
import Counter from "./Counter.vue";

export default {
  title: "components/Counter",
  component: Counter,
}

const Template: Story<typeof Counter> = () => ({
  components: { Counter },
  template: "<Counter />",
});

export const Default = Template.bind({});
Default.storyName = "Increment Counter Button";

storiesファイルの場所によっては、.storybook/main.jsの記述を変える必要があります。

module.exports = {
  "stories": [
    "../components/stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  :
}

再びStorybookを起動します。

npm run storybook

先ほど作成したコンポーネントが表示されていれば成功です。

おわり

以上がNuxt3にStorybookを導入するまでの手順です。
導入・起動しただけで具体的にコンポーネントを開発していく過程は載せていませんが(というか私もこれから学習しなくては)、何かのお役に立てば幸いです。