[Vuejs]-Use global Vue 3 plugins in Storybook stories?

by

3👍

✅

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 */
});
👤emelin

4👍

Since storybook 7, things have changed a little and emelin’s answer won’t work. in order to access app instance you should import setup instead and app would be passed as a parameter fed to setup’s callback, here is an example:

// .storybook/preview.js
import { MotionPlugin } from "@vueuse/motion";
import { setup } from "@storybook/vue3";

setup((app) => {
    app.use(MotionPlugin);
});
👤Pooya Estakhri

0👍

The new release of Storybook introduces the use of setup instead of app. You can find more information about this change in the migration guide.

If you are currently using an older version (such as version 6), you can follow the solution provided in this Stack Overflow answer.

In summary, the changes are as follows:

For versions before 7:

import { app } from '@storybook/vue3';
import Button from './Button.vue';
app.component('GlobalButton', Button);
app.use(MyPlugin);

For version 7 and later:

import { setup } from '@storybook/vue3';
import Button from './Button.vue';

setup((app) => {
  app.component('GlobalButton', Button);
  app.use(MyPlugin);
});

Please make sure to adapt your code accordingly based on the version of Storybook you are using.

👤RodKot

Leave a comment