Translate Your Nuxt.js Site Overnight with SiteLocaleAI

Published on 2026‑09‑13

International expansion is a must‑have for any SaaS or product landing page, but the translation workflow can be a bottleneck. SiteLocaleAI eliminates that friction with a drop‑in JavaScript library that works with any framework, including Nuxt.js. In this tutorial we’ll take a typical Nuxt marketing site and make it multilingual overnight using a single configuration file, self‑hosted LLM API keys, and the built‑in SEO pre‑rendering CLI.

---

1. Prerequisites

Requirement	Why it matters
Nuxt 3 project (or Nuxt 2 with bridge)	The library is framework‑agnostic, but Nuxt’s module system makes integration painless.
An LLM API key (Claude, GPT‑4o‑mini, etc.)	SiteLocaleAI never sends your keys to a third‑party; you keep control of the model.
Node ≥ 18 (for the CLI)	Required for the pre‑rendering step.

If you haven’t set up a Nuxt project yet, run:

npx nuxi init my‑marketing‑site
cd my‑marketing‑site
npm install

---

2. Install SiteLocaleAI

SiteLocaleAI is distributed as an npm package that registers a Nuxt module. Run:

npm i @sitelocaleai/nuxt

The package adds a global siteLocale object that reads a single config file (by default site-locale.config.js).

---

3. Create the configuration file

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

// site-locale.config.js
export default {
  // The language that will be served to visitors who have no preference
  defaultLang: 'en',

  // Languages you want to support – add or remove as needed
  languages: ['en', 'es', 'fr', 'de', 'ja'],

  // Your private LLM API key – keep it out of version control!
  apiKey: process.env.SITELOCALE_API_KEY,

  // Choose the model that balances cost and quality for you
  model: 'gpt-4o-mini',

  // Enable psychological rounding for price localization (e.g., $9.99 → $10)
  priceRounding: true,

  // Optional: custom translation prompts or domain‑specific terminology
  // customPrompt: "Translate marketing copy for a SaaS product, keep tone friendly.",
}

Tip: Store SITELOCALE_API_KEY in a .env file and add it to .gitignore.

---

4. Wire the module into nuxt.config.ts

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  modules: ['@sitelocaleai/nuxt'],
  siteLocale: {
    // Point to the config file we just created
    configFile: './site-locale.config.js',
  },
  // Optional: make the locale part of the URL (e.g., /es/)
  router: {
    options: {
      // This will automatically prepend the language code to routes
      // You can also use middleware for more control
      localePrefix: 'as-needed',
    },
  },
})

That’s it – the library now intercepts every request, translates the HTML on the fly using your LLM, and applies the price rounding logic.

---

5. Translate static content (Markdown, JSON, etc.)

SiteLocaleAI also ships a CLI that pre‑renders translated pages for SEO. Run the following command to generate a static version of every language:

npx site-locale prerender --output ./dist

The CLI:
1. Crawls your site (starting at /).
2. Calls the LLM for each page in every language defined in site-locale.config.js.
3. Writes the fully translated HTML files to ./dist/<lang>/.

Search engines will now see a complete, indexable version of each language, boosting international SEO without any extra server‑side rendering logic.

---

6. Verify the output locally

Start a simple static server to inspect the results:

npx serve ./dist

Visit http://localhost:3000/es/ (or any other language code) and you should see your marketing copy in Spanish, with prices rounded to the nearest whole unit (e.g., €9.99 → €10).

---

7. Deploy – no Node.js on the host required

Because the translation happens at build time, you can host the generated dist folder on any static‑file service (Netlify, Vercel, Cloudflare Pages, etc.). The only runtime dependency is the LLM API key, which is used only during the CLI step. Your production site remains completely framework‑agnostic and fast.

---

8. Optional: WordPress‑style fallback for content‑heavy pages

If you have a hybrid site that pulls content from a headless CMS, you can still use the same config file. The library’s useLocale composable lets you fetch translated strings on the client side:

<script setup>
import { useLocale } from '@sitelocaleai/nuxt'
const { t } = useLocale()
</script>

<template>
  <h1>{{ t('hero.title') }}</h1>
  <p>{{ t('hero.subtitle') }}</p>
</template>

The t function looks up the translation in the pre‑rendered JSON bundle, ensuring zero‑latency UI updates.

---

9. SEO best practices

• Meta tags – SiteLocaleAI automatically translates <title> and <meta description> tags defined in your components.
• Hreflang – The module injects proper hreflang links into the <head> for each language.
• Sitemap – After pre‑rendering, run npx sitemap-generator ./dist to generate a multilingual sitemap and submit it to Google Search Console.

For more details, see the official docs:
- Installation guide
- SEO pre‑rendering

---

10. Wrap‑up

With just one configuration file you have turned a single‑language Nuxt.js marketing site into a fully localized, SEO‑ready global presence. The workflow is:
1. Install the Nuxt module.
2. Add site-locale.config.js with your languages and LLM key.
3. Run the pre‑render CLI.
4. Deploy the static output.

That’s all—no additional server code, no third‑party translation services, and full control over pricing localization.

---

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

---