{"library":"storybook-addon-vue-mdx","title":"Storybook Addon for Vue Components in MDX","type":"library","description":"storybook-addon-vue-mdx facilitates the integration and rendering of Vue 3 components directly within MDX documentation files in Storybook. The current stable version is 3.0.0, which targets Storybook v10. This addon's release cadence appears to be closely tied to major Storybook releases, requiring updates to support newer Storybook versions. Its primary differentiator is enabling Vue component usage in an MDX context, leveraging `veaury` to bridge the Vue/React rendering environments within Storybook's predominantly React-based MDX compiler. It supports customization of the Vue app context via Storybook globals, allowing for the registration of Vue plugins or other app-level configurations. While powerful, it has limitations such as requiring local imports of components and a known bug affecting initial local page loads for MDX files with Vue components.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install storybook-addon-vue-mdx"],"cli":null},"imports":["// .storybook/main.js\nexport default {\n  addons: ['storybook-addon-vue-mdx'],\n}","// Sample.mdx\nimport MyComponent from './path-to-components/MyComponent.vue'\n\n<MyComponent>bla bla</MyComponent>","// .storybook/preview.js\nconst globals = {\n  vueMdx: {\n    beforeVueAppMount(app) {\n      app.use(myCustomPlugin)\n    },\n  },\n}\n\nexport default {\n  globals,\n}"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/Sidnioulz/storybook-addon-vue-mdx","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-addon-vue-mdx","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\n\n// .storybook/main.js\nexport default {\n  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|vue)'],\n  addons: [\n    '@storybook/addon-essentials',\n    '@storybook/addon-docs',\n    'storybook-addon-vue-mdx',\n  ],\n  framework: {\n    name: '@storybook/vue3-vite',\n    options: {},\n  },\n  docs: {\n    autodocs: 'tag',\n  },\n  // .storybook/preview.js\n  // For customizing Vue app context (optional)\n  // globals: {\n  //   vueMdx: {\n  //     beforeVueAppMount(app) {\n  //       app.use(yourVuePlugin);\n  //     },\n  //   },\n  // },\n};\n\n// src/components/MyButton.vue\n<template>\n  <button @click=\"onClick\">{{ label }}</button>\n</template>\n\n<script setup>\nimport { defineProps } from 'vue';\n\nconst props = defineProps({\n  label: { type: String, default: 'Click me' },\n});\n\nconst onClick = () => {\n  console.log('Button clicked!');\n};\n</script>\n\n// src/stories/MyButton.mdx\nimport { Meta, Story } from '@storybook/addon-docs';\nimport MyButton from '../components/MyButton.vue';\n\n<Meta title=\"Components/MyButton\" component={MyButton} />\n\n# MyButton\n\nThis is a custom button component.\n\n<MyButton label=\"Hello from MDX\" />\n\n<Story name=\"Default\">\n  <MyButton label=\"Story in MDX\" />\n</Story>","lang":"typescript","description":"This quickstart demonstrates how to install `storybook-addon-vue-mdx`, configure it in Storybook's `main.js`, and then use a Vue component directly within an MDX documentation file, including basic component definition.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}