💻

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

2024/09/29に公開

Nuxt

おはこんにちばんわ。
今回は、Vue.jsのフォームライブラリであるFormKitをStorybookで使う（表示させる）方法を共有させていただきます。
https://formkit.com/
https://storybook.js.org/
内容は非常に簡単なものですが、調べても公式ドキュメントにも無く、ちょっとだけ詰まったので。。。
追記）この辺りを見れば分かったのかな。。。
※ FormKitやStorybookについての詳しい説明は割愛させていただきます。

 環境と使用ライブラリ、フレームワーク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に導入しなければならないとき、ドキュメントとかに導入方法が記載されていなけば、このような方法でうまく導入することができるんかなー、と考えました。
最後までお読みいただき、ありがとうございました。

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

設定方法

終わりに

Discussion