Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

Published on SiteLocaleAI Blog

Introduction

If you run a marketing site built with Nuxt.js, you already know how fast it can be to ship a beautiful, SEO‑friendly page. The next challenge is reaching a global audience without rewriting every component for each language. SiteLocaleAI solves this with a drop‑in JavaScript library, self‑hosted LLMs, and a CLI that pre‑renders translated pages for search engines.

In this tutorial we’ll take a typical Nuxt marketing site and make it multilingual overnight using a single configuration file. The steps are:

1. Install the SiteLocaleAI library.
2. Add a tiny sitelocale.config.js file.
3. Plug the library into Nuxt’s global layout.
4. Run the SEO pre‑rendering CLI.
5. Deploy – the site now serves localized content and price rounding automatically.

No extra Node.js build steps, no heavy i18n plugins, and you keep full control of your LLM API keys (Claude, GPT‑4o‑mini, etc.).

---

1. Prerequisites

• Nuxt 3 project (or Nuxt 2 with the bridge).
• An LLM API key (e.g., Anthropic Claude, OpenAI GPT‑4o‑mini).
• Node.js ≥ 18 installed locally.
• Optional: a WordPress backend for CMS‑driven content – SiteLocaleAI works with any data source.

---

2. Install the SiteLocaleAI library

Open your terminal at the root of the Nuxt project and run:

npm i @sitelocaleai/js

The package is framework‑agnostic, so you can also use yarn or pnpm if you prefer.

---

3. Create the configuration file

Create a file named sitelocale.config.js in the project root. This is the only place you’ll define languages, price rounding rules, and your LLM key.

// sitelocale.config.js
module.exports = {
  // Your LLM provider – keep the key secret (use env vars in production)
  llm: {
    provider: "openai", // or "anthropic"
    apiKey: process.env.SITELOCALEAI_API_KEY,
    model: "gpt-4o-mini",
  },
  // Languages you want to support (ISO‑639‑1 codes)
  locales: ["en", "es", "de", "fr", "ja"],
  // Default language for the original site
  defaultLocale: "en",
  // Price localization – round to psychological thresholds per currency
  priceLocalization: {
    USD: { roundTo: 0.99 },
    EUR: { roundTo: 0.95 },
    JPY: { roundTo: 1 },
    BRL: { roundTo: 0.99 },
  },
  // SEO pre‑rendering options
  seo: {
    // Generate static HTML for each locale under /[locale]/
    outputDir: "public/translated",
    // Crawl depth – set to 2 for most marketing sites
    crawlDepth: 2,
  },
};

Tip: Store SITELOCALEAI_API_KEY in a .env file and add it to your CI pipeline. The key never touches the client side because the library runs server‑side during the CLI step.

---

4. Wire the library into Nuxt

Create a plugin that registers SiteLocaleAI globally. In a Nuxt 3 project, add plugins/siteLocale.js:

// plugins/siteLocale.js
import { createLocaleMiddleware } from "@sitelocaleai/js";
import config from "../sitelocale.config.js";

export default defineNuxtPlugin((nuxtApp) => {
  const localeMiddleware = createLocaleMiddleware(config);
  nuxtApp.vueApp.use(localeMiddleware);
});

Then tell Nuxt to load the plugin by adding it to nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ["~/plugins/siteLocale.js"],
});

The middleware does three things automatically:
1. Detects the visitor’s language via Accept‑Language header or URL prefix.
2. Calls the LLM to translate any string that isn’t already cached.
3. Rewrites price numbers using the priceLocalization rules.

All you need to do in your components is wrap translatable text with the t() helper that the library injects:

<template>
  <section class="hero">
    <h1>{{ t('Welcome to Our Product') }}</h1>
    <p>{{ t('The fastest way to grow your business globally.') }}</p>
    <p class="price">{{ t('Starting at') }} {{ formatPrice(19.99, 'USD') }}</p>
  </section>
</template>

If you’re using a CMS (e.g., WordPress) that already stores content in English, the same t() call works because the library translates the raw HTML on the fly.

---

5. SEO pre‑rendering with the CLI

SiteLocaleAI ships a CLI that crawls your site, generates translated HTML, and writes it to the folder defined in seo.outputDir. Run it once after you’ve deployed the site to a staging URL.

npx @sitelocaleai/cli pre-render https://staging.my‑site.com

The CLI:
- Fetches each page.
- Sends the raw text to the LLM for each locale.
- Rewrites price numbers according to the rounding rules.
- Saves the result as public/translated/<locale>/path/index.html.

Search engines will now index the fully rendered, language‑specific pages, boosting international SEO without any additional server‑side rendering logic.

Note: For large sites you can parallelise the crawl with --workers 4.

---

6. Deploy

Because the translated pages are static files, you can serve them from any CDN (Vercel, Netlify, Cloudflare Pages). The original Nuxt app remains unchanged for the default locale.

# Build the Nuxt app
npm run build
# Copy the pre‑rendered files into the final output folder
cp -R public/translated/* .output/public/
# Deploy the .output folder

Your site now responds to example.com/es/, example.com/de/, etc., with fully translated content, correctly rounded prices, and SEO‑friendly meta tags.

---

7. Verify the result

1. Visit https://my‑site.com/es/ – you should see Spanish text and prices ending in €0.95.
2. Inspect the page source – the HTML contains the translated markup (no client‑side JavaScript needed for SEO).
3. Run a Lighthouse audit for each locale to confirm performance and SEO scores.

---

8. Next steps

• Dynamic content: Use the t() helper inside API routes to translate JSON responses.
• A/B testing: Combine with SiteLocaleAI’s schema constraints to enforce brand voice across languages.
• Analytics: Track locale‑specific conversions with your favorite analytics platform.

For deeper configuration options, see the official docs:
- Installation & Setup
- SEO Pre‑rendering Guide

---

Conclusion

With one config file and a single CLI command, you can turn a Nuxt.js marketing site into a multilingual, SEO‑optimized powerhouse overnight. The drop‑in library handles translation, price rounding, and language detection, while the pre‑rendering CLI guarantees that search engines see the fully translated markup.

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