How to handle slots in Vue3 & Storybook 7

Question

I am trying to pass in a component (UIButton) as a slot in another component (UICard) in ButtonAsSlot story.

In the ButtonAsSlot story, I am passing default: '<UIButton v-bind="{type: \'button\', isDisabled: false, variant: \'primary\', label: \'test\',}" />', as args.default so it would be passed in the slots.

It would be great if I can pass an existing story (ex. default: '<UIButton v-bind="ImportedStory.args" />'). However, this would not work.

I tried below but would have an error Error: Unexpected identifier 'Object' on Storybook.

const disabledArgs = ImportedStory.args

export const ButtonAsSlot: Story = {
  ...Playground,
  render: (args, { argTypes }) => ({
    components: { UICard, UIButton },
    props: Object.keys(argTypes),
    setup() {
      return {
        ...args,
      }
    },
    template: `
      <UICard v-bind="args">
        <template v-if="$props.default" v-slot>
            <p>↓Content of slot displayed below</p>
            ${args.default}
        </template>
      </UICard>
    `,
  }),
  args: {
    ...Playground.args,
    default: `<UIButton v-bind="${disabledArgs}" />`,
  },

How can I pass a component using existing stories in the args and set it in the slots?

I am using Vue3. Code is below.

--Card.stories.ts

import type { Meta, StoryObj } from '@storybook/vue3'
import UICard from './Card.vue'
import UIButton from '~/components/Clickable/Button.vue'
import { setDefaultProps } from '~/.storybook/utils'

const meta: Meta<typeof UICard> = {
  title: 'Elements/Card',
  component: UICard,
  tags: ['autodocs'],
}

export default meta

type Story = StoryObj<typeof UICard>

export const Playground: Story = {
  story: {
    name: 'Default',
  },
  render: (args, { argTypes }) => ({
    components: { UICard },
    props: Object.keys(argTypes),
    setup() {
      return {
        ...args,
      }
    },
    template: `
      <UICard v-bind="args">
        <template v-if="$props.default" v-slot>
            ${args.default}
        </template>
      </UICard>
    `,
  }),
}

setDefaultProps(Playground, UICard)

export const ButtonAsSlot: Story = {
  ...Playground,
  story: {
    name: 'Button as slots',
  },
  render: (args, { argTypes }) => ({
    components: { UICard, UIButton },
    props: Object.keys(argTypes),
    setup() {
      return {
        ...args,
      }
    },
    template: `
      <UICard v-bind="args">
        <template v-if="$props.default" v-slot>
            <p>↓Content of slot displayed below</p>
            ${args.default}
        </template>
      </UICard>
    `,
  }),
  args: {
    ...Playground.args,
    default: '<UIButton v-bind="{type: \'button\', isDisabled: false, variant: \'primary\', label: \'test\',}" />',
  },
}

score 1 · Answer 1 · answered Apr 20 '23 at 09:30

In the end I wrote my code like this and it worked.

import { Disabled } from 'disabled.stories'

export const ButtonAsSlot: Story = {
  ...Playground,
  args: {
    ...Playground.args,
    disabledArgs: {
      ...Disabled.args,
    },
    default: '<UIButton v-bind="disabledArgs" />',
  },
}

How to handle slots in Vue3 & Storybook 7

1 Answers1