Framework Guide

Translate Your Nuxt.js Site Overnight with SiteLocaleAI

Published August 7, 2026

Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

TL;DR – Add a single siteLocale.config.js file, point it at your LLM API key, run npx siteLocaleAI prerender, and you have a fully translated, SEO‑ready Nuxt.js site in under an hour.

Why SiteLocaleAI for Nuxt?

Framework‑agnostic drop‑in – Works with any Vue‑based stack, including Nuxt 2 and 3.
Self‑hosted LLMs – You keep control of your API keys (Claude, GPT‑4o‑mini, etc.) and never share data with a third‑party service.
Price localization – Automatic psychological rounding per currency (e.g., €9.99 → €10).
SEO pre‑rendering CLI – Generates static HTML for every language, so Google indexes the translated content directly.
Zero‑node WordPress plugin – For non‑JS sites, but not needed in Nuxt.

All of this can be achieved with one configuration file.

1. Install the library

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

npm i @sitelocaleai/js
# or yarn add @sitelocaleai/js

The package is tiny (≈ 15 KB) and has no peer dependencies, so it won’t bloat your bundle.

2. Create the single config file

Create a file called siteLocale.config.js in the project root:

// siteLocale.config.js
module.exports = {
  // 1️⃣ Your LLM provider – any OpenAI‑compatible endpoint works
  llm: {
    provider: "openai",
    apiKey: process.env.OPENAI_API_KEY, // keep it secret!
    model: "gpt-4o-mini",
  },

  // 2️⃣ Languages you want to support (ISO‑639‑1 codes)
  locales: ["en", "es", "fr", "de", "ja"],

  // 3️⃣ Automatic price localization
  priceLocalization: {
    enabled: true,
    // Psychological rounding per currency (e.g., 9.99 → 10)
    rounding: {
      USD: 0,
      EUR: 0,
      GBP: 0,
      JPY: -1, // round down to nearest 10
    },
  },

  // 4️⃣ SEO pre‑rendering options
  seo: {
    // Generate a static HTML snapshot for each locale
    prerender: true,
    // Path where the static files will be written
    outDir: "dist/locale",
  },

  // 5️⃣ Optional: custom translation prompts
  prompt: {
    system: "You are a helpful marketing copywriter. Translate the following text while preserving brand tone.",
    user: "{{content}}",
  },
};

All the heavy lifting is now declared. No changes to nuxt.config.js are required unless you want to inject the library globally.

3. Wire the library into Nuxt

Create a tiny plugin that loads the library on the client side:

// plugins/siteLocale.client.js
import { createSiteLocale } from "@sitelocaleai/js";
import config from "../siteLocale.config.js";

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

Add the plugin to nuxt.config.ts (or .js):

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ["~/plugins/siteLocale.client.js"],
  // If you use the SEO CLI you may want to disable server‑side rendering for the
  // locale routes, but the default works fine.
});

Now you can use the $siteLocale composable anywhere:

<template>
  <div>
    <h1>{{ $siteLocale.t('hero.title') }}</h1>
    <p>{{ $siteLocale.t('hero.subtitle') }}</p>
    <price :amount="29.99" currency="USD" />
  </div>
</template>

The t method looks up keys from your translation JSON files (generated automatically by the CLI – see next step).

4. Generate translations and SEO snapshots

SiteLocaleAI ships a CLI that does two things in one go:

Calls your LLM to translate every string in the locales/ folder.
Pre‑renders each page for every locale, producing static HTML that search engines love.

Run the following command:

npx siteLocaleAI prerender

You’ll see output similar to:

[siteLocaleAI] Translating en → es …
[siteLocaleAI] Translating en → fr …
[siteLocaleAI] Generating static HTML for 5 locales …
[siteLocaleAI] Done! Files written to /dist/locale

The CLI respects the priceLocalization rules you defined, so a price displayed as $29.99 becomes €30 for French users, £30 for UK, etc.

5. Deploy the static locale folder

If you host on a static platform (Vercel, Netlify, Cloudflare Pages), simply point the deployment to the dist folder. The locale‑specific URLs will look like:

https://example.com/ (default English)
https://example.com/es/
https://example.com/fr/

Because the HTML is already translated, Google’s crawler indexes each language version without needing JavaScript execution.

6. Verify SEO and price rounding

Open any translated page and view the source. You should see the full translated markup and the localized price. For example, the French version of a pricing card might read:

<p class="price">30 €</p>

Run a quick Lighthouse audit (or use Google Search Console’s URL Inspection) to confirm that the hreflang tags are present. SiteLocaleAI automatically injects them based on the locales array.

7. Keep translations up‑to‑date

Whenever you add new keys, just re‑run the CLI:

npx siteLocaleAI prerender --only-missing

The --only-missing flag tells the tool to translate only the strings that don’t already have a locale entry, saving LLM credits.

8. Further reading

Detailed installation guide: https://sitelocaleai.com/docs/installation
Full configuration reference: https://sitelocaleai.com/docs/configuration

9. Wrap‑up & CTA

With just one config file, a couple of npm commands, and your own LLM API key, you can turn a single‑language Nuxt.js marketing site into a multilingual, SEO‑optimized powerhouse overnight. No extra server costs, no third‑party data leakage, and your prices are automatically rounded for each market.

Ready to go global? Try SiteLocaleAI today and watch your international traffic soar.

Back to blog