i18n

Wizard of Zod has been created with basic i18n support.

Boilerplate i18n

All text you see in the Wizard of Zod boilerplate templates support i18n.

If you want to change the language of the questions inside your form schemas please see the "Form Schema" section below.

Available Languages

We currently only support 2 languages out of the box. 🇬🇧 English and 🇫🇷 French.

We plan to add more languages throughout the lifetime of this package.

English

{
    answer: 'Answer',
    cancel: 'Cancel',
    complete: 'Complete',
    formXofY: 'Form {currentQuestion} of {totalForms}',
    next: 'Next',
    noQuestions: 'You have not provided any questions.',
    noQuestionsAvailable: 'No questions available.',
    preSubmitNotice: 'You are about to submit the following information.',
    preview: 'Preview',
    previous: 'Previous',
    question: 'Question',
    submit: 'Submit',
    update: 'Update'
}

French

{
    answer: 'Répondre',
    cancel: 'Annuler',
    complete: 'Complet',
    formXofY: 'Formulaire {currentQuestion} de {totalForms}',
    next: 'Suivant',
    noQuestions: 'Vous n\'avez posé aucune question.',
    noQuestionsAvailable: 'Aucune question disponible.',
    preSubmitNotice: 'Vous êtes sur le point de soumettre les informations suivantes.',
    preview: 'Aperçu',
    previous: 'Précédent',
    question: 'Question',
    submit: 'Soumettre',
    update: 'Mettre à Jour'
}

Add A New Language

If you have a specific request for a new language, please feel free to ask or even better - contribute one yourself by following our contribution guidelines and cloning the /src/i18n/en.ts file, making the appropriate changes for your ISO 3166-1 alpha-2 country code.

TIP

If you can't make a contribution or can't wait for us to put your language in place, refer to our customI18n prop which allows you to provide your own custom language translations at runtime.

Form Schema i18n

Wizard of Zod does not automatically translate the questions within your form schemas. You do this at runtime by providing your translated questions in the Forms prop.

Example

German

<script setup lang='ts'>
import { z } from 'zod'
import Wizard, { type Form } from 'wizard-of-zod'

const forms: Form<z.ZodObject<any>>[] = [
  {
    schema: z.object({
      givenName: z.string().describe('Wie lautet ihr vorname?') 
    })
  },
  {
    schema: z.object({
      familyName: z.string().describe('Wie lautet ihr familienname?') 
    })
  }, 
  {
    schema: z.object({
      gender: z.enum(['männlich', 'weiblich']).describe('Was ist dein geschlecht?') 
    })
  }
]

const handleCompleted = (data: Record<string, any>) => {
  console.log(data)
}
</script>

<template>
  <Wizard
    :forms="forms"
    @completed="handleCompleted"
  />
</template>

Italian

<script setup lang='ts'>
import { z } from 'zod'
import Wizard, { type Form } from 'wizard-of-zod'

const forms: Form<z.ZodObject<any>>[] = [
  {
    schema: z.object({
      givenName: z.string().describe('Qual è il tuo nome?') 
    })
  },
  {
    schema: z.object({
      familyName: z.string().describe('Qual è il tuo cognome?') 
    })
  }, 
  {
    schema: z.object({
      gender: z.enum(['maschio', 'femmina']).describe('Qual è il tuo sesso?') 
    })
  }
]

const handleCompleted = (data: Record<string, any>) => {
  console.log(data)
}
</script>

<template>
  <Wizard
    :forms="forms"
    @completed="handleCompleted"
  />
</template>

TIP

If you are using static form schemas, my recommendation is to store them in a folder inside your codebase and import them at runtime as required.

.
├─ App.vue
|  etc...
└─ src/
   ├─ components/
   └─ forms/
      ├─ en/
      |  └─ survey.ts
      └─ fr/
         └─ survey.ts

RTL Support

RTL languages are not currently supported but I do plan on supporting them in a future release. Please stay tuned.