Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chakas3/storybook-vue-custom-render
https://github.com/chakas3/storybook-vue-custom-render
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/chakas3/storybook-vue-custom-render
- Owner: chakAs3
- Created: 2023-06-25T22:52:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-13T11:20:46.000Z (over 1 year ago)
- Last Synced: 2024-04-14T10:13:19.344Z (9 months ago)
- Language: TypeScript
- Size: 1.04 MB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Vue3 Render Functions in Storybook
This repository showcases different render functions for Vue 3 components in Storybook. Each render function demonstrates a different approach to rendering components using various syntaxes and APIs.
## Render Functions
### JSX Syntax
The story is rendered using the JSX syntax. the render function here is the usual vue `render()` function, similar to the one we use Vue component if we use JSX, and similar to the one used in Storybook React story
```javascript
export const JSXSyntax: Story = {
args: {
label: 'Rendered Using JSX Syntax',
size: 'small',
},
render(args) {
return ;
}
};
```
### Vue render function h()
The story is rendered using the `h()` function. the render function here is the usual vue `render()` function, similar to the one you define in a typical Vue component.
```javascript
export const HRenderFunction: Story = {
args: {
label: 'Rendered Using h() function',
},
render(args) {
return h(Button, args);
},
};
```
### Composition API Component
The story is rendered using the Composition API Component that is returned by the render function. the Vue Component uses the Composition API `setup` and `template`.
```javascript
export const CompositionApiComponent: Story = {
args: {
label: 'Rendered using Composition Component',
},
render(args) {
return {
components: { Button },
setup(props, { attrs }) {
return { props, args, attrs };
},
template: `
Args: {{ JSON.stringify(args) }}
`,
};
},
};
```
### Options API Component
The story is rendered using the Options API component returned by the Story render function . using the Options API props and data properties.
```javascript
export const OptionsApiComponent: Story = {
args: {
label: 'Rendered using Composition Component',
},
render(args, { argTypes }) {
return {
props: Object.keys(argTypes),
data: () => ({ args }),
components: { Button },
template: `
Args: {{ JSON.stringify(args) }}
`,
};
},
};
```
## Getting Started
1. Clone this repository: `git clone https://github.com/chakAs3/storybook-vue-custom-render.git`
2. Install dependencies: `pnpm install`
3. Run Storybook: `pnpm run storybook`
4. Open your browser and visit `http://localhost:6006` to view the Storybook.
## License
This repository is licensed under the [MIT License](LICENSE). Feel free to use the code and modify it according to your needs.