Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

Published on SiteLocaleAI Blog

International expansion used be as simple as adding a single configuration file to your Nuxt.js project. SiteLocaleAI’s self‑hosted JavaScript library lets you:

• Translate any text using your own LLM API key (Claude, GPT‑4o‑mini, etc.)
• Localize prices with psychological rounding per currency
• Pre‑render translated pages for search‑engine indexing
• Stay framework agnostic – works with Vue, React, WordPress, Shopify, and more

In this tutorial we’ll spin up a Nuxt 3 marketing site, drop in SiteLocaleAI, and have a fully translated, SEO‑ready site by morning. All you need is a siteLocaleAI.config.js file and a few npm scripts.

---

1. Prerequisites

Requirement	Why it matters
Node.js ≥ 18	Nuxt 3 runs on modern Node versions
Nuxt 3 project	This guide assumes a fresh nux-app scaffold
LLM API key	SiteLocaleAI does not host models; you provide the key (Claude, GPT‑4o‑mini, etc.)
Git	Version control for the config file

If you don’t have a Nuxt project yet, create one quickly:

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

---

2. Install the SiteLocaleAI library

SiteLocaleAI is a zero‑dependency, drop‑in script. Add it via npm (or yarn) and it will be bundled with your client build.

npm i @sitelocaleai/js

---

3. Create a single config file

Create siteLocaleAI.config.js in the project root. This file tells SiteLocaleAI which languages to support, how to round prices, and which LLM endpoint to use.

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

  // Default language for the original content
  defaultLocale: "en",

  // LLM provider configuration – you can switch providers without code changes
  llm: {
    provider: "openai", // or "anthropic", "gemini", etc.
    apiKey: process.env.LLM_API_KEY,
    model: "gpt-4o-mini",
    temperature: 0.2,
  },

  // Price localization – psychological rounding per currency
  priceLocalization: {
    // Example: round to the nearest 0.99 for USD, 0.95 for EUR, etc.
    rounding: {
      USD: 0.99,
      EUR: 0.95,
      GBP: 0.95,
      JPY: 0, // No decimals for Yen
    },
    // Currency symbols – SiteLocaleAI will replace them automatically
    symbols: {
      USD: "$",
      EUR: "€",
      GBP: "£",
      JPY: "¥",
    },
  },

  // SEO pre‑rendering – generate static HTML for each locale
  seo: {
    // Enable automatic generation of locale‑specific routes
    preRender: true,
    // Output folder for the static files (Nuxt default is .output/public)
    outputDir: ".output/public",
  },
};

Tip: Store your API key in a .env file and add LLM_API_KEY=sk‑… – never commit it to source control.

---

4. Wire the library into Nuxt

Create a plugin that loads SiteLocaleAI on the client side. Nuxt 3 automatically registers any file in plugins/.

// plugins/siteLocaleAI.client.js
import { createApp } from "vue";
import SiteLocaleAI from "@sitelocaleai/js";
import config from "../siteLocaleAI.config.js";

export default defineNuxtPlugin((nuxtApp) => {
  // Initialise the library with the config we just defined
  const i18n = new SiteLocaleAI(config);

  // Attach to the global properties for easy access in components
  nuxtApp.provide("siteLocaleAI", i18n);
});

Now you can use useNuxtApp().$siteLocaleAI inside any component to translate text on the fly, but for static marketing pages we’ll let the library handle everything at build time.

---

5. Mark up translatable content

SiteLocaleAI scans the DOM for elements with a data-i18n attribute. Wrap your copy like this:

<h1 data-i18n>Welcome to Our Product</h1>
<p data-i18n>Boost your business with AI‑powered insights.</p>
<span data-i18n-price="123.45">$123.45</span>

The data-i18n-price attribute tells the library to localize the price according to the rounding rules defined earlier.

---

6. Build and pre‑render for SEO

Add a script to package.json that runs the SiteLocaleAI CLI after Nuxt builds the static site.

{
  "scripts": {
    "build": "nuxt build && nuxt generate",
    "seo:render": "site-localeai-cli --config siteLocaleAI.config.js"
  }
}

Now run:

npm run build && npm run seo:render

The CLI will:
1. Fetch the generated HTML for each locale.
2. Call the LLM to translate every data-i18n element.
3. Replace price values using the rounding table.
4. Write locale‑specific static files (/es/index.html, /de/index.html, …) into .output/public.

Search engines will see fully rendered, language‑specific pages, improving crawlability and ranking.

---

7. Deploy

Because the site is static, you can host it on any CDN (Vercel, Netlify, Cloudflare Pages). Just point the CDN to the .output/public folder.

If you ever need to add a new language, edit siteLocaleAI.config.js and re‑run the build – no code changes required.

---

8. Verify the result

Open the generated pages in a browser:

# English (default)
open .output/public/index.html

# Spanish
open .output/public/es/index.html

You should see translated headings, paragraphs, and correctly rounded prices (e.g., “$123.99” for USD, “€124.95” for EUR).

---

9. Internal resources

• Detailed configuration guide: SiteLocaleAI Docs
• CLI usage and flags: CLI Reference

---

10. Next steps & CTA

You now have a multilingual Nuxt.js marketing site that is SEO‑ready overnight. The same approach works for Vue, React, WordPress, Shopify, or any static site generator. Want to try it on your own project?

👉 Try SiteLocaleAI for free – sign up, grab an API key, and follow the one‑file setup. Your global audience is just a config away.