Storybook で Vue3 (Typescript) と HTML を混在させる

久しぶりの技術小ネタ更新です。Storybook はUIテストとドキュメント作成を同時に行える便利なツールで、弊社でもフロントエンド開発に活用しています。弊社では Concrete CMS のUIライブラリにも採用されていることから、Vue.js を使用することが多いので、Storybook を Vue 用にセットアップしています。しかし、CMS を使ったWebサイト制作というプロジェクトの特性上、例えばWYSIWYGエディタ内で使いたいUIパーツなど、一部は HTML でUIコンポーネントを作りたいことがあります。そういった時に同居させる方法を考えてみましたのでご紹介です。 まず、HTMLファイルはそのままでは TypeScript でインポートできませんので、拡張子 .html をモジュールとして認識させてやります。 *.d.ts に以下のようなモジュール定義を追加します。