代码之家 › 专栏 › 技术社区 › thisismydesign

如何将`vuelidate`i18n`与`@nuxtjs/i18n`一起使用?

nuxt-i18n vuelidate nuxtjs3 nuxt.js typescript

0

thisismydesign · 技术社区 · 2 年前

我不知道如何遵循 docs 在Nuxt(v3或网桥)的上下文中。不确定在哪里 i18n 将来自组件外部。

另请参阅:

1 回复 | 直到 2 年前

1

0

thisismydesign 1 年前

在桥接和组合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)

手动添加翻译(甚至是英文翻译),例如。 validations.required .