在Storybook故事中使用全局Vue 3插件?

Question

如何在Storybook故事中使用Vue 3插件?

例如，我使用FormKit在我的组件中创建表单元素。

FormKit在我的main中被全局操纵。是这样的:

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

但是这个文件没有被Storybook使用…那么我该如何为Storybook做同样的事情呢?

Answer 1

从故事书第7章开始，事情发生了一些变化，emelin的答案不成立了。为了访问应用程序实例，你应该导入setup，而app将作为参数传递给setup的回调，这里是一个例子:

// .storybook/preview.js
import { MotionPlugin } from "@vueuse/motion";
import { setup } from "@storybook/vue3";
setup((app) => {
app.use(MotionPlugin);
});

Answer 2

我可以在这里找到文档:https://github.com/storybookjs/storybook/tree/47f753f5e8d084b4d544cf1ec76077a9382aa6b2/app/vue3

我了解到你可以通过从@storybook/vue3导入Storybook在.storybook/preview.js中创建的应用程序。

示例复制自上面的链接:

// .storybook/preview.js
import { app } from '@storybook/vue3';
app.use(MyPlugin);
app.component('my-component', MyComponent);
app.mixin({
/* My mixin */
});

Answer 3

新版Storybook引入了setup而不是app的使用。您可以在迁移指南中找到有关此更改的更多信息。

如果您当前使用的是较旧的版本(例如版本6)，您可以遵循此堆栈溢出回答中提供的解决方案。

总的来说，变化如下:

对于7之前的版本:

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

对于版本7及以后的版本:

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

请确保根据您使用的故事书版本相应地调整您的代码。