How to use a Vue slot with a template

[mikestu]

I'm using the general pattern that this guy uses here.

What can I do if I need a new variation called "Secondary", which needs to specify markup for a slot in the my-button component? Do I have to create a new template that has that slot configured, or is there some other way to accomplish that?

Example:

const Template = (args, { argTypes }) => ({
props: Object.keys(argTypes),
components: { MyButton },
template: '<my-button @OnClick="onClick" v-bind="$props" />',
});

export const Primary = Template.bind({});
Primary.args = {
primary: true,
label: 'Button',
};

[vana-dev]

up

[shodgson]

You can use the storybook props and use it within the slot, e.g.:

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyButton },
  template: '<my-button @OnClick="onClick" v-bind="$props" > {{ slotcontent }} </my-button>',
});

export const Primary = Template.bind({});
  Primary.args = {
  primary: true,
  label: 'Button',
};

export const Secondary = Template.bind({});
  Primary.args = {
  slotcontent: "Slot content here",
};

(I'm an absolute n00b on this, and found this question when I faced the same challenge. The above worked for me)

[euaaaio]

With Vue 3 and Storybook 6.2.0 beta we can make use slots as part of args:

import { Meta, Story } from '@storybook/vue3'
import { defineComponent } from 'vue'

import Badge from './Badge.vue'

export default {
  title: 'Badge',
  component: Badge,
  argTypes: {
    default: {
      control: 'text',
      description: 'Slot content',
      defaultValue: 'Badge'
    }
  }
} as Meta

export const Default: Story = args => defineComponent({
  components: { Badge },
  setup: () => ({ args }),
  template: '<p-badge>{{ args.default }}</p-badge>'
})

And even change slot’ content:

export const AnotherText = Template.bind({})
AnotherText.args = {
  default: 'Another text'
}

[vchan14]

Can we pass HTML elements to the slot value?
i.e:'<p> Anothertext</p>'
I tried it and it doesn't evaluate the paragraph tag and literally displayed the exact string.

[euaaaio]

Perhaps v-html is what you need.

[mryellow]

This is fine up until you wish to pass actual slot properties.

[tylercollier]

Here's how I did it in Vue 2. I'm using this example button component with a default slot and an optional "hint" slot.

Button.vue:

<template>
  <button @click="$emit('onClick')">
    <slot>
      Submit
    </slot>
    <div style="font-size:x-small;color:gray;">
      <slot name="hint">
        Click me
      </slot>
    </div>
  </button>
</template>

<script>
export default {
}
</script>

Button.stories.js:

const Template = (args, { argTypes }) => {
  return {
    props: Object.keys(argTypes),
    components: { Button },
    template:
      `
      <Button @onClick="onClick" v-bind="$props">
        <template v-if="${'default' in args}" v-slot>${args.default}</template>
        <template v-if="${'hint' in args}" v-slot:hint>${args.hint}</template>
      </Button>
    `,
  }
}

export const Base = Template.bind({})
Base.args = {}

export const WithDefaultSlotContent = Template.bind({})
WithDefaultSlotContent.args = {
  default: `<strong>Go!</strong>`,
}

export const WithOptionalSlotContent = Template.bind({})
WithOptionalSlotContent.args = {
  hint: `<div style="color:red;">Hurry</div>`,
}

You can see we're using <template v-if="..."> within the Template, so that the slots can be optional. With this approach, the WithDefaultSlotContent story will actually have a bold Go!. I was originally trying {{$props.default}} and it would put the literal markup <strong>Go!</strong>.

[tylercollier]

I'm not sure @csalvato, sorry!

[braddialpad]

IIUC, it seems that slots in Vue 2 + Storybook are just broken? Is there better support with Vue 3?

We have been struggling with this issue for ages, and yes slots seem to basically just be broken in storybook code examples, it seems like storybook does not give much of a shit about Vue TBH. Looked into vue 3 a bit and from what I have seen it is not fixed there either, seems anecdotally it may be even worse?

The only way I could find to get slots to display correctly in the docs is if you use the deprecated slot="" syntax, however it seems to break if you use any scoped slots. Example below:

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyComponent },
  template: `
<my-component v-bind="$props">
  <template v-if="${'anchor' in args}" slot="anchor">${args.anchor}</template>
  <template v-if="${'content' in args}" slot="content">${args.content}</template>
</my-component>`,
});

