App setup

Global setup

You can define a setup function globally in your setup file defined by the setupFile option in the global configuration (learn more).

For Vue, it must be called setupVue. Poveste provides an optional defineSetupVue helper to have better types in your IDE:

import { defineSetupVue } from '@poveste/plugin-vue'
import { createPinia } from 'pinia'

export const setupVue = defineSetupVue(({ app, story, variant }) => {
  // Vue plugin
  app.use(createPinia())

  // Global component
  app.component('GlobalComponent', MyGlobalComponent)

  // Global property
  app.config.globalProperties.$t = key => translate(key)

  // Provide
  app.provide('key', 'meow')
})

TIP

You can also import global CSS files or JS files in this setup file.

Coming from setupVue3?

setupVue3 and defineSetupVue3 still work — nothing needs changing today. They are the original histoire-era names, kept because renaming an export people write in their own files cannot be done without breaking every existing setup.

Export one of the two, not both: they are aliases for the same hook, so Poveste runs the first it finds (setupVue3) and warns about the other rather than running your setup twice.

The numbered pair is supported for the whole of 0.x. 1.0 is the only release allowed to drop it, so moving across before then costs nothing and saves a migration later.

Local setup

Inside each story, you can define a setupApp prop that will be called by Poveste allowing you to configure the sandbox application as well. It will not override the global setup function, but will be called after it. It works the same way with the same parameters.

<script setup>
import InjectDemo from './InjectDemo.vue'

function mySetupApp ({ app, story, variant }) {
  app.provide('demo', 'meow')
}
</script>

<template>
  <Story title="Story setup">
    <Variant title="Global setup">
      <InjectDemo />
    </Variant>

    <Variant
      title="Local setup"
      :setup-app="mySetupApp"
    >
      <InjectDemo />
    </Variant>
  </Story>
</template>

You can put the prop on the <Story> component too, so that <Variant> will have a default value for it. Redefining the prop on a <Variant> will override the function though.

Examples

Vue Router

<script setup>
import { createRouter, createMemoryHistory } from 'vue-router'

function setupApp ({ app, story, variant }) {
  // Router mock
  app.use(createRouter({
    history: createMemoryHistory(),
    routes: [
      { path: '/', name: 'home', component: { render: () => null } },
    ],
  }))
}
</script>

<template>
  <Story
    title="Vue router example"
    :setup-app="setupApp"
  >
    <pre>{{ $route }}</pre>
  </Story>
</template>

Pinia

In global setup file:

import { createPinia } from 'pinia'
import { defineSetupVue } from '@poveste/plugin-vue'

export const setupVue = defineSetupVue(({ app, story, variant }) => {
  // Vue plugin
  app.use(createPinia())
})

In component:

<script setup>
import { useItemStore } from '../stores/item.js'

const itemStore = useItemStore()
</script>

<template>
  <pre>{{ itemStore.items }}</pre>
</template>

In story file:

<script setup>
import MyItems from './MyItems.vue'
</script>

<template>
  <Story
    title="Pinia example"
  >
    <MyItems />
  </Story>
</template>

Vuex

<script setup>
import { createStore } from 'vuex'

function setupApp ({ app, story, variant }) {
  // Store mock
  app.use(createStore({
    state: () => ({
      hello: 'meow',
    }),
  }))
}
</script>

<template>
  <Story
    title="Vuex example"
    :setup-app="setupApp"
  >
    <pre>{{ $store.state }}</pre>
  </Story>
</template>