Vue.jsのバージョンを2→3に上げるといくつかの壁にぶち当たります。その中の一つに多言語ライブラリのVueI18nの中の、翻訳API（$tおよびt関数）が文字列のみを返すようになったことがあります。
これにより、これらの関数にオブジェクトや配列を渡すとSyntaxError: Invalid argumentエラーが発生します。
エラーの原因
VueI18nの以前のバージョンでは、$tやt関数にオブジェクトや配列を渡すことが可能でした。しかし、Vue 3とVueI18nの最新バージョンでは、これらの関数は文字列のみを返すように変更されています。この変更は、VueI18nの公式マイグレーションガイドに明記されています。
暫定的な解決策
このエラーの暫定的な解決策の一つは、オブジェクトをString()でラップすることです。この方法は、オブジェクトを文字列に変換し、$tやt関数に渡すことでエラーを回避できます。
let myObject = { hello: 'world' };
this.$t(String(myObject));$tmを使う
VueI18nのv.9.0.0からは$tm関数も提供しており、これはオブジェクトや配列を返すことができます。これにより、$tやt関数の代わりに$tm関数を使用してオブジェクトや配列を渡すことができます。
let message = this.$tm('messageKey');関連記事
