Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

Published on SiteLocaleAI Blog

International expansion is a race against time. You want a flawless translation, localized pricing, and SEO‑ready pages—without months of manual work. SiteLocaleAI makes that possible for Nuxt.js projects with just one configuration file and a few CLI commands.

---

1. Why Nuxt.js + SiteLocaleAI?

• Framework‑agnostic: SiteLocaleAI’s drop‑in JavaScript library works with any front‑end framework, including Nuxt 3.
• Self‑hosted LLMs: Use your own API keys (Claude, GPT‑4o‑mini, etc.) for privacy and cost control.
• Price localization: Automatic psychological rounding per currency (e.g., $9.99 → €8.99).
• SEO pre‑rendering: The CLI generates static, fully translated HTML that search engines can index.
• Zero‑node WordPress plugin: For non‑JS sites, but not needed here.

---

2. Prerequisites

Item	Minimum Version
Node.js	18.x
Nuxt.js	3.x
SiteLocaleAI npm package	@sitelocaleai/core
LLM API key	Claude, GPT‑4o‑mini, etc.

Make sure you have a Git repository for your site and a production build ready (npm run build).

---

3. Install SiteLocaleAI

# From your Nuxt project root
npm i @sitelocaleai/core

Note: The library is tiny (~12 KB gzipped) and has no runtime dependencies beyond the browser fetch API.

---

4. Create a single config file

Create site-locale.config.js at the project root:

// site-locale.config.js
module.exports = {
  // 1️⃣ LLM provider configuration (self‑hosted)
  llm: {
    provider: "openai", // or "anthropic", "gemini", etc.
    apiKey: process.env.LLM_API_KEY,
    model: "gpt-4o-mini",
    temperature: 0.3,
  },

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

  // 3️⃣ Price rounding rules per currency
  priceLocalization: {
    USD: { round: 0.99 },
    EUR: { round: 0.99 },
    GBP: { round: 0.95 },
    JPY: { round: 100 },
  },

  // 4️⃣ Paths to translate – Nuxt pages are auto‑discovered, but you can add static assets
  include: ["/", "/about", "/pricing"],

  // 5️⃣ SEO CLI options
  seo: {
    preRender: true, // generate static HTML for each locale
    outputDir: "dist-localized", // where the CLI writes the files
  },
};

All the heavy lifting lives in this file—no per‑component changes required.

---

5. Wire the library into Nuxt

Add a plugin that injects the translation helper into the Vue app.

// plugins/site-locale.client.js
import { createSiteLocale } from "@sitelocaleai/core";
import config from "../site-locale.config.js";

export default defineNuxtPlugin((nuxtApp) => {
  const locale = createSiteLocale(config);
  nuxtApp.provide("siteLocale", locale);
});

Register the plugin in nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ["~/plugins/site-locale.client.js"],
  // optional: expose the locale to the public runtime config for SSR
  runtimeConfig: {
    public: {
      defaultLocale: "en",
      availableLocales: ["en", "es", "fr", "de", "ja"],
    },
  },
});

Now you can use the $siteLocale composable in any component:

<template>
  <h1>{{ $siteLocale.t('hero.title') }}</h1>
  <p>{{ $siteLocale.t('hero.subtitle') }}</p>
  <p>{{ $siteLocale.formatPrice(product.price, "USD") }}</p>
</template>

The t method looks up translation keys that the CLI will generate automatically.

---

6. Run the SEO pre‑rendering CLI

SiteLocaleAI ships a tiny CLI (nloc-cli) that reads the config, calls the LLM for each locale, and writes static HTML.

# Install the CLI globally (optional) or use npx
npm i -g @sitelocaleai/cli

# Run the pre‑render
npx sitelocale-cli render

The command:
1. Crawls the URLs listed in include.
2. Sends each page’s source HTML to the LLM for translation.
3. Replaces price numbers with the rounded values defined in priceLocalization.
4. Writes locale‑specific HTML files to dist-localized/<locale>/.

After it finishes, you’ll have a folder structure like:

public-localized/
├─ en/
│  ├─ index.html
│  └─ pricing.html
├─ es/
│  ├─ index.html
│  └─ pricing.html
…

Deploy the dist-localized folder to your static host (Vercel, Netlify, Cloudflare Pages, etc.). The URLs will be automatically served under /es/, /fr/, etc., and search engines will index the fully translated pages.

---

7. Verify SEO and price rounding

Use the built‑in SEO audit command:

npx sitelocale-cli seo-check --output report.json

The report lists missing meta tags, duplicate titles, and confirms that price numbers have been rounded per currency. Fix any warnings directly in your Nuxt templates or let the LLM regenerate the page.

---

8. Keep translations up‑to‑date

When you add new content, simply re‑run the CLI. Because the library is stateless, no database migrations are needed.

# Incremental update (only new/changed pages)
npx sitelocale-cli render --incremental

---

9. Internal documentation links

• Detailed installation guide: https://sitelocaleai.com/docs/installation
• SEO CLI usage: https://sitelocaleai.com/docs/seo-cli

---

10. Wrap‑up & CTA

With a single site-locale.config.js file and a couple of CLI runs, your Nuxt.js marketing site can be fully translated, price‑localized, and SEO‑ready overnight. No extra build steps, no third‑party SaaS hosting, and you stay in control of your LLM keys.

Ready to launch your global site in hours, not weeks? Try SiteLocaleAI today and see how fast you can go international.