Incorporating a variety of sub-components into my Vue 3 component based on context is proving to be a challenge. Utilizing slots seems to be the solution in Vue 3, but I'm struggling to make it work within Storybook 8, which I'm using to showcase the functionality to stakeholders.
My setup was functional in Storybook 7, but after upgrading to Storybook 8 with enhanced 'First-class Vue support', things have stopped working as they did before. I clearly need guidance on how to navigate this migration and adjust my practices accordingly.
Considering my limited experience with both Vue and Storybook, it's possible that I'm overlooking some fundamental aspect of the process.
If someone could direct me to a Storybook example demonstrating how to implement dynamic sub-components within a component slot, it would greatly assist me in resolving this issue.
Below is the code snippet for my Vue component (everything functions except for the slots, implying that my props, setup, and overall Storybook configuration are correct, I believe.)
<template>
<div class="alert" :id="props.identifier" :class="[alertStyleClass, alertWidthClass, alertLayoutClass]">
<Icon v-if="props.icon" class="alert__icon" :name="props.icon" />
<div class="alert__main" v-if="slots.main && !props.message">
<slot name="main"> </slot>
</div>
<div class="alert__main" v-else v-html="props.message"></div>
<div class="alert__actions" v-if="slots.actions">
<slot name="actions"> </slot>
</div>
</div>
</template>
Additionally, here is an exemplary story utilizing this component (the conventional direct props are operational, and the subcomponent 'CheckboxComponent' appears fine on its own). This syntax was effective in Storybook 7, so I'm unsure about the changes or adjustments required to make it work in Storybook 8.
export const CheckboxNotification: Story = {
args: {
identifier: '',
style: AlertStyle.Information
},
parameters: {
slots: {
main: {
description: 'Main slot',
components: { CheckboxComponent },
template: `<CheckboxComponent label="Label" identifier="AlertCheckbox" value="true" name="AlertCB" />`
}
}
}
}
My attempt involved populating the main slot with a literal string. Although I didn't anticipate any results, at least the content appeared in the intended location without being compiled into the necessary subcomponent.
export const CheckboxNotification: Story = {
args: {
identifier: '',
style: AlertStyle.Information,
main: `<CheckboxComponent label="Label" identifier="AlertCheckbox" value="true" name="AlertCB" />`
}
}
This excerpt lacks many crucial elements such as prop definitions, complete setup code, etc. If there are any key details I've omitted that could aid in diagnosing this issue, please notify me. All I know is that I'm feeling frustrated and unable to find assistance - it seems like a critical problem, leaving me baffled by my inability to solve it. However, I firmly believe that all functionalities should be achievable through story code without altering my Vue component to suit Storybook.