Zenn
📑

Nuxt / Storybookが使えるようになった？？

に公開
Nuxt
Storybook
tech

はじめに

普段色々と Nuxt を使うことが多いのですが、前からやりたかったけどちょっと大変そうだなと思ったことがありました。

そう、『Nuxt で storybook』を使うことです。

とある時、色々と情報収集をしていると、何やらできるのでは？と思ったので、実際に動くところまで実装していこうと思います！！

記事を読むにあたって

この記事は、社会人2年目のヨワヨワプログラマーが書いている記事です。そのため

  • 間違った認識
  • 間違った説明

などをしている可能性があります。そのようなことを見つけた方は、優しくご教授いただけますと幸いです。

それでは、本編に参りましょう。

動作環境

下記環境で試しております。
また、Dockerを使って環境構築をしております。

環境 バージョン
node.js 22.15.0
npm 10.9.2
Nuxt 3.16.1
Storybook 9.0.0

また、ソースコードは下記リポジトリに一通りあります。

https://github.com/takashiraki/nuxt_storybook

storybookを入れていく

では、さっそくstorybookを入れていこうと思います。今回は、storybookの公式に沿って、セットアップをしていこうと思います。

https://storybook.js.org/docs

npm create storybook@latest

そうすると、ヘルプが必要か？的なことが効かれるので、とりあえず助けてほしいのでyesを選択しました。

/opt/app # npm create storybook@latest
Need to install the following packages:
create-storybook@9.0.0
Ok to proceed? (y) y


> npx
> create-storybook

╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 9.0.0 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
? New to Storybook? › - Use arrow-keys. Return to submit.
❯   Yes: Help me with onboarding
    No: Skip onboarding & don't ask again

なんとこれだけで、動くようになっているんです！！

これだけでもだいぶ嬉しいですね！！

試しにshadcnとかを入れてみる

では、ここでshadcnをセットアップして動くか、試してみましょう。

https://www.shadcn-vue.com/docs/installation/nuxt

そして、コンポーネントを一緒に作っていきます。今回はシンプルなボタンにしてみましょう。

components/Atoms/Buttons/SimpleButton.vue
<script setup lang="ts">
defineProps<{
    icon?: Function
}>();
</script>

<template>
    <Button>
        <component :is="icon" class="w-4 h-4 mr-2"></component> Login with Email
    </Button>
</template>

また、これに対するstorybookも用意してみましょう。

components/Atoms/Buttons/SimpleButton.stories.ts
import type { Meta, StoryObj } from "@nuxtjs/storybook";
import SimpleButton from "./SimpleButton.vue";
import { MailOpen } from "lucide-vue-next";

const meta = {
    title: "Atoms/Buttons/SimpleButton",
    component: SimpleButton,
    parameters: {
        layout: "centered",
    },
    tags: ["autodocs"],
} satisfies Meta<typeof SimpleButton>;

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {
        icon: MailOpen,
    },
};

これで、一通りは完成になります。

まとめ

今までいろいろな記事を見て、storybookの導入を諦めていました。もちろん個人的な技量もそうですが、ちょっと大変そうだと思っていて、避けていた部分があります。

しかし、ここまで楽になるととっても導入しやすそうな感じですね。

これからも色んな所で使っていきたいなと思っています。

GitHubで編集を提案

Discussion