環境と使用ライブラリ、フレームワーク

macOS Sequoia: 15.0
Google Chrome: 129.0.6668.58
nuxt: ^3.13.0
vue: ~3.5.6
formkit/nuxt: ^1.6.7
@storybook/vue3: ^8.3.2
@storybook/vue3-vite: ^8.3.2

設定方法

いきなり結論ですが、以下のStorybookの（デフォルト設定を変えていなければ）設定ファイルなどが置かれている.storybook/preview.tsに追記を行いました。

// .storybook/preview.ts

import type { Preview } from '@storybook/vue3';
import { setup } from '@storybook/vue3';
import { plugin, defaultConfig } from '@formkit/vue';

+ setup((app) => {
+   app.use(plugin, defaultConfig());
+ });

const preview: Preview = {
    // ~~~関係無いので省略
};

export default preview;

これだけの設定で、StorybookにFormKitコンポーネントを表示することができました。

ただ、もう少し発展させると、FormKitのconfigはStorybookだけに設定されるものではありません。
もちろんVueコンポーネントで配置されるFormKitコンポーネントにも同様の設定が適用されることが正しいことになります。
なので、ルートディレクトリに共通して持たせておいた方が良いかと思いましたので、もう少し手を加えたのが、以下になります。

// .storybook/preview.ts

import type { Preview } from '@storybook/vue3';
import { setup } from '@storybook/vue3';
import { plugin } from '@formkit/vue';
import config from '../formkit.config.mjs';

+ setup((app) => {
+   app.use(plugin, config;
+ });

const preview: Preview = {
    // ~~~ 関係無いので省略
};

export default preview;

// formkit.config.mjs

import { defaultConfig } from '@formkit/vue';

export default defaultConfig({});

// nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    // ~~~ 関係無いので省略
    modules: ['@nuxt/eslint', '@formkit/nuxt'],
        formkit: {
            autoImport: true,
            defaultConfig: false,
        },
    }
    // ~~~ 関係無いので省略
);

やってることとしては、結局defaultConfigを使っているのですが、こうすることで、Storybook側のConfigとソースコンポーネント側のconfigを合わせて使うことができるかと思います。
設定を追加したくなったら、formkit.config.mjsだけを修正すれば良いわけですね！

終わりに

ということで、FormKitコンポーネントをStorybookに表示させる方法でした。

Nuxt.jsを使った時のサードパーティ製のライブラリをStorybookに導入しなければならないとき、ドキュメントとかに導入方法が記載されていなけば、このような方法でうまく導入することができるんかなー、と考えました。

最後までお読みいただき、ありがとうございました。

kostumブログ

勉強したことやノート代わりのアウトプットに使っています。

FormKitコンポーネントをStorybookに表示させる方法

環境と使用ライブラリ、フレームワーク

設定方法

終わりに