storybook-vue-typescript icon indicating copy to clipboard operation
storybook-vue-typescript copied to clipboard

Base setup of Storybook+Vue+Typescript

storybook-vue-typescript

This shows how to use Storybook alongside Vue with Typescript.

Project setup

yarn
# or  npm i

Storybook

yarn run storybook
# or  npm run storybook

How I got here

  1. Install Vue CLI
  2. Create a Vue Project with Typescript and Babel
  3. Add Storybook.js
  4. Add @storybook/preset-typescript
  5. Apply a patch removing babel-preset-vue from the Storybook code. This patch is automatically run via a postinstall hook. Maybe some day this won't be needed anymore.
  6. Profit!