Zenn
Open2

Vue.js と Storybook を試す

Storybook
Vue 3
k-ta-yamadak-ta-yamada

Vue プロジェクトの作成。

https://ja.vuejs.org/guide/quick-start.html

npm create vue@latest

TypeScript や Router, Pinia などは利用する形とするため以下の感じ。

$ npm create vue@latest

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … poc-storybook
✔ Add TypeScript? … No / Yes > Yes
✔ Add JSX Support? … No / Yes > No
✔ Add Vue Router for Single Page Application development? … No / Yes > Yes
✔ Add Pinia for state management? … No / Yes > Yes
✔ Add Vitest for Unit Testing? … No / Yes > Yes
✔ Add an End-to-End Testing Solution? › Cypress
✔ Add ESLint for code quality? … No / Yes > Yes
✔ Add Prettier for code formatting? … No / Yes > No
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes > Yes

Scaffolding project in /Users/path/to/poc-storybook...

Done. Now run:

  cd poc-storybook
  npm install
  npm run dev
k-ta-yamadak-ta-yamada

Storybook の導入

https://storybook.js.org/

npx storybook@latest init

Vue 用の設定などは自動的にしてくれるし、インストールから起動まで実施される。

$ npx storybook@latest init
╭──────────────────────────────────────────────────────╮
│                                                      │
│   Adding Storybook version 8.2.8 to your project..   │
│                                                      │
╰──────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...


added 1 package, and audited 603 packages in 742ms

139 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
 • Adding Storybook support to your "Vue 3" app • Detected Vite project. Setting builder to Vite. ✓

  ✔ Getting the correct version of 10 packages
    Configuring Storybook ESLint plugin at .eslintrc.cjs
  ✔ Installing Storybook dependencies
. ✓
Installing dependencies...


up to date, audited 1060 packages in 1s

216 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

╭──────────────────────────────────────────────────────────────────────────────╮
│                                                                              │
│   Storybook was successfully installed in your project! 🎉                   │
│   To run Storybook manually, run npm run storybook. CTRL+C to stop.          │
│                                                                              │
│   Wanna know more about Storybook? Check out https://storybook.js.org/       │
│   Having trouble or want to chat? Join us at https://discord.gg/storybook/   │
│                                                                              │
╰──────────────────────────────────────────────────────────────────────────────╯

Running Storybook

> poc-storybook@0.0.0 storybook
> storybook dev -p 6006 --initial-path=/onboarding --quiet

storybook v8.2.8

info => Starting manager..
info => Starting preview..
Sourcemap for "/virtual:/@storybook/builder-vite/setup-addons.js" points to missing source files
Sourcemap for "/virtual:/@storybook/builder-vite/vite-app.js" points to missing source files
12:55:44 [vite] ✨ new dependencies optimized: @storybook/blocks
12:55:44 [vite] ✨ optimized dependencies changed. reloading

起動後ざっくり動作化確認。