i18n

Framework-Agnostic

The i18n key conventions and domain translations described on this page are framework-agnostic. The same translation structure works in React Native, React Web, Vue, and Svelte. Only the configureI18n import differs between framework packages.

Your schema is defined, the base i18n is already working — action buttons, table UI, dialogs, and validation messages are all translated. Now it's time to add labels for the fields and groups you just created.

Domain Translations

Create a locale file with labels matching your schema's field names and group names:

// src/settings/locales/pt-BR.ts
export const ptBR = {
  product: {
    title: 'Product',
    fields: {
      id: 'ID',
      name: 'Name',
      sku: 'SKU',
      email: 'Email',
      active: 'Active',
      quantity: 'Quantity',
      price: 'Price',
    },
    groups: {
      info: 'Information',
      pricing: 'Pricing',
    },
  },
}

Each key maps directly to what you defined in the schema — name here is the name: text() field, info is the info: group() group.

Configuring i18n

@ybyra/vue-quasar provides configureI18n which creates a vue-i18n instance:

// src/settings/i18n.ts
import { ptBR } from '@ybyra/core'
import { configureI18n } from '@ybyra/vue-quasar'
import { ptBR as local } from './locales/pt-BR'

export const i18n = configureI18n({
  locale: 'pt-BR',
  messages: {
    'pt-BR': { ...ptBR, ...local } as Record<string, unknown>,
  },
})

The spread { ...ptBR, ...local } keeps all base keys and adds your domain-specific ones on top. The returned i18n instance must be installed in your Vue app:

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { i18n } from './settings/i18n'

createApp(App).use(i18n).mount('#app')

What the Base Provides

The ptBR export from @ybyra/core includes two namespaces:

common.* — UI chrome shared across all domains:

Key	Example
common.actions.add	"Adicionar"
common.actions.create	"Criar"
common.actions.create.success	"Registro criado com sucesso"
common.actions.destroy.confirm	"Deseja realmente excluir este registro?"
common.table.empty	"Nenhum registro encontrado"
common.table.page	"Página de "
common.dialog.confirm	"Confirmar"
common.scopes.index	"Listagem"

validation.* — validation error messages:

Key	Example
validation.required	"Campo obrigatório"
validation.minLength	"Mínimo de caracteres"
validation.min	"Valor mínimo é "
validation.pattern	"Formato inválido"

You don't need to write any of these — they come ready with @ybyra/core.

Key Conventions

Ybyra resolves labels automatically using this convention:

Pattern	Resolves to	Example
{domain}.title	Page title	product.title → "Product"
{domain}.fields.{field}	Field label	product.fields.name → "Name"
{domain}.fields.{field}[{state}]	Field label for a state	product.fields.email[error] → "Invalid email"
{domain}.groups.{group}	Group title	product.groups.info → "Information"
common.actions.{action}	Action button label	common.actions.add → "Adicionar"
common.scopes.{scope}	Scope name (used in page titles)	common.scopes.add → "Cadastro"

You never hardcode labels in your schema — define the fields and groups, then create the matching translation keys.

Next Steps

• Screens — build the 4 CRUD screens