New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,096
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Vue support for MDX
Use Vue components inside MDX files, as if they were React components.
npm install storybook-addon-vue-mdx
Last updated 8 months ago
379
Downloads per week
Readme View on GitHub

Storybook Addon Vue support for MDX

Use Vue components inside MDX files, as if they were React components.

Limitations

This addon is in its early stages, the following limitations apply:

  • Only works with Vue 3 and Storybook 7
  • Components must be locally imported into MDX files
  • Provide/Inject has not been tested yet but should work
  • Customisation APIs may change in the future

Installation

yarn add -D storybook-addon-vue-mdx

In your .storybook/main.js file, add the following:

export default {
  addons: ['storybook-addon-vue-mdx'],
}

Usage

In a Sample.mdx file, import the component you need, and use it using Vue JSX syntax:

import MyComponent from 'path-to-components/MyComponent.vue'

<MyComponent>bla bla</MyComponent>

The Vue JSX syntax is documented by Vue. Pay particular attention to the syntax for passing slots.

Customising the Vue app context

This addon uses veaury to render Vue components in a React JSX context. In particular, the addon calls applyPureVueInReact. You may pass options to this function by defining globals in your .storybook/preview.js file, like so:

const globals = {
  vueMdx: {
    beforeVueAppMount(app) {
      app.use(myCustomPlugin)
    },
  },
}

export default {
  globals,
}

You may also directly import and use Veaury's applyVueInReact as per Veaury's own documentation.

Development scripts

  • yarn start runs babel in watch mode and starts Storybook
  • yarn build builds and packages the addon code
  • yarn pack:local makes a local tarball to be used as a NPM dependency elsewhere

Bug reports

Before reporting a bug, please thoroughly check Veaury's documentation and list of issues for matching issues.

To report a bug, please use GitHub issues on this repository, making sure to include a working Minimal Working Example. For instance, you could use storybook.new to bootstrap a reproduction environment.

Join the community
6,513 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI