typescript 如何使用`vuelidate` i18 n与`@nuxtjs/i18 n`?

yc0p9oo0  于 2023-05-01  发布在  TypeScript
关注(0)|答案(1)|浏览(257)

我不知道如何在Nuxt(v3或bridge)的上下文中遵循文档。不确定i18n来自组件之外的何处。
参见:

niknxzdl

niknxzdl1#

在Bridge和composition API中,i18n来自useNuxtApp

const { $i18n } = useNuxtApp()

但这只有在所有组件都使用组合API时才有效。如果没有,可以通过i18n作为解决方案:
helpers/i18n-validators.ts

import * as validators from '@vuelidate/validators'
import { NuxtI18nInstance } from '@nuxtjs/i18n'

export const createRequired = (i18n: NuxtI18nInstance) => {
  const { createI18nMessage } = validators
  // It works™
  // @ts-ignore
  const withI18nMessage = createI18nMessage({ t: i18n.t.bind(i18n) })

  return withI18nMessage(validators.required)
}

Component.vue

import { createRequired } from '@/helpers/i18n-validators'
const required = createRequired($i18n)

手动添加翻译(甚至英语),e.例如validations.required

相关问题