Translate Your Nuxt.js Site Overnight with SiteLocaleAI
Published on SiteLocaleAI.com
Internationalizing a marketing site can feel like a marathon, but with SiteLocaleAI you can sprint to a fully translated, SEO‑friendly version in a single night. This tutorial walks you through adding the library to a Nuxt 3 project, configuring a one‑file JSON manifest, and using the CLI to pre‑render translated pages for search engines.
1. Prerequisites
- Nuxt 3 (or Nuxt 2 with the bridge) already set up for your marketing site.
- An LLM API key (Claude, GPT‑4o‑mini, etc.) – SiteLocaleAI is self‑hosted, so you keep the key.
- Node ≥ 18 for the CLI (optional if you only use the browser library).
Tip: The same steps work for Vue, React, WordPress, Shopify, or any static site—Nuxt is just the example here.
2. Install the SiteLocaleAI package
# Using npm or Yarn
npm i @sitelocaleai/js
# or
yarn add @sitelocaleai/js
The package is framework‑agnostic; it simply injects a <script> tag that runs in the browser.
3. Create the locale.config.json file
SiteLocaleAI reads a single JSON manifest that defines supported languages, price rounding rules, and the LLM endpoint. Place the file at the root of your project (or any public folder) and reference it in the script tag.
{
"defaultLocale": "en",
"locales": [
{
"code": "en",
"label": "English",
"direction": "ltr"
},
{
"code": "es",
"label": "Español",
"direction": "ltr",
"priceRounding": {
"currency": "EUR",
"round": 0.99
}
},
{
"code": "fr",
"label": "Français",
"direction": "ltr",
"priceRounding": {
"currency": "EUR",
"round": 0.95
}
},
{
"code": "de",
"label": "Deutsch",
"direction": "ltr",
"priceRounding": {
"currency": "EUR",
"round": 0.99
}
}
],
"llm": {
"provider": "openai",
"model": "gpt-4o-mini",
"apiKey": "YOUR_OPENAI_API_KEY"
}
}
- priceRounding applies psychological rounding (e.g., €9.99 instead of €10). You can add a rule per locale.
- Keep the API key out of version control; use environment variables or a secret manager.
4. Wire the library into Nuxt
Edit app.vue (or a layout component) and insert the script tag after the main content so it can access the DOM.
<template>
<NuxtPage />
</template>
<script setup>
import { onMounted } from 'vue'
onMounted(() => {
const script = document.createElement('script')
script.type = 'module'
script.src = '/node_modules/@sitelocaleai/js/dist/index.js'
script.onload = () => {
// Initialize with the config file URL
window.SiteLocaleAI.init({
configUrl: '/locale.config.json',
// Optional: auto‑detect browser language
detectLanguage: true,
// Hook to format prices after translation
onPriceRender: (price, locale) => {
// SiteLocaleAI already applies rounding, but you can tweak further
return new Intl.NumberFormat(locale, { style: 'currency', currency: locale === 'en' ? 'USD' : 'EUR' }).format(price)
}
})
}
document.body.appendChild(script)
})
</script>
Why a single config file? All language‑specific logic lives there, so you can add new locales or adjust rounding without touching the codebase.
5. Translate static text in your components
SiteLocaleAI scans the DOM for text nodes and replaces them using the LLM. For dynamic content (e.g., fetched from an API) call the helper manually:
<template>
<h1>{{ $t('hero.title') }}</h1>
<p v-html="translatedDescription"></p>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const translatedDescription = ref('')
onMounted(async () => {
const raw = 'Our platform boosts international SEO and localizes prices automatically.'
translatedDescription.value = await window.SiteLocaleAI.translate(raw, { target: 'es' })
})
</script>
The $t helper works like any i18n library; you just need to expose the translation keys in your JSON config if you prefer static translations.
6. SEO pre‑rendering with the CLI
Search engines struggle with client‑side translations. SiteLocaleAI ships a CLI that crawls your site, renders each locale, and writes static HTML files ready for indexing.
n Install the CLI globally (optional)
npm i -g @sitelocaleai/cli
# Run pre‑rendering for all locales defined in locale.config.json
sitelocaleai prerender \
--output ./dist/translated \
--config ./locale.config.json \
--base-url https://yourdomain.com
The CLI:
1. Starts a headless Chromium instance.
2. Loads each page, injects the library, and waits for translations to finish.
3. Saves the fully translated HTML under dist/translated/<locale>/.
You can then serve these static files via a CDN or configure your web server to serve the correct locale based on the URL prefix (/es/, /fr/, etc.).
Reference: See the full CLI guide in the documentation: SEO Pre‑Rendering CLI.
7. Deploy – one‑click
Because the library is self‑hosted, you only need to push the updated locale.config.json and the pre‑rendered static files to your hosting platform (Vercel, Netlify, Cloudflare Pages, etc.). No additional server‑side code is required.
# Example for Vercel
vercel --prod
After the deployment finishes, verify:
- https://yourdomain.com/ shows English.
- https://yourdomain.com/es/ shows Spanish with rounded € prices.
- Google Search Console indexes the /es/ and /fr/ URLs (they appear as separate pages).
8. Internal links to SiteLocaleAI docs
- Installation Guide: https://sitelocaleai.com/docs/installation
- SEO Pre‑Rendering CLI: https://sitelocaleai.com/docs/seo-cli
9. Wrap‑up & next steps
You now have a multilingual Nuxt.js marketing site that:
- Translates content on the fly using your own LLM API key.
- Applies psychological price rounding per currency.
- Serves SEO‑friendly static HTML for every locale.
From here you can:
- Add more locales (e.g., Japanese, Portuguese) by extending locale.config.json.
- Integrate with a headless CMS for dynamic product data.
- Use the WordPress plugin version of SiteLocaleAI for non‑JS sites.
🎉 Ready to go global?
Give SiteLocaleAI a spin on your next project. Start with the free Indie plan ($5/mo) and upgrade as you grow.