Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tobiasdiez/storybook-vue-addon

Storybook stories in native Vue format
https://github.com/tobiasdiez/storybook-vue-addon

storybook storybook-addon vite vue webpack

Last synced: 18 days ago
JSON representation

Storybook stories in native Vue format

Host: GitHub
URL: https://github.com/tobiasdiez/storybook-vue-addon
Owner: tobiasdiez
License: mit
Created: 2022-09-28T13:48:12.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-10-23T16:33:31.000Z (22 days ago)
Last Synced: 2024-10-24T07:02:46.565Z (21 days ago)
Topics: storybook, storybook-addon, vite, vue, webpack
Language: TypeScript
Homepage:
Size: 1010 KB
Stars: 44
Watchers: 5
Forks: 1
Open Issues: 18
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE

Awesome Lists containing this project

README

        # Storybook Vue Addon

[![NPM version][npm-version-src]][npm-version-href]

[![NPM downloads][npm-downloads-src]][npm-downloads-href]

[![Github Actions][github-actions-src]][github-actions-href]

[![Codecov][codecov-src]][codecov-href]

A Storybook addon that allows to write stories in native Vue syntax and compiles it to Storybook's CSF format.

Example: `Button.stories.vue`

```vue

import Button from './Button.vue'

  

    

      

    

    

      

    

    

      

    

  

```

## Features

- Write stories as idiomatic Vue templates, bye bye string-based templates, as wished for in [storybookjs/storybook#9768](https://github.com/storybookjs/storybook/issues/9768)

- Syntax highlighting and full editor support (including Volar) for writing story templates

- Add markdown documentation in a custom `docs` block, directly in your `stories.vue` files (see below for details)

- The component that is displayed needs only be declared once (via ``) and not for every story

- Simple integration with Storybook and automatic Vite support

- Light: Vue stories are transpiled into ordinary CSF stories on the fly with minimal overhead

This package is currently in an early alpha stage and supports only the fundamental Storybook features.

Compatibility with more advanced features and addons is work in progress.

Please open an issue if you encounter any bugs or missing integrations.

The way to write stories as idiomatic Vue templates is heavily inspired by the great [Histoire](https://histoire.dev/).

## Installation

> Note: Currently, only the [`@storybook/vue3-vite`](https://github.com/storybookjs/storybook/tree/next/code/frameworks/vue3-vite) builder is supported (or the deprecated `@storybook/builder-vite` version 0.2.7 or higher).

1. Add `storybook-vue-addon` to your dev-dependencies.

   ```sh

   # npm

   npm install --save-dev storybook-vue-addon

   # yarn

   yarn add -D storybook-vue-addon

   # pnpm

   pnpm add -D storybook-vue-addon

   ```

2. In `.storybook/main.js`, add `*.stories.vue` to the stories patterns and `storybook-vue-addon` as an addon.

   ```diff

     "stories": [

       "../src/**/*.stories.mdx",

   -    "../src/**/*.stories.@(js|jsx|ts|tsx)"

   +    "../src/**/*.stories.@(js|jsx|ts|tsx|vue)"

     ],

     ...

     "addons": [

       "@storybook/addon-essentials",

   +   "storybook-vue-addon"

     ],

   ```

## Adding documentation

You can add documentation for your components directly in your story SFC using the custom `docs` block.

```vue

Define your stories here as above

import { Canvas } from '@storybook/blocks';

# Documentation

Everything in one place. Isn't it great?

You can render stories in the docs using the `` component.

```

You can use Markdown’s readable syntax (such as # heading) for your documentation, include stories, and freely embed JSX component blocks at any point in the file. See [Storybook Docs](https://storybook.js.org/docs/vue/writing-docs/introduction) for more information.

There are a few minor differences to standard MDX documentation pages:

- The `` tag is not needed.

- You don't need to import the stories file. Simply refer to the defined stories by their name. For example:

  ```vue

  

    

      

        

      

    

  

  

    import { Canvas } from '@storybook/blocks';

    

  

  ```

## Typescript support

Volar should be able to automatically recognize the `Stories` and `Story` components. It is also possible to import them from `storybook-vue-addon`:

```ts

import type { Stories, Story } from 'storybook-vue-addon/core'

```

## Manual usage

If for whatever reason you process Storybook stories in your build pipeline, you probably want to first transpile the Vue stories to classical CSF stories by adding `storybook-vue-addon` to your build.

Vite


```ts

// vite.config.ts

import VueStories from 'storybook-vue-addon/vite'

export default defineConfig({

  plugins: [

    VueStories({

      /* options */

    }),

  ],

})

```

Example: [`playground/`](./playground/)




Rollup


```ts

// rollup.config.js

import VueStories from 'storybook-vue-addon/rollup'

export default {

  plugins: [

    VueStories({

      /* options */

    }),

  ],

}

```




Webpack


```ts

// webpack.config.js

module.exports = {

  /* ... */

  plugins: [

    require('storybook-vue-addon/webpack')({

      /* options */

    }),

  ],

}

```




Nuxt


```ts

// nuxt.config.js

export default {

  buildModules: [

    [

      'storybook-vue-addon/nuxt',

      {

        /* options */

      },

    ],

  ],

}

```

> This module works for both Nuxt 2 and [Nuxt Vite](https://github.com/nuxt/vite)




Vue CLI


```ts

// vue.config.js

module.exports = {

  configureWebpack: {

    plugins: [

      require('storybook-vue-addon/webpack')({

        /* options */

      }),

    ],

  },

}

```




esbuild


```ts

// esbuild.config.js

import { build } from 'esbuild'

import VueStories from 'storybook-vue-addon/esbuild'

build({

  plugins: [VueStories()],

})

```




## 💻 Development

- Clone this repository

- Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable` (use `npm i -g corepack` for Node.js < 16.10).

- Install dependencies using `pnpm install`.

Commands:

- `build`: Build everything. Output can be found in `dist`.

- `build:types`: Build the types for the `Story` and `Stories` components, to ease development in the `components.d.ts` file.

- `dev`: Build in watch mode.

- `lint`: Check for eslint and prettier issues.

- `test`: Run the tests.

- `example:vite`: Open the example storybook (using vite). You need to run `build` or `dev` first.

- `play`: Run the playground (currently not used).

- `release`: Release a new version to npm.

[npm-version-src]: https://img.shields.io/npm/v/storybook-vue-addon?style=flat-square

[npm-version-href]: https://www.npmjs.com/package/storybook-vue-addon

[npm-downloads-src]: https://img.shields.io/npm/dm/storybook-vue-addon?style=flat-square

[npm-downloads-href]: https://npmjs.com/package/storybook-vue-addon

[github-actions-src]: https://img.shields.io/github/actions/workflow/status/tobiasdiez/storybook-vue-addon/ci.yml?branch=main&style=flat-square

[github-actions-href]: https://github.com/tobiasdiez/storybook-vue-addon/actions?query=workflow%3Aci

[codecov-src]: https://img.shields.io/codecov/c/gh/tobiasdiez/storybook-vue-addon/main?style=flat-square

[codecov-href]: https://codecov.io/gh/tobiasdiez/storybook-vue-addon

## Sponsors



Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.