Case Study

How SiteLocaleAI Translated a Nuxt.js Marketing Site Overnight

Published July 21, 2026

How SiteLocaleAI Translated a Nuxt.js Marketing Site Overnight

How SiteLocaleAI Translated a Nuxt.js Marketing Site Overnight

Published on 2026‑07‑21

When a fast‑growing SaaS startup needed to launch a multilingual marketing site built with Nuxt.js, the timeline was tight: one night to go live in English, French, German, and Japanese. Traditional translation pipelines—manual copy‑pasting, third‑party i18n plugins, and separate SEO builds—would have taken weeks. The team turned to SiteLocaleAI, a self‑hosted JavaScript library that leverages the customer’s own LLM API keys for on‑the‑fly translation, price localization, and SEO‑friendly pre‑rendering.

1. Why SiteLocaleAI Beats the Alternatives

Approach Setup Time Runtime Overhead SEO Indexing Price Localization Maintenance
Manual CSV + i18n plugin Days to weeks Low (static) Poor (client‑side only) Manual rounding High (updates require re‑upload)
Third‑party SaaS translation service Hours (API integration) Medium (API calls on each request) Moderate (needs SSR) Generic rounding Vendor lock‑in
SiteLocaleAI (self‑hosted) Minutes (single config) Zero (translations baked at build) Full (pre‑rendered HTML) Psychological rounding per currency Easy (just update config)

The key advantage is one‑click, one‑config deployment. Because the library runs during the build step, the final HTML served to browsers and crawlers is already translated, eliminating any client‑side latency and ensuring search engines see the exact content they should index.

2. The Minimal Configuration

All that was required was a siteLocale.config.js file placed at the root of the Nuxt project. The file tells SiteLocaleAI which languages to generate, which LLM to use, and how to round prices.

// siteLocale.config.js
module.exports = {
  // LLM provider – the team used Claude 3.5 Sonnet via their own API key
  llm: {
    provider: "anthropic",
    model: "claude-3-5-sonnet",
    apiKey: process.env.ANTHROPIC_API_KEY,
  },

  // Target languages (ISO 639‑1 codes)
  locales: ["en", "fr", "de", "ja"],

  // Price localization rules – psychological rounding per currency
  priceRules: {
    USD: { round: 0.99 },
    EUR: { round: 0.95 },
    GBP: { round: 0.99 },
    JPY: { round: 0 },
  },

  // Paths to pre‑render for SEO (static pages, blog posts, etc.)
  seoPreRender: {
    routes: ["/", "/features", "/pricing", "/blog/**"],
    outputDir: "dist/seo",
  },

  // Optional: custom translation prompts for brand tone
  promptTemplate: `You are a marketing copywriter. Translate the following text into {{lang}} while preserving brand voice and keeping the length within 10% of the original.`,
};

That’s it—no extra Nuxt modules, no Node‑only plugins, and no changes to existing components. The library automatically scans the rendered HTML, extracts translatable strings, and replaces them with the LLM‑generated equivalents.

3. One‑Line CLI for SEO Pre‑Rendering

SiteLocaleAI ships a CLI that can be added to the package.json scripts. The CLI runs the Nuxt build, injects translations, and writes fully localized static pages to a folder that can be served to crawlers.

// package.json (excerpt)
{
  "scripts": {
    "build": "nuxt build",
    "generate": "nuxt generate",
    "seo": "sitelocaleai seo --config siteLocale.config.js"
  }
}

Running npm run seo performs the following steps:
1. Build the Nuxt app in production mode.
2. Render each route listed in seoPreRender.routes for every locale.
3. Inject translated HTML and rounded price values.
4. Write the output to dist/seo.

The resulting folder can be uploaded to any static host (Vercel, Netlify, Cloudflare Pages) or served directly from the existing server. Search engines now crawl language‑specific URLs like /fr/ or /ja/ with fully rendered content, boosting international SEO.

4. Seamless Integration with Existing Nuxt Components

Because SiteLocaleAI works at the HTML level, developers don’t need to wrap each string in a translation function. However, for dynamic data (e.g., product prices fetched from an API) a tiny helper can be used:

<template>
  <div class="price">
    {{ localizedPrice }} {{ currencySymbol }}
  </div>
</template>

<script setup>
import { useLocalePrice } from "@sitelocaleai/runtime";

const { price, currency } = await fetchProduct(); // e.g., { price: 19.99, currency: "USD" }
const localizedPrice = useLocalePrice(price, currency);
</script>

useLocalePrice applies the rounding rule defined in priceRules and formats the number according to the locale’s conventions. The rest of the site remains untouched.

5. Results After One Night

Metric Before After (SiteLocaleAI)
Pages indexed per language 0 (only English) 4 × full index (EN, FR, DE, JA)
Organic traffic growth (30 days) +5 % +38 % overall, +62 % from non‑English regions
Bounce rate 68 % 42 % (localized pages)
Conversion rate 1.8 % 3.4 % (price rounding increased perceived value)
Time to market 2 weeks (manual) 8 hours (config + CLI)

The SEO boost was immediate. Google’s Search Console showed indexing of the French, German, and Japanese URLs within 12 hours. The psychological rounding (e.g., $19.99 → $19.99, €9.95) increased click‑through rates on price‑sensitive markets.

6. Lessons Learned & Best Practices

  1. Keep the config declarative – Adding a new locale is as simple as appending a code to the locales array.
  2. Leverage the prompt template – Tailor the tone to match brand voice; the default works well for most SaaS copy.
  3. Pre‑render only the SEO‑critical routes – Dynamic user‑specific pages can stay client‑side; static marketing pages benefit most from pre‑rendering.
  4. Monitor LLM token usage – Since the library uses your own API keys, set budget alerts on Claude/GPT‑4o‑mini usage.
  5. Combine with a CDN – Serve the dist/seo folder from a CDN to reduce latency for international visitors.

7. Get Started Today

If you have a Nuxt.js site (or any framework) and need a fast, cost‑effective way to go multilingual, SiteLocaleAI offers the simplest path: drop the library in, write a one‑file config, run the SEO CLI, and you’re live.

Ready to translate your site overnight?

Try SiteLocaleAI now – [sign up for the Indie plan at $5/mo] and see how quickly you can reach a global audience.

For deeper technical details, see the official documentation:
- https://sitelocaleai.com/docs/quick-start
- https://sitelocaleai.com/docs/seo-cli

Happy translating!

Back to blog