Framework Guide

Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

Published June 21, 2026

Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

International expansion is a race against time. A well‑optimized marketing site can capture global traffic, but translating every page manually is impossible. SiteLocaleAI solves this with a single configuration file, a drop‑in JavaScript library, and a CLI that pre‑renders SEO‑friendly pages for search engines. Below is a complete, step‑by‑step guide to get a Nuxt.js marketing site translated overnight.

1. Prerequisites

Nuxt 3 (or Nuxt 2 with the bridge) already set up.
An LLM API key (Claude, GPT‑4o‑mini, etc.) that you control – SiteLocaleAI is self‑hosted, so no third‑party data sharing.
Node.js ≥ 18 installed.
Optional: Docker for running the SEO pre‑rendering CLI in a clean environment.

2. Install the SiteLocaleAI library

# Using npm
npm i @sitelocaleai/nuxt

# Or yarn
yarn add @sitelocaleai/nuxt

The package is framework‑agnostic but provides a Nuxt module for automatic injection of the translation script.

3. Create a single configuration file

Create site-locale.config.js at the project root. This file tells SiteLocaleAI which languages to support, how to round prices, and which LLM endpoint to use.

// site-locale.config.js
export default {
  // Languages you want to serve – ISO 639‑1 codes
  locales: ["en", "es", "de", "fr", "ja"],

  // Default language for crawlers that don’t send Accept‑Language
  defaultLocale: "en",

  // LLM provider configuration – keep your API key secret (e.g., via .env)
  llm: {
    provider: "openai", // or "anthropic"
    model: "gpt-4o-mini",
    apiKey: process.env.OPENAI_API_KEY,
  },

  // Price localization – psychological rounding per currency
  priceLocalization: {
    enabled: true,
    rounding: {
      USD: 0.99,
      EUR: 0.95,
      GBP: 0.99,
      JPY: 0, // no decimals for Yen
    },
  },

  // SEO pre‑rendering options (used by the CLI later)
  seo: {
    generateStatic: true,
    // Paths to pre‑render; "*" means all routes
    routes: "*",
  },
};

Tip: Store the API key in a .env file and reference it via process.env. SiteLocaleAI never logs the key.

4. Wire the config into Nuxt

Edit nuxt.config.ts (or .js) to load the module and pass the config.

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt";
import localeConfig from "./site-locale.config";

export default defineNuxtConfig({
  modules: ["@sitelocaleai/nuxt"],
  siteLocale: localeConfig, // <-- inject the config
  // Optional: expose the config to the client for debugging (remove in prod)
  publicRuntimeConfig: {
    siteLocale: localeConfig,
  },
});

The module automatically injects a <script> tag that loads the SiteLocaleAI runtime, detects the visitor’s language, and swaps text in place.

5. Mark translatable content

SiteLocaleAI works out‑of‑the‑box with static strings in your Vue templates. For dynamic content, wrap it with the $t helper.

<template>
  <section class="hero">
    <h1>{{ $t('hero.title') }}</h1>
    <p>{{ $t('hero.subtitle') }}</p>
    <button class="cta">{{ $t('hero.cta') }}</button>
    <!-- Price example – will be rounded per locale -->
    <p class="price">{{ formatPrice(49.99) }}</p>
  </section>
</template>

<script setup>
import { useLocale } from "@sitelocaleai/nuxt";

const { formatPrice } = useLocale();
</script>

All keys (hero.title, hero.subtitle, …) are automatically sent to the LLM for translation on first request and cached thereafter.

6. Run the SEO pre‑rendering CLI

To make sure search engines index the translated pages, SiteLocaleAI provides a CLI that crawls your site locally, renders each locale, and writes static HTML files.

# Build the Nuxt app first
npm run build

# Run the SEO pre‑renderer (reads site-locale.config.js automatically)
npx @sitelocaleai/cli seo

The CLI will output a dist/ folder containing language‑specific sub‑folders (/en, /es, …). Deploy this folder to any static host (Vercel, Netlify, Cloudflare Pages). Search bots will see fully translated, indexable HTML without JavaScript execution.

7. Deploy

If you use Vercel, add a vercel.json to serve the static files:

{
  "rewrites": [
    { "source": "/", "destination": "/en/index.html" },
    { "source": "/es/(.*)", "destination": "/es/$1" }
  ]
}

For Netlify, just point the Publish directory to dist.

8. Verify the translation and price rounding

Open the site with different Accept-Language headers or add ?lang=es to the URL. You should see:
- All UI strings in the selected language.
- Prices rounded according to the priceLocalization.rounding map (e.g., $49.99 → €49.95).

If something looks off, consult the debug panel that appears when you add ?debug=true.

9. Keep your translations fresh

SiteLocaleAI caches translations for 30 days by default. To purge or refresh, run:

npx @sitelocaleai/cli purge-cache

You can also schedule a weekly CI job to re‑run the SEO CLI, ensuring new content is always indexed.

10. Next steps & resources

Installation details: https://sitelocaleai.com/docs/installation
SEO pre‑rendering guide: https://sitelocaleai.com/docs/seo-pre-rendering

These docs cover advanced topics like custom language detection, fallback strategies, and integrating with headless CMS backends.

11. Wrap‑up

With just a configuration file, a few npm commands, and the SiteLocaleAI Nuxt module, you can launch a fully localized marketing site overnight. The solution is self‑hosted, giving you control over LLM costs and data privacy, while the SEO CLI guarantees that search engines see the exact same content as your visitors.

Ready to launch your multilingual site? Try SiteLocaleAI today and watch your global traffic soar!

Back to blog