Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

Published on SiteLocaleAI Blog ---

Why Translate a Nuxt.js Site?

Nuxt.js is a powerful framework for building fast, SEO‑friendly Vue applications. For a marketing site that targets global audiences, multilingual support is no longer a nice‑to‑have—it’s a must. Traditional translation workflows can take weeks and often break SEO. SiteLocaleAI solves this with a drop‑in JavaScript library, self‑hosted LLM keys, and a CLI that pre‑renders translated pages for search engines.

Key benefits
- One‑config translation (no code changes per language) n> - Price localization with psychological rounding per currency
- Full SEO indexing via pre‑rendered HTML
- No vendor lock‑in – you bring your own LLM API key (Claude, GPT‑4o‑mini, etc.)

---

Prerequisites

Requirement	Details
Nuxt 3	The guide assumes a fresh Nuxt 3 project (npx nuxi init my‑site).
Node.js 18+	Required for the CLI and library.
LLM API key	Obtain a key from your preferred provider (e.g., Anthropic Claude, OpenAI GPT‑4o‑mini).
SiteLocaleAI package	npm i @sitelocaleai/core (the core library) and npm i @sitelocaleai/cli for pre‑rendering.

---

1. Install SiteLocaleAI

# Core library – runtime in the browser
npm i @sitelocaleai/core

# CLI – for SEO pre‑rendering
npm i -D @sitelocaleai/cli

---

2. Create a Single Configuration File

SiteLocaleAI works off a single JSON/YAML config that lives at the project root. Name it sitelocale.config.json.

{
  "defaultLocale": "en",
  "locales": ["en", "es", "fr", "de", "ja"],
  "llmProvider": "openai",
  "llmApiKey": "${OPENAI_API_KEY}",
  "priceRounding": {
    "USD": 0.99,
    "EUR": 0.95,
    "JPY": 1,
    "GBP": 0.98
  },
  "translationScope": "content", // "content" = page text, "metadata" = meta tags
  "excludePaths": ["/admin", "/privacy"]
}

Explanation:
- defaultLocale is the source language (English).
- locales lists all target languages.
- llmApiKey can reference an environment variable for security.
- priceRounding defines the psychological rounding per currency.
- excludePaths tells the CLI to skip certain routes.

---

3. Wire the Library into Nuxt

Create a plugin that loads SiteLocaleAI on the client side. In plugins/sitelocale.client.ts:

import { defineNuxtPlugin } from "#app";
import { initSiteLocale } from "@sitelocaleai/core";

export default defineNuxtPlugin(async (nuxtApp) => {
  const config = await fetch("/sitelocale.config.json").then((r) => r.json());
  const locale = nuxtApp.vueApp.config.globalProperties.$i18n?.locale ?? config.defaultLocale;
  await initSiteLocale({ config, locale, rootElement: document.body });
});

Add the plugin to nuxt.config.ts:

export default defineNuxtConfig({
  plugins: ["~/plugins/sitelocale.client.ts"],
});

That’s it—no per‑page changes required. The library automatically scans the DOM, translates visible text, and rewrites price elements that have a data-price attribute.

---

4. Markup Prices for Localization

Wrap price values in a span with data-price and the original currency code:

<p>Our premium plan costs <span data-price="USD" data-amount="49">$49</span> per month.</p>

SiteLocaleAI will replace the amount with the rounded value for the visitor’s locale (e.g., €46.95 for EU users).

---

5. SEO‑Friendly Pre‑Rendering with the CLI

Search engines need static HTML to index multilingual pages. The CLI crawls your Nuxt app, renders each locale, and writes the output to dist/.

# Build the Nuxt site first
npm run build

# Run the SiteLocaleAI pre‑render
npx sitelocale-cli prerender --config sitelocale.config.json --output dist

The CLI creates language‑specific folders (/en, /es, /fr, …) containing fully translated HTML. Add these to your robots.txt or sitemap for better indexing.

---

6. Verify with Google Search Console

Upload the generated sitemap.xml (the CLI can generate one with --sitemap) to Google Search Console. You should see each locale indexed under its own URL path (/es/, /fr/, etc.).

---

7. Internal Documentation Links

For deeper configuration options, see the SiteLocaleAI Docs – Configuration and the CLI Reference.

---

8. One‑Click Deploy (Optional)

If you host on Vercel or Netlify, add the following environment variables:

OPENAI_API_KEY=your‑key‑here
NODE_ENV=production

The build step (npm run build && npx sitelocale-cli prerender) can be added as a post‑build script in package.json:

{
  "scripts": {
    "build": "nuxt build",
    "postbuild": "npx sitelocale-cli prerender --config sitelocale.config.json --output dist"
  }
}

Now every push triggers an overnight translation and SEO‑ready deployment.

---

9. Wrap‑Up

With just one configuration file, a tiny plugin, and a single CLI command, you can:
- Serve a fully translated Nuxt.js marketing site to any visitor.
- Localize prices with psychologically rounded numbers.
- Ensure search engines index each language version.
- Keep your LLM costs under control by using your own API keys.

Ready to go global? Try SiteLocaleAI today and see how fast your site can speak every language.

---

Happy translating!