Translate a Vue App into Spanish

What changes when your Vue strings go Spanish

Spanish runs noticeably longer than English, roughly as long as French. In a Vue interface the short strings suffer first: Save becomes Guardar, Sign in becomes Iniciar sesión, Settings becomes Configuración. Fixed-width buttons, tabs, badges and table headers are where text overflows or wraps.

Punctuation works differently too. Questions and exclamations open with an inverted mark: ¿Eliminar este proyecto?, ¡Cambios guardados!. If your code appends the question mark itself, for instance $t('confirm.delete') + '?', the opening mark has nowhere to go. Keep the whole sentence inside the message value.

Then there is register. Spanish UI copy uses either tú or usted: Introduce tu correo versus Introduzca su correo. Informal address is common in consumer apps; formal address suits banking, public services and B2B tools. Pick one before translating and keep it consistent across the file.

vue-i18n plurals and placeholders in Spanish

vue-i18n separates plural forms with a pipe. A value such as no hay archivos | un archivo | {count} archivos works well in Spanish with the default zero, one, many logic. Manuce keeps the pipe-separated forms and the same number of forms as the source.

CLDR gives Spanish three categories: one, many and other. The many category mainly covers large round numbers, where Spanish inserts de: 1 millón de usuarios. If your app shows counters like that, handle it with a custom plural rule in your vue-i18n configuration rather than in the message file.

Placeholders need more care than in English because of grammatical gender:

• Welcome, {name} becomes Bienvenido, {name} or Bienvenida, {name}. A neutral phrasing such as Te damos la bienvenida, {name} sidesteps the issue.
• {user} added {count} files becomes {user} ha añadido {count} archivos: named placeholders can move freely, which is exactly why they are worth using.
• Sentences assembled from several keys (an adjective in one, a noun in another) break gender and number agreement. Merge them into a single value before uploading.

Spain or Latin America: structuring your locales

Tech vocabulary depends on the audience: ordenador in Spain, computadora in Mexico; móvil or celular; sometimes fichero in Spain where Latin America says archivo. The vosotros form only exists in Spain, so ¿Queréis continuar? will sound foreign to users in Buenos Aires or Bogotá.

In a Vue project, two set-ups are common:

• a single es.json written in Spanish that is as neutral as possible, for a spread-out audience;
• a base es.json plus es-ES or es-MX files that only override the keys that differ, with fallbackLocale pointing to es.

Number and date formats are not set in the message file but in the vue-i18n options: Spain writes 1.234,50, Mexico 1,234.50. Check these settings for each variant you ship.

What Manuce returns, and what it does not do

You get back the same vue-i18n JSON file, in the same format, ready to put back into the project:

• indentation, key order, quotes, comments, line endings, encoding and BOM preserved; only the values change;
• {name} placeholders and | plural forms preserved;
• each translated value checked against the source (placeholders, tags); if a mismatch persists, the source value is kept and the report says so;
• a report listing translated strings, strings left untouched and why.

Not translated: keys, empty values, URLs, email addresses, numbers, colours, date formats, identifiers and anything you have marked as non-translatable. Pricing is based on the words in the values, excluding keys and tags.

Manuce works on JSON files. If your messages live in <i18n> blocks inside .vue components or in a JavaScript object, gather them into a JSON file first. Registering the es locale in your configuration, custom plural rules and layout testing remain on your side. For strings your users will see, the Professional level is the sensible choice.

Preparing the file and checking the result

Before uploading:

• start from your most complete reference file, usually en.json;
• mark brand, product and plan names as non-translatable;
• remove key concatenation and punctuation added in code;
• settle the register (tú or usted) and the target variant.

After delivery:

• read the report and deal with any values left in the source language;
• run the app with the es locale and go through the busiest screens: navigation bars, forms, confirmation dialogs;
• test plurals with 0, 1 and several items;
• check that linked messages such as @:common.save still point to existing keys;
• make sure every ? and ! has its opening ¿ or ¡.

In practice

1. Export your vue-i18n messages to a JSON file, pulling them out of component <i18n> blocks if needed.
2. Mark brand names as non-translatable and merge sentences split across several keys.
3. Upload the file, review the instant quote and the free Spanish sample paragraph.
4. Download the translated file and report, then save it as es.json in your locales folder.
5. Test the app in Spanish: label length, plurals, and the ¿ and ¡ marks.