Translate a Nuxt.js Marketing Site Overnight

When you need to reach a global audience, speed and SEO‑friendliness are non‑negotiable. SiteLocaleAI’s drop‑in JavaScript library makes it possible to translate a Nuxt 3 marketing site in a single night—no rewrite, no external proxy, just a tiny config file and your own LLM API key.

Why Nuxt.js + SiteLocaleAI?

• Framework‑agnostic – works with Vue, React, WordPress, Shopify, or any static site generator.
• Self‑hosted LLMs – you keep control of your API keys (Claude, GPT‑4o‑mini, etc.) and data.
• Psychological price rounding – automatically adapt prices to local expectations.
• SEO pre‑rendering CLI – search engines crawl fully translated HTML, not just client‑side JavaScript.

Step‑by‑Step Setup

1. Install the library

npm i @sitelocaleai/js

2. Create a single config file

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

// sitelocale.config.js
module.exports = {
  // Your LLM provider (Claude, GPT‑4o‑mini, etc.)
  llmProvider: "openai",
  apiKey: process.env.OPENAI_API_KEY,

  // Target languages – ISO‑639‑1 codes
  locales: ["en", "es", "fr", "de", "ja"],

  // Price localization rules
  priceRounding: {
    USD: { step: 0.99, prefix: "$" },
    EUR: { step: 0.95, suffix: "€" },
    JPY: { step: 100, suffix: "¥" }
  },

  // SEO pre‑rendering options
  seo: {
    enabled: true,
    outputDir: "dist/seo"
  }
};

3. Wire the library into Nuxt

Edit nuxt.config.ts (or nuxt.config.js) and add the plugin:

// nuxt.config.ts
import { defineNuxtConfig } from "nuxt";

export default defineNuxtConfig({
  // Register SiteLocaleAI as a client‑side plugin
  plugins: [{ src: "@plugins/sitelocale.ts", mode: "client" }],

  // Ensure the config file is bundled
  alias: {
    "@sitelocale/config": "./sitelocale.config.js"
  }
});

Create the plugin file:

// plugins/sitelocale.ts
import { createApp } from "vue";
import SiteLocale from "@sitelocaleai/js";

export default defineNuxtPlugin((nuxtApp) => {
  const config = require("@sitelocale/config");
  const app = createApp(nuxtApp.vueApp);
  app.use(SiteLocale, config);
});

4. Translate your content

Wrap any text you want to translate with the v-locale directive:

<h1 v-locale>{{ $t('hero.title') }}</h1>
<p v-locale>{{ $t('hero.subtitle') }}</p>

If you use the built‑in i18n module, SiteLocaleAI will automatically replace $t calls during the SEO pre‑render step.

5. Run the SEO pre‑render CLI

npx sitelocale-cli prerender --config sitelocale.config.js

The command crawls every route, asks the LLM to translate the HTML, applies price rounding, and writes static files to dist/seo. Deploy that folder to your CDN and search engines will index the localized pages instantly.

Tips for Perfect International SEO

Tip	Why it matters
Canonical tags per language	Prevent duplicate‑content penalties.
Hreflang attributes	Tell Google which URL serves which language.
Localized meta tags	Boost click‑through rates in SERPs.
Currency‑aware schema.org markup	Improves rich‑result eligibility.

SiteLocaleAI automatically injects hreflang and localized <title>/<meta description> tags when the seo.enabled flag is on. You can fine‑tune them in sitelocale.config.js under the seo object.

Real‑World Example

A SaaS startup using Nuxt 3 rolled out a French, German, and Japanese version of its landing page in 8 hours. After running the pre‑render CLI, Google Search Console reported a +42 % increase in impressions for the new locales within the first week—without any manual translation effort.

Where to Learn More

• Detailed API reference: SiteLocaleAI Docs
• SEO pre‑rendering guide: SEO Docs

---

Ready to go global?
Add SiteLocaleAI to your Nuxt project today and watch your international traffic soar.

Try SiteLocaleAI now – the fastest way to translate, localize, and rank worldwide.