This repository demonstrates the utilization of Storybook's docgen configuration, leveraging Volar's vue-component-meta
for improved type definitions synchronized with the latest updates from the Vue core team.
To configure your Storybook docgen to utilize Volar's vue-component-meta
, follow these steps:
- Open
.storybook/main.ts
in your project. - Ensure you have the necessary imports:
import type { StorybookConfig } from '@storybook/vue3-vite';
- Configure your Storybook with the following settings:
const config: StorybookConfig = {
framework: {
name: '@storybook/vue3-vite',
options: {
docgen: "vue-component-meta"
},
},
};
export default config;
The component meta extraction functionality supports multiple file types, including .vue
, .js
, .ts
, .tsx
, and .jsx
. Regardless of the file extension, you can now extract component metadata seamlessly. This improvement enables a unified approach to extracting component meta across different file formats, ensuring consistent and efficient development workflows.
This update includes the extraction of props type definitions, supporting various types and structures:
- String (e.g., 'Foo')
- Array of strings (e.g., ['Baz', 'Bar', 'Foo'])
- Number (e.g., 1)
- Union types with optional values (e.g., 'Foo' | undefined)
- Union types (e.g., 'Foo' | 'Baz')
- Object with inline properties (e.g., { foo: 'Foo' })
- Object with nested properties (e.g., { nestedProp: 'Nested Prop' })
- Object with intersection types (e.g., { nestedProp: 'Nested Prop', additionalProp: 'Additional Prop' })
- Array of objects with properties (e.g., [{ foo: 'Foo' }])
- Literal types (e.g., ['Uncategorized', 'Display', 'Addons'])
- Enum types (e.g., MyEnum.Small)
- Recursive object types (e.g., { recursive: { recursive: { recursive: 'recursive' } } })
In addition to type definition extraction, this update introduces support for props description and tag annotations. Now, you can provide descriptive explanations for props, enhancing component documentation and facilitating better understanding. Tags annotations further enrich the documentation, enabling categorization and organization of props based on their functionality or purpose.
This feature is available starting from Storybook v8.0.0-beta.5.
This demo repository showcases various use cases typical of Vue components. Explore the provided components to understand how to leverage the enhanced type definitions, props description, and tag annotation support, and benefit from the latest updates from the Vue core team.