Skip to content


A Wrapper allows you to render things around the displayed story/variant.

In your setup file, you can add wrapper components with addWrapper:

import { defineSetupVue3 } from '@histoire/plugin-vue'
import WrapperGlobal from './histoire/GlobalWrapper.vue'

export const setupVue3 = defineSetupVue3(({ addWrapper }) => {

The rendering will recursively occur in all the wrappers default slot.

Here is an example for a wrapper component:

<script lang="ts" setup>
import { Story, Variant } from 'histoire'

const props = defineProps<{
  story: Story
  variant?: Variant

function hasWrapper() {
  return props.story.meta?.wrapper !== false
    && props.variant?.meta?.wrapper !== false

    :style="hasWrapper() ? 'padding: 0.25rem; border: solid 1px rgba(0, 0, 0, 0.05);' : ''"
    <slot />

Now, all stories and variants will be rendered with a small padding and a border.

In the above example, we also use the meta prop to allow disabling the wrapper style:

    <Variant title="With wrapper">
      title="Without wrapper"
      :meta="{ wrapper: false }"

Released under the MIT License.