Internationalization

Customize all UI text for internationalization or branding.

Available Labels

QuickForms provides customizable labels for all UI text:

interface FormLabels {
  selectPlaceholder?: string  // Default: "Select an option..."
  addItem?: string            // Default: "Add item"
  removeItem?: string         // Default: "Remove"
  submit?: string             // Default: "Submit"
  showPassword?: string       // Default: "Show password"
  hidePassword?: string       // Default: "Hide password"
}

Basic Example

<script setup lang="ts">
import { ref } from 'vue'
import { DynamicForm } from '@quickflo/quickforms-vue'

const spanishLabels = {
  selectPlaceholder: 'Seleccionar una opción...',
  addItem: 'Agregar elemento',
  removeItem: 'Eliminar',
  submit: 'Enviar',
  showPassword: 'Mostrar contraseña',
  hidePassword: 'Ocultar contraseña'
}

const formData = ref({})
</script>

<template>
  <DynamicForm
    :schema="schema"
    v-model="formData"
    :options="{ labels: spanishLabels }"
  />
</template>

With Vue i18n

Integrate with Vue's i18n plugin:

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const labels = {
  selectPlaceholder: t('forms.selectPlaceholder'),
  addItem: t('forms.addItem'),
  removeItem: t('forms.removeItem'),
  submit: t('forms.submit'),
  showPassword: t('forms.showPassword'),
  hidePassword: t('forms.hidePassword')
}
</script>

<template>
  <DynamicForm
    :schema="schema"
    v-model="formData"
    :options="{ labels }"
  />
</template>

Reactive Labels

Labels can be reactive:

<script setup lang="ts">
import { computed } from 'vue'

const locale = ref('en')

const labels = computed(() => {
  if (locale.value === 'es') {
    return {
      selectPlaceholder: 'Seleccionar una opción...',
      addItem: 'Agregar elemento',
      removeItem: 'Eliminar'
    }
  }
  return {
    selectPlaceholder: 'Select an option...',
    addItem: 'Add item',
    removeItem: 'Remove'
  }
})
</script>

<template>
  <DynamicForm :options="{ labels }" />
</template>

Field Titles and Descriptions

Field-level text comes from the schema:

const schema = {
  type: 'object',
  properties: {
    name: {
      type: 'string',
      title: 'Nombre completo',        // Spanish title
      description: 'Ingrese su nombre'  // Spanish description
    }
  }
}

Error Messages

Customize validation error messages per language:

const spanishOptions = {
  labels: spanishLabels,
  errorMessages: {
    email: {
      required: 'El correo electrónico es obligatorio',
      format: 'Formato de correo electrónico no válido'
    },
    password: {
      minLength: 'La contraseña debe tener al menos 8 caracteres'
    }
  }
}

Global Configuration

For multiple forms, create a reusable configuration:

// i18n/quickforms.ts
export const quickformsI18n = {
  en: {
    selectPlaceholder: 'Select an option...',
    addItem: 'Add item',
    removeItem: 'Remove',
    submit: 'Submit',
    showPassword: 'Show password',
    hidePassword: 'Hide password'
  },
  es: {
    selectPlaceholder: 'Seleccionar una opción...',
    addItem: 'Agregar elemento',
    removeItem: 'Eliminar',
    submit: 'Enviar',
    showPassword: 'Mostrar contraseña',
    hidePassword: 'Ocultar contraseña'
  },
  fr: {
    selectPlaceholder: 'Sélectionner une option...',
    addItem: 'Ajouter un élément',
    removeItem: 'Supprimer',
    submit: 'Soumettre',
    showPassword: 'Afficher le mot de passe',
    hidePassword: 'Masquer le mot de passe'
  }
}

// Usage
import { quickformsI18n } from './i18n/quickforms'

const labels = quickformsI18n[currentLocale.value]

Quasar Integration

For Quasar users, labels integrate with Quasar's i18n:

import { useQuasar } from 'quasar'

const $q = useQuasar()

const labels = computed(() => quickformsI18n[$q.lang.getLocale()])

Next Steps

• Form Options API - Complete labels reference
• Validation - Custom error messages