[zhixuan-loh]

IIUC, it seems that slots in Vue 2 + Storybook are just broken? Is there better support with Vue 3?

We have been struggling with this issue for ages, and yes slots seem to basically just be broken in storybook code examples, it seems like storybook does not give much of a shit about Vue TBH. Looked into vue 3 a bit and from what I have seen it is not fixed there either, seems anecdotally it may be even worse?

The only way I could find to get slots to display correctly in the docs is if you use the deprecated slot="" syntax, however it seems to break if you use any scoped slots. Example below:

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyComponent },
  template: `
<my-component v-bind="$props">
  <template v-if="${'anchor' in args}" slot="anchor">${args.anchor}</template>
  <template v-if="${'content' in args}" slot="content">${args.content}</template>
</my-component>`,
});

Hi I faced the same issue as you but I solved it.

I'm using Vue 3 & "@storybook/vue3": "^6.4.19".

Instead of slot="slot-name", use v-slot:slot-name. Both Vue and Storybook accepted it.

Cheers.

[yonario]

This is in the official docs
https://storybook.js.org/docs/vue/writing-stories/args#args-can-modify-any-aspect-of-your-component
Apparently you can do v-if="args.default" instead of v-if="${'default' in args}" without the need for breaking out of the template.

[younho9]

IIUC, it seems that slots in Vue 2 + Storybook are just broken? Is there better support with Vue 3?

We have been struggling with this issue for ages, and yes slots seem to basically just be broken in storybook code examples, it seems like storybook does not give much of a shit about Vue TBH. Looked into vue 3 a bit and from what I have seen it is not fixed there either, seems anecdotally it may be even worse?

The only way I could find to get slots to display correctly in the docs is if you use the deprecated slot="" syntax, however it seems to break if you use any scoped slots. Example below:

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyComponent },
  template: `
<my-component v-bind="$props">
  <template v-if="${'anchor' in args}" slot="anchor">${args.anchor}</template>
  <template v-if="${'content' in args}" slot="content">${args.content}</template>
</my-component>`,
});

In Vue2, because Named slots with the slot attribute is deprecated, transformSource can be used to transform to updated named slots syntax

// preview.js
const parameters = {
	docs: {
		transformSource(source: string) {
			return source.replace(/slot="([^"]*)"/g, (_, p1) => `v-slot:${p1}`);
		},
	}
}

[camslice]

Not directly answering the question here, but providing something useful which is related to the issue. If you define your templates using string literal syntax, then you can grab the template string from [template-name].template

Button.vue

<template>
  <button>
    <slot/>
  </button>
</template>

Foo.js

export default {
  template: `<p>Custom foo</p>`
};

Bar.js

export default {
  template: `<p>Custom bar</p>`
};

Button.stories.js

import Button from './Button.vue';
import Foo from './Foo.js';
import Bar from './Bar.js';

const Template = (args, { argTypes }) => {
  return {
    props: Object.keys(argTypes),
    components: { Button },
    template:
      `
      <Button @onClick="onClick" v-bind="$props">
        ${args.slotTemplate}
      </Button>
    `,
  }
}

export const Foo = Template.bind({})
Foo.args = {
  slotTemplate: Foo.template
}

export const Bar = Template.bind({})
Bar.args = {
  slotTemplate: Bar.template
}

[yvettelexter]

Submit

Click me

<script> export default { } </script>

[BryanAdamss]

I got a new way use slot with mdx.

It use "@storybook/vue": "^6.2.8"；

The complete example can be referred to https://github.com/BryanAdamss/monorepo-starter ;
Its a mono repo with storybook and jsdoc for vue2 compoent and lib development.

<!-- args定义参考:https://storybook.js.org/docs/vue/writing-stories/args -->
<!-- argTypes定义参考:https://storybook.js.org/docs/react/essentials/controls#annotation -->

import {
  Meta,
  Canvas,
  Story,
  ArgsTable,
  Description
} from '@storybook/addon-docs/blocks'
import BaButton from '../src/button.vue'

<Meta
  title="Components/BaButton"
  component={BaButton}
  argTypes={{
    backgroundColor: { control: 'color' },
    size: { control: { type: 'select', options: ['small', 'medium', 'large'] } }
  }}
