How do I access the Vue3 Application Instance from a Storybook Story?

Question

I have a simple component that requires the following to setup globally...

const app = createApp(App);
app.config.globalProperties.Icons = Icons;

However, when I am constructing my Storybook story file I am unsure how to access the config property of the Vue Application Instance.

Is there a way I can set this in a Vue3 Storybook Story?

Petua

Answer 1

Per the docs

1. created file named storybook/preview.js

2. Added the following....

   import { app } from '@storybook/vue3';
   app.config.globalProperties.Icons = Icons;
   

Petua

would love to see how to access and modify app correctly for a specific story in the docs.. could not find it anywhere – Intonation

This no longer works. @storybook/vue3 does not export app anymore. There doesn't seem to be any way of getting the app instance now. – Adali

Answer 2

Since storybook 7 @Jackie 's answer wont 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. for example to use Motion Plugin from vueuse you can use the code below:

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

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

Mood