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

Question

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

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

FormKit 在我的 main.ts 中全局安装，如下所示：

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

但是这个文件没有被 Storybook 使用...那么我怎样才能对 Storybook 做同样的事情呢？

Answer 1

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

我了解到您可以通过从@storybook/vue3.

导入 Storybook 在 .storybook/preview.js 中创建的应用程序来访问它。

例子是从上面复制的link:

// .storybook/preview.js

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

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

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

Use global Vue 3 plugins in Storybook stories?

vue.js

storybook

vuejs3