/>

<!-- 创建容器组件 -->

export const Template = (args, storyCtx) => ({
  // args包含storybook的所有参数，包含props、slots、listeners
  // storyCtx除了包含args外，还包含更多额外信息
  props: Object.keys(args), // 接收所有args上的参数，并将其定义为props，直接通过this可访问
  mounted() {
    console.log('storyCtx', storyCtx)
    // 修复component name错误
    const {
      parameters: {
        component: { name }
      }
    } = storyCtx
    this._vnode.tag = name || 'BaButton'
  },
  render(h) {
    return h(BaButton, {
      props: this.$props,
      scopedSlots: {
        // 默认插槽
        default: (props) => {
          // default通过args绑定到props上，所以可以通过this.props直接访问
          return this.default ? h(this.default, { props }) : void 0
        },
        // 具名插槽
        icon: (props) => {
          return this.icon ? h(this.icon, { props }) : void 0
        }
      }
    })
  }
})

# BaButton

<!-- 读取组件描述 -->

<Description of={BaButton} />

<Canvas>
  <Story
    name="Primary"
    args={{
      label: '按钮'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

<ArgsTable of={BaButton} />

## 尺寸

可以通过设置`size`控制按钮大小；可选值有`['small', 'medium', 'large']`；默认`medium`

<Canvas>
  <Story
    name="Large"
    args={{
      size: 'large',
      label: '大小'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## 颜色

可通过设置`backgroundColor`控制背景颜色；支持`hex、rgb、rgba、关键字`

<Canvas>
  <Story
    name="BgColor"
    args={{
      backgroundColor: 'red',
      label: '颜色'
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

## slot:icon

可通过`icon`插槽自定义图标样式

<!-- 由于story自动生成的code样例无法展示slot，建议通过docs.source.code手动定义 -->

<Canvas>
  <Story
    name="SlotIcon"
    args={{
      label: '按钮',
      icon: {
        // 以template形式声明组件
        template: '<span>x</span>'
      }
    }}
    parameters={{
      docs: {
        source: {
          code: `
<template>
  <BaButton>
    <template #icon>
      <span>x</span>
    </template>
  </BaButton>
</template>`
        }
      }
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

[BryanAdamss]

It works like this

[gangsthub]

Here's how I am doing it. It's a mix between @camslice's answer and vue-kitchen-sink's example:

Imagine you have this component:

<template>
  <button type="button">
    <slot />
  </button>
</template>

And this is how currently our stories in MDX look like:

import { Meta, Canvas, Story } from '@storybook/addon-docs'
import MyButton from './Button.vue'

<Meta title="Button" component={MyButton} />

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { MyButton },
  template: `
    <MyButton v-bind="filteredProps">
      ${args.slotTemplate}
    </MyButton>`,
  computed: {
    /*
      This excludes "slotTemplate" from props, so it's not shown
      on the "Show code" block as a prop.
     */
    filteredProps() {
      const { slotTemplate, ...props } = this.$props
      return props
    },
  },
})

# Button

These are our buttons:

<Canvas>
  <Story
    name="Basic"
    args={{
      slotTemplate: `Basic`,
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="Nested HTML"
    args={{
      slotTemplate: `<span>Some text <em> with nested <strong>HTML</strong></em></span>`,
    }}
  >
    {Template.bind({})}
  </Story>
  <Story
    name="Disabled"
    args={{
      slotTemplate: `Can't click me :(`,
      disabled: true,
    }}
  >
    {Template.bind({})}
  </Story>
</Canvas>

This is the result: The component's code is wrapped in a <template>, but that's a fair trade-off for us:

💡

• For an alternative solution, using argTypes + v-slot, instead of args, check this article: https://highlandsolutions.com/blog/stop-designing-components-in-your-vue-application

[anhance]

This solution works for now, but as mentioned above in comments, you can edit only in "Docs"

import BaseButton from './BaseButton.vue'

export default {
  title: 'UI/button/BaseButton',
  component: BaseButton,
  argTypes: {
    default: {
      control: {
        type: 'text'
      },
      defaultValue: 'Button'
    },
    label: {
      control: {
        type: 'text'
      },
      defaultValue: 'Label'
    }
  }
}

export const BaseButtonComponent = (args, { argTypes }) => ({
  components: { BaseButton },
  props: Object.keys(argTypes),
  template: `
    <base-button v-bind="$props">
      <template v-if="${'default' in args}">${args.default}</template>
      <template v-if="${'label' in args}" v-slot:label>${args.label}</template>
    </base-button>
  `
})

[Davo911]

Only way I got it working as I wanted to was with v-html:

const Template = (args: any) => ({
  components: { ... },
  setup() {
    return { args };
  },
  template: `<widget v-bind="args" > ` +
    `<template v-if="${'slotLeft' in args}"   #left><div v-html="args.slotLeft"/></template> ` +
    `<template v-if="${'slotRight' in args}"  #right><div v-html="args.slotRight"/></template> ` +
    `<template v-if="${'slotBottom' in args}" #bottom><div v-html="args.slotBottom"/></template> ` +
    ' </dt-widget-header>',
});

export const Default: Story = Template.bind({});
Default.args = {
  //PROPS
  ...,

  //SLOTS
  slotLeft: '<span>LEFT SLOT</span>',
  slotRight: '<span>RIGHT SLOT</span>',
  slotBottom: '<span>BOTTOM SLOT</span>',

}

[Christo44]

Good idea, here's another similar way:

<widget>
<template v-if="${'suffix' in args}" #suffix>
    {{args.suffix}}
  </template>
</widget>

[yooouuri]

Another solution

import { Meta, Story } from '@storybook/vue3'
import { defineComponent, h } from 'vue'

...

const Template: Story<typeof Component> = (args) =>
  defineComponent({
    components: {
      Component,
    },
    setup() {
      const slots = Object.keys(args.slots).reduce((prev, curr) => {
        if (typeof args.slots[curr] === 'string') {
          return { ...prev, ...{ [curr]: () => args.slots[curr] } }
        }

        return { ...prev, ...{ [curr]: () => h(args.slots[curr]) } }
      }, {})

      return function () {
        return h(
          Component,
          {
            ...args.props,
          },
          slots
        )
      }
    },
  })

export const Default = Template.bind({})
Default.args = {
  props: {
    search: true,
    searchPlaceholder: 'Zoek product',
    addButton: true,
  },
  slots: {
    button: 'Nieuw product1', // string is a valid VNode
    sort: { // everything else lets wrap it into a h
      data() {
        return {
          test: '1',
        }
      },
      template: `{{ test }}`,
    },
  },
}

[luckylooke]

I have simplified template for multislots components.

<my-button v-bind="args">
        <template v-for="[name, content] in args.slots" #[name]>
            {{ content }}
        </template>
</my-button>

then you have several options how to fill in slots

// PrependSlot.args = { slots: Object.entries({ prepend: '#' })};
// PrependSlot.args = { slots: new Map([['prepend', '#']])};
PrependSlot.args = { slots: [['prepend', '# ']]};
// etc..

Happy coding :)

[avivday2]

Best way I found:

export const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes).filter((key) => {
    const excludedSlots = ["default"]; /** define all of the excluded slots (or even props if you want)*/
    return !excludedSlots.includes(key); /** exclude ** /
  }),
  components: { MyButton },
  template: `<MyButton v-bind="$props" @click="click" @contextmenu="contextmenu">
      ${args.default}
  </MyButton>`,
});

[sherif414]

is this fixed in storybook 7?
i tried some of the solutions above but they don't work well with typescript

[Davo911]

I can confirm, that the v-html version works finde with typescript

[sherif414]

i can't change the form control element from object to text without getting typescript errors
argTypes: { size: { control: 'select', options: ['sm', 'md', 'lg'], defaultValue: 'md' }, default: {control: 'text'} },
here typescript complains Object literal may only specify known properties, and 'default' does not exist in type

[matthew-dean]

Did anyone get this working with TypeScript?

[JoJk0]

I'm working at wrapper type that I can wrap typeof MyComponent to append slots as props to the component type.

[JoJk0]

export type SlottedMeta<TComponent extends abstract new (...args: any) => any, TSlots extends string> = Meta<DefineComponent<InstanceType<TComponent>['$props'] & Record<TSlots, string>>>

Use it instead of Meta like ... } satisfies SlottedMeta<typeof MyComponent, 'default'|'mySlot'>