CODEWITHSUNDEEP
typescriptnuxt.jsnuxt3.jsvuelidatenuxt-i18n
thisismydesign
thisismydesign

Reputation: 25152

How to use `vuelidate` i18n with `@nuxtjs/i18n`?

I'm not sure how to follow the docs in the context of Nuxt (v3 or bridge). Not sure where i18n would come from outside of a component.

See also:

Upvotes: 0

Views: 637

Answers (1)

thisismydesign
thisismydesign

Reputation: 25152

In Bridge and composition API i18n comes from useNuxtApp:

const { $i18n } = useNuxtApp()

But this only works if all components use composition API. If not, i18n can be passed as a workaround:

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)

Manually add translations (even english ones), e.g. validations.required.

Upvotes: 0

Related Questions