Translate Your Nuxt.js Marketing Site Overnight with SiteLocaleAI

International growth usedn a nightmare for many marketers. You need a fully translated site, localized pricing, and SEO‑friendly URLs—all without rewriting your codebase. SiteLocaleAI solves this with a drop‑in JavaScript library that works with any framework, including Nuxt.js. In this guide we’ll show you how to spin up a multilingual marketing site in under an hour using just one configuration file.

---

1. Why Choose SiteLocaleAI for Nuxt?

• Framework‑agnostic – No Nuxt plugins required; just a vanilla JS bundle.
• Self‑hosted – Use your own LLM API key (Claude, GPT‑4o‑mini, etc.) so you stay in control of costs and data.
• Psychological price rounding – Prices are automatically adjusted per currency (e.g., $9.99 → €9, €9.99 → €9).
• SEO pre‑rendering – A CLI creates static HTML for each locale, letting Google index the translated pages.
• Zero Node.js on the server – Perfect for static hosts like Netlify or Vercel.

---

2. Install the Library

npm i @sitelocaleai/core

The package is tiny (≈ 12 KB gzipped) and has no runtime dependencies.

---

3. Create a Single Config File

Create site‑locale.config.js at the root of your Nuxt project:

// site-locale.config.js
export default {
  // The language that will be served to visitors who have no locale cookie
  defaultLocale: 'en',

  // All locales you want to support – add more as you grow
  locales: ['en', 'es', 'fr', 'de', 'ja'],

  // LLM provider configuration – keep your keys out of the repo
  llm: {
    provider: 'openai',
    apiKey: process.env.OPENAI_API_KEY,
    model: 'gpt-4o-mini'
  },

  // Enable psychological rounding for every currency
  priceRounding: true,

  // SEO options – the CLI will generate static HTML per locale
  seo: {
    preRender: true,
    outputDir: 'dist/translated' // <‑‑ where the CLI writes the files
  }
}

All you need is one file. The library reads it at runtime and during the pre‑render step.

---

4. Hook the Library into Nuxt

Create a tiny plugin that loads the config and injects the translation helper:

// plugins/site-locale.client.js
import localeConfig from '../site-locale.config.js'
import { initLocale } from '@sitelocaleai/core'

export default defineNuxtPlugin(async (nuxtApp) => {
  const locale = await initLocale(localeConfig)
  nuxtApp.provide('locale', locale)
})

Add the plugin to nuxt.config.ts:

export default defineNuxtConfig({
  plugins: ['~/plugins/site-locale.client.js']
})

Now you can use $locale in any component:

<template>
  <h1>{{ $locale.t('hero.title') }}</h1>
  <p>{{ $locale.formatPrice(product.price) }}</p>
</template>

---

5. SEO Pre‑Rendering with the CLI

SiteLocaleAI ships a CLI that crawls your site, translates every page, and writes static HTML files. Run it after you’ve built the Nuxt app:

npm run build   # Nuxt generates ./dist
n run site-locale prerender   # CLI reads site-locale.config.js

The CLI will:
1. Fetch each route from dist/.
2. Send the HTML to your chosen LLM for translation.
3. Apply price rounding per locale.
4. Write the localized HTML to dist/translated/<locale>/.

Search engines will now see a separate, fully rendered page for each language, dramatically improving indexing and ranking.

---

6. Deploy – No Server‑Side Node Required

Because the translation happens offline (during the CI build), the final output is pure static HTML, CSS, and JS. Deploy the dist/translated folder to any static host:

• Netlify → drag‑and‑drop or connect your repo.
• Vercel → set the output directory to dist/translated.
• Cloudflare Pages → same approach.

Your visitors will be served the correct locale automatically via a tiny client‑side script that reads the Accept‑Language header or a cookie.

---

7. Verify SEO Success

1. Google Search Console – Submit the new language‑specific URLs (e.g., /es/, /fr/).
2. Sitemaps – The CLI can generate a multilingual sitemap (sitemap.xml) that references each locale.
3. PageSpeed Insights – Because the pages are static, they score 90+ on performance.

For detailed steps, see the official docs: https://sitelocaleai.com/docs/seo-pre-rendering.

---

8. Keep Growing Your Locale List

Adding a new language is as simple as appending a code to the locales array and re‑running the pre‑render CLI. No code changes, no new bundles.

// site-locale.config.js (add Chinese)
locales: ['en', 'es', 'fr', 'de', 'ja', 'zh']

The next CI run will produce /zh/ pages automatically.

---

9. Wrap‑Up

With SiteLocaleAI you get:
- One config file → instant multilingual support.
- Self‑hosted LLM → full control over cost and data.
- SEO‑ready static pages → higher rankings and faster load times.
- Price rounding → a smoother checkout experience worldwide.

Ready to go global? Try SiteLocaleAI today and watch your Nuxt.js marketing site speak every language overnight.

---

[Quick‑Start Guide]https://sitelocaleai.com/docs/quick-start) | [SEO Pre‑Rendering Docs]https://sitelocaleai.com/docs/seo-pre-rendering)