-
Notifications
You must be signed in to change notification settings - Fork 44
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Different wrappers for different components #2107
Comments
Thanks for all this context @rudolfbyker! One alternative you could already use today is to use Storybook decorators. They actually work with component previews too, as per the preview renderer code. With Vue 3, this would look like the following block in your <script lang="ts">
export default {
decorators: [
(story: any) => ({
components: { story },
template: '<div style="margin: 3em;"><story /></div>',
}),
]
};
</script> I wonder if a solution like this would work for you? Happy to refine it based on your feedback—the fact that it works today is mostly an accident. |
Thanks! I'll try that. I have not used Storybook before (my first time hearing about it was at ViteConf). But now that I have tried storybook, I don't understand why one would use PreviewJS with storybook. They seem to do similar things. |
Originally posted by @fwouts in #2086 (comment)
Is your feature request related to a problem? Please describe.
Let's say I have
ComponentA
andComponentB
.ComponentA
requires some things to be provided by the wrapper, and some globals to be mocked.ComponentB
requires something totally different, but maybe with the same name. It's not possible to use the same wrapper for previewing both.Describe the solution you'd like
I don't have strong opinions about how to implement this, but here are some ideas:
nuxt.config.ts
which components will use which wrapper. Something like/// <wrapper = foo>
in the component file.ComponentA.wrapper.vue
andComponentB.wrapper.vue
.Some of these suggestions only allow a
1:1
relationship between wrapper and component. Others allow1:N
relationship between wrapper and components. Currently, we have a1:all
relationship (just one wrapper for all components in the project)Describe alternatives you've considered
componentExamples
orcomponentPreviews
that contain components that are not used in production, but only as examples for preview. This can get a bit tedious.The text was updated successfully, but these errors were encountered: