Use global Vue 3 plugins in Storybook stories?

Question

How can I use a Vue 3 plugin in Storybook stories?

For example, I use FormKit to create form elements in my components.

FormKit is rigged globally in my main.ts like so:

import { plugin, defaultConfig } from '@formkit/vue'
const app = createApp(App)
app.use(plugin, defaultConfig)

but this file isn't used by Storybook... so how can I do the same for Storybook?

Answer 1

I was able to find documentation here: https://github.com/storybookjs/storybook/tree/47f753f5e8d084b4d544cf1ec76077a9382aa6b2/app/vue3

I learned that you are able to access the app created by Storybook in .storybook/preview.js by importing it from @storybook/vue3.

Example is copied from above link:

// .storybook/preview.js

import { app } from '@storybook/vue3';

app.use(MyPlugin);
app.component('my-component', MyComponent);
app.mixin({
  /* My mixin */
});