Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

Published on SiteLocaleAI.com

Why Nuxt.js + SiteLocaleAI?

Nuxt.js is the go‑to framework for fast, SEO‑friendly Vue applications. When you pair it with SiteLocaleAI, a self‑hosted JavaScript library that leverages your own LLM API keys, you get:

• Zero code changes – the library works with any framework, including Nuxt.
• Instant multilingual SEO – a CLI pre‑renders translated pages for search engines.
• Price localization – automatic currency conversion with psychological rounding.
• Full control of data – your LLM keys stay on your server, no third‑party data collection.

In this tutorial we’ll take a typical Nuxt.js marketing site, add a single sitelocale.config.yml file, and have a fully translated, SEO‑ready site by morning.

---

Prerequisites

Item	Version
Node.js	>= 18
Nuxt	3.x
LLM API key (Claude, GPT‑4o‑mini, etc.)	–
Git (optional)	–

Make sure you have a self‑hosted LLM endpoint or an API key from a provider that SiteLocaleAI supports.

---

Step 1 – Install SiteLocaleAI

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

SiteLocaleAI is framework‑agnostic, so the same package works for React, Vue, WordPress, Shopify, etc. No additional Node.js runtime is required for the WordPress plugin, but for Nuxt we simply install the core library.

---

Step 2 – Create a single configuration file

Create sitelocale.config.yml at the root of your project:

# sitelocale.config.yml
# One‑file configuration – all you need for overnight translation

# LLM provider – you can switch between Claude, GPT‑4o‑mini, etc.
llm:
  provider: "openai"
  api_key: "${OPENAI_API_KEY}"   # keep it in .env for security

# Target languages – ISO 639‑1 codes
languages:
  - es   # Spanish
  - fr   # French
  - de   # German
  - zh   # Chinese (Simplified)
  - ja   # Japanese

# Price localization settings
price:
  currency_map:
    USD: "USD"
    EUR: "EUR"
    GBP: "GBP"
    JPY: "JPY"
    CNY: "CNY"
  rounding: "psychological"   # 9.99 → 9.95, 19.99 → 19.95, etc.

# SEO pre‑rendering options
seo:
  prerender: true
  output_dir: "dist/translated"

# Paths to translate – glob patterns relative to the project root
paths:
  - "pages/**/*.vue"
  - "components/**/*.vue"
  - "content/**/*.md"

What this does:
- Tells SiteLocaleAI which LLM to call.
- Lists the languages you want.
- Enables price rounding per currency.
- Instructs the CLI to pre‑render translated static files into dist/translated.
- Scans all Vue pages, components, and markdown content.

---

Step 3 – Wire the library into Nuxt

Create a plugin file plugins/sitelocale.client.js:

// plugins/sitelocale.client.js
import { createSiteLocale } from "@sitelocaleai/core";

export default defineNuxtPlugin((nuxtApp) => {
  const locale = createSiteLocale({
    configPath: "sitelocale.config.yml",
    // optional: you can override config at runtime
  });

  // Make it available globally via $locale
  nuxtApp.provide("locale", locale);
});

Add the plugin to nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ["~/plugins/sitelocale.client.js"],
  // Ensure the server does not bundle the LLM keys
  runtimeConfig: {
    public: {},
    private: {
      openaiApiKey: process.env.OPENAI_API_KEY,
    },
  },
});

Now every component can call $locale.translate('key') if you need dynamic translation, but for static site content the CLI will handle everything.

---

Step 4 – Run the translation CLI

SiteLocaleAI ships a CLI that reads the config, calls the LLM, and writes the translated files.

# Make sure your .env contains OPENAI_API_KEY=your-key
n sitelocale-cli translate

The command will:
1. Parse all matching files.
2. Send each text block to the LLM.
3. Replace prices with localized, psychologically rounded values.
4. Output a parallel folder structure under dist/translated for each language (e.g., dist/translated/es, dist/translated/fr).

Because the library works in parallel (diffusion LLM), the whole process for a typical 10‑page marketing site finishes in under 30 minutes on a modest CPU.

---

Step 5 – Serve the translated site for SEO

You have two options:

5.1 Deploy a single multi‑language site

Configure your web server (NGINX, Vercel, Netlify) to serve the appropriate language folder based on the Accept‑Language header or a URL prefix (/es/, /fr/).

5.2 Use the Nuxt generate command

If you prefer a static export, run:

npm run generate -- --output dist/translated

The pre‑rendered HTML now contains the translated content, which search engines will index directly.

---

Step 6 – Verify SEO with SiteLocaleAI’s CLI

Run the SEO audit to ensure each language page has proper <title>, <meta description>, and hreflang tags.

n sitelocale-cli seo-audit --path dist/translated

The tool will output a report and suggest fixes (e.g., missing alt text). Resolve any warnings, then redeploy.

---

Step 7 – Optional: WordPress plugin for hybrid sites

If part of your marketing site lives in WordPress, you can install the SiteLocaleAI WordPress plugin (no Node.js required). The plugin reads the same sitelocale.config.yml from the root of your WordPress installation, so you keep a single source of truth across frameworks.

---

TL;DR – One‑File Overnight Translation

Action	Command / File
Install library	npm i @sitelocaleai/core
Config file	sitelocale.config.yml (single file)
Plugin wiring	plugins/sitelocale.client.js
Translate	n sitelocale-cli translate
SEO audit	n sitelocale-cli seo-audit
Deploy	Serve dist/translated or static export

That’s it—your Nuxt.js marketing site is now multilingual, price‑localized, and SEO‑optimized, all thanks to a single YAML file.

---

Next Steps

• Explore advanced LLM prompts for brand‑tone consistency.
• Add dynamic translation for user‑generated content via $locale.translate().
• Scale to more languages by extending the languages array.

Ready to go global? Try SiteLocaleAI today and see how easy overnight localization can be.

---

Documentation for Nuxt integration | CLI reference