Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

TL;DR – With just one configuration file and a single CLI command you can serve a fully‑translated Nuxt.js marketing site, complete with SEO‑friendly pre‑rendered pages and price localization. This guide walks you through the entire process, from installation to deployment.

---

1. Why SiteLocaleAI for Nuxt?

• Framework‑agnostic: Works out of the box with Nuxt, Vue, React, WordPress, Shopify, etc.
• Self‑hosted: You keep full control of your LLM API keys (Claude, GPT‑4o‑mini, etc.).
• Price localization: Automatic psychological rounding per currency.
• SEO pre‑rendering: The CLI generates static HTML for every language, so search engines index the translated content directly.

All of this is achieved with a drop‑in JavaScript library and a tiny siteLocaleAI.config.js file – no Node.js runtime required on the client side.

---

2. Prerequisites

• Nuxt 3 project (or Nuxt 2 with the bridge).
• Access to an LLM API key (e.g., OPENAI_API_KEY).
• Node.js 18+ for the build step (only needed locally).

---

3. Install the library

# Install the npm package (the core runtime)
npm i @sitelocaleai/js

Note: The package is only a thin wrapper; the heavy lifting happens in the LLM you point it to.

---

4. Create the single configuration file

Create siteLocaleAI.config.js at the root of your project:

// siteLocaleAI.config.js
module.exports = {
  // Your LLM provider – can be Claude, GPT‑4o‑mini, etc.
  llm: {
    provider: 'openai',
    apiKey: process.env.OPENAI_API_KEY,
    model: 'gpt-4o-mini',
  },
  // Languages you want to support
  locales: ['en', 'es', 'fr', 'de', 'ja'],
  // Price localization settings (psychological rounding)
  price: {
    enabled: true,
    rounding: {
      USD: 0.99,
      EUR: 0.95,
      GBP: 0.95,
      JPY: 0,
    },
  },
  // Optional: custom translation prompts
  prompt: `Translate the following HTML snippet, preserving tags and attributes. Keep brand tone consistent.`,
};

All you need to change is the apiKey and the list of locales. The library will read this file at runtime and at build time.

---

5. Wire the library into Nuxt

5.1 Add a plugin

Create plugins/siteLocaleAI.client.js:

// plugins/siteLocaleAI.client.js
import { initSiteLocaleAI } from '@sitelocaleai/js';

export default defineNuxtPlugin((nuxtApp) => {
  // Initialize the client‑side translator
  initSiteLocaleAI({
    configPath: '/siteLocaleAI.config.js',
    fallbackLocale: 'en',
  });
});

5.2 Register the plugin in nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ['~/plugins/siteLocaleAI.client.js'],
  // Ensure the config file is copied to the public folder
  publicRuntimeConfig: {
    siteLocaleAIConfig: '/siteLocaleAI.config.js',
  },
});

Now every page will automatically request translations from your LLM when the user switches language.

---

6. SEO‑friendly pre‑rendering with the CLI

SiteLocaleAI ships a CLI that crawls your Nuxt routes, asks the LLM for translations, and writes static HTML files for each locale. Search engines will then index the translated pages directly.

# Install the CLI globally (optional)
npm i -g @sitelocaleai/cli

# Run the pre‑render step
npx siteLocaleAI prerender --config siteLocaleAI.config.js --output ./dist-localized

The command does the following:
1. Starts a headless instance of your Nuxt app.
2. Visits every route defined in pages/.
3. Sends the rendered HTML to the LLM with the custom prompt.
4. Writes dist-localized/<locale>/index.html for each language.

You can now point your CDN or static host to the dist-localized folder. The URLs will look like:

https://example.com/es/
https://example.com/fr/

---

7. Deploy

n
If you host on Vercel, Netlify, or any static provider, simply configure the build step:

// package.json
{
  "scripts": {
    "build": "nuxt build && npx siteLocaleAI prerender --config siteLocaleAI.config.js --output ./dist-localized",
    "start": "nuxt start"
  }
}

After the CI pipeline finishes, the static site will contain all translated pages, each with proper <link rel="alternate" hreflang="..."> tags automatically injected by the library.

---

8. WordPress users – no Node.js required

If you ever need to bring the same setup to a WordPress site, SiteLocaleAI offers a plugin that reads the same siteLocaleAI.config.js file and runs the CLI on the server side. The workflow is identical, just install the plugin from the WordPress admin dashboard.

---

9. Quick sanity check

1. Visit https://your‑site.com/ – you should see the default English version.
2. Add ?lang=es to the URL – the page instantly swaps to Spanish without a full reload.
3. Inspect the source of https://your‑site.com/es/ – you’ll see fully translated HTML, perfect for Google indexing.

---

10. Next steps

• A/B test different price rounding strategies using the price.rounding map.
• Add custom locale‑specific copy by extending the prompt field.
• Monitor SEO performance with Google Search Console – you’ll see impressions for each language appear within days.

---

11. Need help?

Our docs cover every nuance:
- Installation guide
- CLI reference

If you hit a snag, the community Slack and our support email are just a click away.

---

12. Ready to go global?

Deploy your multilingual Nuxt.js marketing site overnight with SiteLocaleAI. Sign up for a free trial, grab your API key, and start translating today!

Try SiteLocaleAI now → https://sitelocaleai.com