Nuxt2(Bridge)からNuxt3にバージョンアップしたら$tでオブジェクトが取得できなくなったので、調査してみました。
先に結論を書くと、厳格化して？、$tmと$rtを使うようになったようです。
ブラウザコンソールのエラー
[intlify] Not found 'items.space' key in 'ja' locale messages.
使用バージョン
Nuxt2(Bridge)
yarn.lock
"@nuxtjs/i18n@^7.0.3":
version "7.2.2"
dependencies:
vue-i18n "^8.27.1"
Nuxt3
※後日、8.0.0-rc.3(9.3.0-beta.27)から8.0.0-rc.5(9.5.0)にバージョンアップ
yarn.lock
- "@nuxtjs/i18n@^8.0.0-rc.3":
+ "@nuxtjs/i18n@^8.0.0-rc.5":
- version "8.0.0-rc.3"
+ version "8.0.0-rc.5"
dependencies:
- vue-i18n "9.3.0-beta.27"
+ vue-i18n "9.5.0"
下記でインストールしたもの
% yarn add -D @nuxtjs/i18n@next
→ _ctx.$t is not a function（i18nを導入） -> Nuxt BridgeをNuxt3に移行。先ずはVuetifyでページが表示される所まで
コードとドキュメントを確認
Nuxt2(Bridge)
node_modules/vue-i18n/dist/vue-i18n.js
VueI18n.prototype._t = function _t (key, _locale, messages, host) {
VueI18n.prototype._te = function _te (key, locale, messages) {
VueI18n.prototype._d = function _d (value, locale, key) {
VueI18n.prototype._n = function _n (value, locale, key, options) {
Nuxt3
node_modules/vue-i18n/dist/vue-i18n.mjs
// t
function t(...args) {
// tm
function tm(key) {
// rt
function rt(...args) {
// te
function te(key, locale) {
// d
function d(...args) {
// n
function n(...args) {
tm(key) -> Composition API | Vue I18n
挙動を確認してみる
Options APIですが、
async created () {
console.log(this.$t('items.space')) // = items.space
※8.0.0-rc.3(9.3.0-beta.27)
console.log(this.$tm('items.space')) // = [{ text: '名称',・・・ },{ text: '説明',・・・ }]
※8.0.0-rc.5(9.5.0) でレスポンスが変更されている
console.log(this.$tm('items.space')) // = Proxy(Object) {0: { text: '名称',・・・ }, 1: { text: '説明',・・・ }}
※8.0.0-rc.3(9.3.0-beta.27)
for (const space of this.$tm('items.space')) {
console.log(this.$rt(space.text)) // = 名称, 説明
}
※8.0.0-rc.5(9.5.0)
for (const [_index, item] of Object.entries(this.$tm('items.space'))) {
console.log(this.$rt(item.text)) // = 名称, 説明
}
or
for (const item of Object.values(this.$tm('items.space'))) {
console.log(this.$rt(item.text)) // = 名称, 説明
}
$rtを通しても値は変わらないので、動的な値を入れたい場合以外は不要かも。
Composition APIでは、
※8.0.0-rc.5(9.5.0)
for (const [, item] of Object.entries($tm('items.space') as any) as any) {
console.log(item.text) // = 名称, 説明
}
or
for (const item of Object.values($tm('items.space') as any) as any) {
console.log(item.text) // = 名称, 説明
}
あまり使わなそうですが、存在確認もできる。
console.log(this.$te('items.space')) // = true
console.log(this.$te('items.space', 'ja')) // = true
console.log(this.$te('items.space', 'en')) // = false
.toLocaleStringと変わらないので、あまり使わなそうですが、こんなのもあるんですね。
console.log(this.$d(new Date())) // = 2023/9/27
console.log(this.$n(1234.56)) // = 1,234.56
メモ：配列←→連番のオブジェクト 相互変換
const data = [
{ text: '名称' },
{ text: '説明' }
]
console.log(data)
// 配列を連番のオブジェクトに変換
data2 = Object.assign({}, data)
console.log(data2)
// 連番のオブジェクトを配列に戻す
console.log(Object.values(data2))
> Array [Object { text: "名称" }, Object { text: "説明" }]
> Object { 0: Object { text: "名称" }, 1: Object { text: "説明" } }
> Array [Object { text: "名称" }, Object { text: "説明" }]
