Vue3 + Storybookでi18nを動かす

Vue３とStorybookでi18nを使えるようにした記事です。

とある日の私はVueプロジェクトにStorybookを導入してちょっといい気分になっていたのですが、i18nの$t()を使っているコンポーネントがStorybookで動かせないのに気が付きました。ブラウザに下記のようなエラーが表示されます。

_ctx.$t is not a function
TypeError: _ctx.$t is not a function

VueのプラグインはStorybookでは動かないのだなと。Storybook用にプラグインを読み込めば良いだろうと思いましたが、どこに書けば良いのかわからなくてけっこう困りました。まあググれば解決するんですけども。GitHubにそのものずばりなイシューがありました。

.storybook/preview.jsにapp.use()を書けば良いようです。下記のようなものを書いて無事動きました！素晴らしい。

.storybook/preview.js

import { app } from '@storybook/vue3'
import { createI18n } from 'vue-i18n'
import messages from 'messages'

const i18n = createI18n({
  locale: 'ja',
  messages
})

app.use(i18n)

どうということの無い内容ですがググっても日本語の情報がなかったので書いてみました。みなさまにはさくっとこの記事にたどり着いて解決してほしいです。ではでは。