Framework Guide

Translate Your Nuxt.js Site Overnight with SiteLocaleAI

Published May 7, 2026

Translate a Nuxt.js Marketing Site Overnight with SiteLocaleAI

TL;DR – With a single site-locale.config.js file and a quick CLI run, your Nuxt.js marketing site becomes multilingual, price‑localized, and SEO‑friendly. No extra Node.js on the server, no manual copy‑pasting, and you keep full control of your LLM API keys.

1. Why SiteLocaleAI for Nuxt?

Drop‑in, framework‑agnostic – The library works with any front‑end framework, including Nuxt 2 and 3.
Self‑hosted LLMs – You provide your own Claude, GPT‑4o‑mini, or any OpenAI‑compatible key, so data never leaves your infrastructure.
Psychological price rounding – Prices are automatically adjusted per currency (e.g., $9.99 → €8.99).
SEO pre‑rendering CLI – Generates static HTML for each locale, so crawlers index the translated content directly.

All of this can be set up in under an hour – perfect for a marketing launch that needs to go live across Europe, Asia, and the Americas.

2. Install the Library

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

The package ships a tiny runtime script (siteLocale.js) that you will import once in your app. No additional build steps are required.

3. Create a Single Configuration File

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

// site-locale.config.js
export default {
  // 1️⃣ LLM provider – use your own API key (keep it secret!)
  llm: {
    provider: "openai", // or "anthropic", "gemini", etc.
    apiKey: process.env.OPENAI_API_KEY,
    model: "gpt-4o-mini",
  },

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

  // 3️⃣ Price localization rules
  price: {
    rounding: "psychological", // forces .99, .95, .49 etc.
    currencyMap: {
      USD: "$",
      EUR: "€",
      GBP: "£",
      JPY: "¥",
    },
  },

  // 4️⃣ Paths to translate – glob patterns relative to the Nuxt `pages` folder
  include: ["**/*.vue", "**/*.md"],

  // 5️⃣ SEO pre‑render settings
  seo: {
    outputDir: "dist/seo", // static HTML will be written here
    sitemap: true,
  },
};

All you need to change is the apiKey environment variable and the list of locales you want to support.

4. Wire the Library into Nuxt

Edit nuxt.config.ts (or nuxt.config.js) to load the config and register the plugin.

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

export default defineNuxtConfig({
  // Register the SiteLocaleAI plugin globally
  plugins: [{ src: "@sitelocaleai/core/plugin", mode: "client" }],

  // Expose the config to the plugin via runtime config
  runtimeConfig: {
    public: {
      siteLocale: siteLocaleConfig,
    },
  },

  // Optional: add the SEO pre‑render output to the static generation list
  generate: {
    dir: "dist",
    routes: async () => {
      // SiteLocaleAI will generate a list of locale‑specific routes;
      // you can import them from the CLI output if you need custom handling.
      return [];
    },
  },
});

The plugin automatically scans your Vue components and Markdown files for translatable strings ({{ $t('key') }} or plain text nodes) and replaces them at runtime.

5. Add Translation Keys (Optional)

If you already use i18n keys, SiteLocaleAI will respect them. Otherwise, you can let the library generate keys on the fly. For a marketing site, the simplest approach is to wrap static text in a <LocaleText> component:

<template>
  <section class="hero">
    <h1><LocaleText>Boost Your Business with AI</LocaleText></h1>
    <p><LocaleText>Start your free trial today and see results in minutes.</LocaleText></p>
    <price-display :amount="49" currency="USD" />
  </section>
</template>

<script setup>
import LocaleText from "@sitelocaleai/core/LocaleText.vue";
import PriceDisplay from "~/components/PriceDisplay.vue";
</script>

During the CLI pre‑render step, each <LocaleText> node is sent to the LLM, translated, and cached.

6. Run the SEO Pre‑Rendering CLI

SiteLocaleAI ships a tiny CLI that fetches translations, rewrites price values, and writes static HTML for every locale.

# Make sure your API key is set
export OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx

# Run the pre‑render
npx site-localeai prerender

The command does the following:
1. Starts a headless Nuxt server.
2. Visits each route defined in pages/.
3. Sends the page HTML to the LLM for translation.
4. Applies price rounding per locale.
5. Writes the final HTML to dist/seo/<locale>/<path>.html.

Because the output is static HTML, search engines index the translated content directly – no JavaScript rendering required.

7. Deploy – No Node.js on Production Needed

If you host on a static platform (Netlify, Vercel, Cloudflare Pages), simply point the site to the dist/seo folder. The runtime library (siteLocale.js) will still load the appropriate translations on the client for dynamic interactions, but the SEO‑critical content is already pre‑rendered.

8. Verify SEO Indexing

Open https://yourdomain.com/es/ and inspect the source – you should see the Spanish text and €‑rounded prices.
Run a quick curl request:

   curl -s https://yourdomain.com/ja/ | grep "価格"

Submit the generated sitemap (sitemap.xml inside dist/seo) to Google Search Console.

9. Keep Your Translations Fresh

Whenever you update copy, just re‑run the CLI. The library only re‑translates changed pages, so the process remains fast (typically under 5 minutes for a 10‑page site).

10. Next Steps & Resources

Detailed API reference: https://sitelocaleai.com/docs/quick-start
SEO pre‑render guide: https://sitelocaleai.com/docs/seo-prerender
Pricing plans: Indie $5, Starter $49, Growth $99, Enterprise $249 – pick the tier that matches your traffic.

11. Ready to Go Global?

You’ve just turned a single‑language Nuxt.js marketing site into a multilingual, price‑aware, SEO‑optimized powerhouse – all in one night. Try SiteLocaleAI today and let your product speak every language your customers use.

👉 Start your free trial now

Back to blog