# How to Translate a Vue App With Vue I18n | Vitra.ai > Vue I18n is straightforward. The decisions that matter are global versus local messages, and whether the site needs to be crawlable for most banks. **Canonical URL**: https://www.vitra.ai/general/translate-a-vue-app **Source**: This is the Markdown rendering of https://www.vitra.ai/general/translate-a-vue-app, generated at build time from that page. --- 4 min read # How to Translate a Vue App With Vue I18n Vue I18n is straightforward. The decisions that matter are global versus local messages, and whether the site needs to be crawlable for most banks. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Senior Product Manager , Vitra.ai Updated Aug 17, 2026 ![How to Translate a Vue App With Vue I18n](https://www.vitra.ai/static/images/blog/translate-a-vue-app.jpg) Table of contents [Global or per-component messages](#global-or-per-component-messages) [Composition and Options API](#composition-and-options-api) [Message syntax carries real features](#message-syntax-carries-real-features) [Plurals need the right form count](#plurals-need-the-right-form-count) [If it is a public site](#if-it-is-a-public-site) [Keeping catalogues honest](#keeping-catalogues-honest) [Fallback chains](#fallback-chains) [SFC custom blocks](#sfc-custom-blocks) [Lazy loading the catalogues](#lazy-loading-the-catalogues) [Where to start](#where-to-start) [FAQ](#faq) Contributors [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Senior Product Manager Subscribe to our newsletter Subscribe > **Quick answer —** Vue I18n provides a global message catalogue, a composable for reading it and built-in plural and date formatting. The two decisions worth making early are where messages live and whether the app is a public site that has to be indexed. ## Global or per-component messages Vue I18n allows a single global catalogue or messages scoped to individual components. Both work and they solve different problems. Global keeps everything discoverable and makes extraction simple. Per-component keeps a component self-contained, which suits a design system or a large team, at the cost of strings scattered across the tree where no one can audit them. Pick one convention. Mixing them is how a project ends up unable to answer how many strings it has. ## Composition and Options API The composable and the options-based approach coexist, and a codebase in the middle of a migration will contain both. That is workable but it means two patterns for the same task, which new contributors get wrong. Standardise on one for new code. ## Message syntax carries real features Named and list interpolation, linked messages that reference another key, plural forms with pipe separation, and number and date formatting through `Intl`. Linked messages are the underused one. A product name defined once and referenced everywhere means renaming it is a single edit rather than a find-and-replace across fourteen catalogues. ## Plurals need the right form count Pipe-separated forms map to the target language's rules. English needs two; several languages need more, and a catalogue that supplies two for a six-form language falls back for the missing cases. ## If it is a public site A client-rendered Vue app has the same visibility problem as any other: the crawler may see an English shell. Server rendering through [Nuxt](https://www.vitra.ai/general/translate-a-nuxt-app), or a translation layer such as [website translation](https://www.vitra.ai/features/website-translation), is what puts translated HTML in front of a search engine. For an internal tool, none of that matters and the library alone is enough. ## Keeping catalogues honest Extraction from source, checked in CI, so a new string cannot ship without a catalogue entry. [translation memory](https://www.vitra.ai/features/translation-memory) then keeps each release's cost proportional to the diff, and [quality control](https://www.vitra.ai/features/quality-control) verifies interpolation tokens survived. Setup notes are on the [Vue integration](https://www.vitra.ai/integration/vuejs) page. ## Fallback chains Vue I18n supports a fallback locale, and a chain — Canadian French falling back to French, then to English. Configure it deliberately rather than letting every gap land on English. Silent fallback is convenient and it hides missing translations. Turn on the warning in development so a gap is visible to whoever introduced it. ## SFC custom blocks Single-file components can carry an i18n block holding their own messages. It is convenient and it scatters strings across the codebase, so decide as a team whether it is allowed before it appears in fifty components. ## Lazy loading the catalogues Shipping every language to every visitor is the default in a naive setup and it is pure waste. Load the active locale's messages asynchronously and fetch others only when a user switches. On a large application this is a meaningful bundle reduction, and it is far easier to build in from the start than to retrofit once the message files have grown. ## Where to start Render one page in the target language and view source. If the translated text is in the HTML, search engines can read it. If it only appears after hydration, it is a client-side render and needs the server side solved first. ## FAQ **Should Vue I18n messages be global or per-component?** Either works, but pick one. Global keeps strings discoverable and extraction simple; per-component keeps a component self-contained at the cost of strings scattered where nobody can audit them. **What are linked messages in Vue I18n?** Keys that reference another key, so a product name defined once can be reused everywhere. Renaming it then becomes a single edit rather than a find-and-replace across every catalogue. **How are plurals handled?** Through pipe-separated forms mapped to the target language's rules. English needs two forms and several languages need more, so supplying two for a six-form language leaves the rest falling back. **Does a Vue app need server rendering to rank?** If it is a public site, yes, or a translation layer serving translated HTML. A client-rendered app can present a crawler with an English shell no matter how complete the catalogue is. Our blog ## Lastest blog posts Tool and strategies modern teams need to help their companies grow. Automotive [Automotive Brochure Localization by Market](https://www.vitra.ai/automotive/automotive-brochure-localization) A car brochure is a spec grid, a legal footer and a photo library, all market-specific. What actually has to change, and why the layout decides the schedule. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 Automotive [Automotive Campaign Localization Across Markets](https://www.vitra.ai/automotive/automotive-campaign-localization) Campaigns run through national companies and dealer networks, so one master becomes hundreds of files. Where the offer text and the disclaimers actually break. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 Automotive [Car Service Manual Translation for Technicians](https://www.vitra.ai/automotive/automotive-service-manual-translation) A workshop manual is read mid-repair by someone with the car on a lift. What that demands of procedures, torque figures and fault codes, in every language. [Samhitha J Bhatt](https://www.vitra.ai/author/samhitha) Aug 18, 2026 [View all posts](https://www.vitra.ai/blog/page/1) --- ## Structured data ```json { "@context": "https://schema.org", "@type": "Article", "mainEntityOfPage": { "@type": "WebPage", "@id": "https://www.vitra.ai/general/translate-a-vue-app" }, "headline": "How to Translate a Vue App With Vue I18n", "image": [ { "@type": "ImageObject", "url": "https://www.vitra.ai/static/images/blog/translate-a-vue-app.jpg" } ], "datePublished": "2026-08-17T00:00:00.000Z", "dateModified": "2026-08-17T00:00:00.000Z", "author": [ { "@type": "Person", "name": "Samhitha J Bhatt" } ], "publisher": { "@type": "Organization", "name": "Vitra.ai", "logo": { "@type": "ImageObject", "url": "https://www.vitra.ai/static/images/vitra-v-logo.png" } }, "description": "Vue I18n is straightforward. The decisions that matter are global versus local messages, and whether the site needs to be crawlable for most banks." } ``` ```json { "@context": "https://schema.org", "@type": "BreadcrumbList", "itemListElement": [ { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://www.vitra.ai" }, { "@type": "ListItem", "position": 2, "name": "General", "item": "https://www.vitra.ai/general" }, { "@type": "ListItem", "position": 3, "name": "How to Translate a Vue App With Vue I18n", "item": "https://www.vitra.ai/general/translate-a-vue-app" } ] } ``` ```json { "@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [ { "@type": "Question", "name": "Should Vue I18n messages be global or per-component?", "acceptedAnswer": { "@type": "Answer", "text": "Either works, but pick one. Global keeps strings discoverable and extraction simple; per-component keeps a component self-contained at the cost of strings scattered where nobody can audit them." } }, { "@type": "Question", "name": "What are linked messages in Vue I18n?", "acceptedAnswer": { "@type": "Answer", "text": "Keys that reference another key, so a product name defined once can be reused everywhere. Renaming it then becomes a single edit rather than a find-and-replace across every catalogue." } }, { "@type": "Question", "name": "How are plurals handled?", "acceptedAnswer": { "@type": "Answer", "text": "Through pipe-separated forms mapped to the target language's rules. English needs two forms and several languages need more, so supplying two for a six-form language leaves the rest falling back." } }, { "@type": "Question", "name": "Does a Vue app need server rendering to rank?", "acceptedAnswer": { "@type": "Answer", "text": "If it is a public site, yes, or a translation layer serving translated HTML. A client-rendered app can present a crawler with an English shell no matter how complete the catalogue is." } } ] } ```