Nuxt 3 和@nuxtjs/i18n

Question

我想给你一些建议。 使用 Nuxt 3 和 @nuxtjs/i18n。有一个名为 services/brand.ts

的文件

import { ref } from 'vue'

export function getBrands() {
const brands = ref([
{
headline: this.$t('brakes') - NOT WORKING
headline: t('brakes') - NOT WORKING
},
]);

return brands
}

我该如何翻译它？

Answer 1

看来您从错误的角度看待这个问题。

vue-i18n 配置和

$t

只能从 vue 文件访问。如果不重复配置，你将无法使用 i18n，我不会推荐它。

您可以从模板本身渲染该字符串，仅返回翻译键

<script setup>
const brands = getBrands()
</script>
<template>
  <h1 v-for="brand in brands">{{ $t(brand.headline) }}</h1>
</template>

或者，您也可以使用 i18n 的可组合项来使用设置脚本函数中的

t

函数：

const { t } = useI18n()

Answer 2

不久前我也遇到了同样的困难，尽管我使用的是 Nuxt 3 和 Vuetify 3，并且我已将 i18n 配置为 Vuetify 的适配器。为了能够使用翻译功能，我创建了一个 i18n 配置文件，将该文件导入到 Vuetify 插件定义中，并将其用作适配器。

i18n.ts：

import {createI18n} from "vue-i18n";
import messages from "./messages";

const i18n = createI18n({
    legacy: false,
    locale: 'en',
    messages
});

export default i18n;

vuetify.ts

import i18n from "./i18n";
import {useI18n} from "vue-i18n";
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
    const config: VuetifyOptions = {
        components, directives,
        locale: {
            adapter: createVueI18nAdapter({i18n, useI18n})
        }
    }
    const vuetify = createVuetify(config)

    nuxtApp.vueApp.use(vuetify)
})

为了使用i18n提供的翻译功能，我从i18n.ts文件中导入了i18n实例，并按如下方式使用：

import i18n from "./i18n";

console.log(i18n.global.t('key'))

Answer 3

不再提供 createVueI18nAdapter 函数。该怎么办？