Vue3 + Vite + Storybook の環境を作る

自分用の備忘録に書きました！

• Vue
• Vite
• Storybook

2023/10/30 現在の latest を使っています

Vue@3.3.4
Vite@4.4.5
Storybook@7.5.2

Node.js は 18 系以上をお使いください。

Vue3 + Vite の環境構築

npm create vite@latest
> Project name: my-project
> Select a framework: Vue
> Select a variant: TypeScript

Storybook の環境構築

cd my-project
npm i --save-dev storybook@latest
npm i --save-dev @storybook/vue3-vite@latest

.storybook/main.ts に以下を書く

.storybook/main.ts

import { StorybookConfig } from "@storybook/vue3-vite";

const config: StorybookConfig = {
  framework: "@storybook/vue3-vite",
  stories: ["../src/**/*.stories.@(js|ts)"],
};

export default config;

package.json に以下を追記する

package.json

{
  "name": "storybook-test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
+   "storybook": "storybook dev --port 6006",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@storybook/vue3-vite": "^7.5.2",
    "@vitejs/plugin-vue": "^4.2.3",
    "storybook": "^7.5.2",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

port の番号が他とかぶらないように注意です

stories.ts ファイルを作る

src/components/HelloWorld.stories.ts

import HelloWorld from "./HelloWorld.vue";
import type { Meta, StoryObj } from "@storybook/vue3";

type Story = StoryObj<typeof HelloWorld>;

const meta: Meta<typeof HelloWorld> = {
  title: "HelloWorld",
  component: HelloWorld,
};

export const Default: Story = {
  render: () => ({
    components: { HelloWorld },
    template: "<HelloWorld msg='Vite + Vue' />",
  }),
};

export default meta;

実行する

npm run storybook

こうなれば成功です。自動でブラウザが開きます。

起動した Storybook です。CSS が効いていないのは仕様です。