Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI
Published on SiteLocaleAI Blog
Why Nuxt.js + SiteLocaleAI?
Nuxt.js is the go‑to framework for Vue developers who need server‑side rendering, static site generation, and a great developer experience. However, turning a single‑language marketing site into a truly global experience usually involves:
- Manual copy‑pasting of content
- Multiple build pipelines for each locale
- Complex SEO handling for crawlers
SiteLocaleAI solves all of that with one tiny config file. The library is framework‑agnostic, self‑hosted (you bring your own LLM API key), and includes a CLI that pre‑renders fully translated HTML for search engines. The result? A multilingual site that’s fast, cheap, and SEO‑friendly—ready overnight.
1. Install the library
First, add the npm package to your Nuxt project. The library works with any bundler, but the npm route is the simplest.
npm i @sitelocaleai/core
If you prefer Yarn or PNPM, just replace the command accordingly.
2. Create a single configuration file
Create a file called sitelocale.config.ts at the root of your project. This file tells SiteLocaleAI which languages to generate, which LLM to use, and how to round prices.
// sitelocale.config.ts
import { defineLocaleConfig } from '@sitelocaleai/core'
export default defineLocaleConfig({
// 1️⃣ Languages you want to support
locales: ['en', 'es', 'fr', 'de', 'ja'],
// 2️⃣ Your LLM API key – keep it secret!
llm: {
provider: 'openai', // or 'anthropic', 'google', etc.
model: 'gpt-4o-mini',
apiKey: process.env.OPENAI_API_KEY,
},
// 3️⃣ Price localization rules
priceLocalization: {
// Psychological rounding per currency
USD: { round: 0.99 },
EUR: { round: 0.95 },
JPY: { round: 0 },
},
// 4️⃣ SEO pre‑render settings
seo: {
// Generate static HTML for each locale during build
preRender: true,
// Optional: custom meta tag templates
metaTemplate: (locale) => `My Product – ${locale.toUpperCase()}`,
},
})
That’s it—no changes to your existing components or pages.
3. Wire the library into Nuxt
Add the plugin to nuxt.config.ts. The plugin will automatically inject a $locale helper into your Vue components.
// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'
import localeConfig from './sitelocale.config'
export default defineNuxtConfig({
modules: [
// SiteLocaleAI module (auto‑detects the config file)
'@sitelocaleai/nuxt',
],
siteLocale: {
// Pass the config object directly or let the module read the file
config: localeConfig,
},
})
Now you can use the $locale composable in any component:
<template>
<h1>{{ $locale.t('hero.title') }}</h1>
<p>{{ $locale.t('hero.subtitle') }}</p>
<price-display :amount="49.99" />
</template>
The t function asks the LLM to translate the given key on‑the‑fly (or from the cached translation file after the first build). The <price-display> component will automatically apply the rounding rules defined in sitelocale.config.ts.
4. SEO‑friendly pre‑rendering with the CLI
Search engines still love static HTML. SiteLocaleAI ships a CLI that crawls your site, translates each page, and writes the result to the dist/ folder.
n Run the build for the default locale (en)
npm run build
# Generate translated static pages for all locales
npx sitelocaleai pre-render --config sitelocale.config.ts
The CLI creates a folder structure like:
/dist/
en/
index.html
es/
index.html
fr/
index.html
...
Each HTML file contains the fully translated content, meta tags, and localized price markup, so Google, Bing, and Yandex index every language version without extra JavaScript execution.
5. Deploy – no extra runtime needed
Because the translation happens at build time, you can host the output on any static‑file CDN (Vercel, Netlify, Cloudflare Pages, etc.). The only runtime requirement is the LLM API key during the pre‑render step, which you keep out of the client bundle.
6. Bonus: WordPress integration for hybrid sites
If part of your marketing site lives on WordPress, you can still use the same sitelocale.config.ts with the SiteLocaleAI WordPress plugin—no Node.js required. The plugin reads the config file from a mounted volume and serves translated pages via the same SEO‑pre‑render pipeline. This is handy for headless setups where Nuxt handles the front‑end and WordPress powers the blog.
7. Quick checklist before you go live
| ✅ | Item |
|---|---|
| 1 | Add sitelocale.config.ts with locales, LLM, and price rules |
| 2 | Register the Nuxt plugin in nuxt.config.ts |
| 3 | Run npx sitelocaleai pre-render to generate static HTML |
| 4 | Verify each locale’s /dist/<locale>/index.html contains correct translations and meta tags |
| 5 | Deploy the dist folder to your CDN |
| 6 | Monitor Search Console for indexed language versions |
8. Internal resources
For deeper dives, check out the official documentation:
9. Wrap‑up
With just one config file, you’ve turned a single‑language Nuxt.js marketing site into a multilingual, SEO‑optimized powerhouse—ready for global traffic overnight. The approach scales effortlessly: add new locales, adjust price rounding, or swap LLM providers without touching your core codebase.
Ready to go global?
Try SiteLocaleAI today and see how fast you can launch a fully localized Nuxt.js site. Start your free trial and let your marketing messages speak every language.