Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

International expansion is a race against time. A marketing site built with Nuxt.js can be ready for global audiences overnight when you pair it with SiteLocaleAI’s self‑hosted JavaScript library. This guide walks you through a single configuration file, price localization, and SEO‑friendly pre‑rendering—no framework rewrites, no extra Node.js on the server.

---

1. Why SiteLocaleAI?

• Drop‑in, framework‑agnostic – works with React, Vue, WordPress, Shopify, and of Nuxt.js.
• Self‑hosted – you keep full control of your LLM keys (Claude, GPT‑4o‑mini, etc.).
• Psychological price rounding – prices are displayed in a way that feels natural for each currency.
• SEO pre‑rendering CLI – search engines crawl fully translated, indexed pages.
• Zero‑runtime overhead – the library runs in the browser; the heavy lifting happens at build time.

---

2. Install the Library

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

Tip: The package size is under 30 KB gzipped, so it won’t bloat your bundle.

---

3. One‑File Configuration

Create a site-locale.config.js (or embed the config directly in nuxt.config.ts). The file tells SiteLocaleAI which languages to support, which LLM to call, and whether to enable price rounding and SEO pre‑rendering.

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

export default defineNuxtConfig({
  modules: ['@sitelocaleai/nuxt-module'],
  siteLocale: {
    // The language shown to first‑time visitors
    defaultLanguage: 'en',
    // Languages you want to serve
    languages: ['en', 'es', 'fr', 'de', 'ja'],
    // Choose your LLM provider – SiteLocaleAI works with any OpenAI‑compatible endpoint
    llmProvider: 'openai',
    apiKey: process.env.OPENAI_API_KEY,
    // Enable psychological rounding (e.g., $9.99 → $10.00)
    priceRounding: true,
    // Turn on SEO pre‑rendering for static generation
    seoPrerender: true,
    // Optional: custom prompt for brand‑tone consistency
    promptTemplate: `Translate the following content to {{targetLang}} while preserving brand voice.`
  }
})

All you need is this single object. The Nuxt module automatically injects the SiteLocaleAI runtime into every page.

---

4. Localizing Prices

SiteLocaleAI detects currency symbols and applies psychological rounding per locale. For example:

<p class="price">$12.99</p>

When the page is rendered for a German visitor, the price becomes €13,00; for a Japanese visitor, it shows ¥1,300. The rounding logic is built‑in, so you never have to write custom currency helpers.

---

5. SEO‑Friendly Pre‑Rendering

Search engines can’t execute client‑side JavaScript reliably. SiteLocaleAI’s CLI crawls your Nuxt build, fetches translated content via the LLM, and writes static HTML files for each language.

# After a normal `nuxt generate`
npx site-locale prerender --output ./dist

The command:
1. Reads the generated HTML.
2. Sends each text node to the LLM with the target language.
3. Replaces the node with the translation.
4. Writes dist/en/, dist/es/, etc., preserving the original URL structure.

Search engines now index https://example.com/es/about as a fully translated page, boosting international SEO.

Read more: SEO pre‑rendering docs

---

6. Deploying the Site

Because the library is self‑hosted, you only need to expose your LLM API key as an environment variable. No third‑party SaaS calls are made from the client side, keeping latency low and data private.

# Example Dockerfile snippet
ENV OPENAI_API_KEY=sk-********

RUN npm run build
CMD ["npm", "run", "start"]

Deploy to any container platform (Vercel, Netlify, AWS, Azure) and your multilingual site is live instantly.

---

7. WordPress & Non‑Node Environments (Bonus)

If you ever need to translate a WordPress site, SiteLocaleAI offers a Node‑free plugin that runs the same LLM calls via a tiny PHP wrapper. The workflow is identical—just drop the plugin, add the same site-locale.config.js file, and run the CLI on your server.

---

8. Quick Checklist

• ✅ Install @sitelocaleai/js
• ✅ Add site-locale.config.js (or embed in nuxt.config.ts)
• ✅ Enable priceRounding and seoPrerender
• ✅ Run nuxt generate → npx site-locale prerender
• ✅ Deploy with your LLM API key in the environment

---

9. Wrap‑Up

With a single configuration file, you’ve turned a single‑language Nuxt.js marketing site into a global, SEO‑optimized experience. Prices feel natural, content respects brand tone, and search engines see fully rendered translations—without rewriting a line of Vue code.

---

Ready to go global? Try SiteLocaleAI today and see how fast you can launch multilingual sites. Visit the documentation for deeper integration options, or start a free trial on the Indie plan.