Framework Guide

Translate Your Nuxt.js Site Overnight with SiteLocaleAI

Published May 29, 2026

Translate Your Nuxt.js Site Overnight with SiteLocaleAI

Translate Your Nuxt.js Marketing Site Overnight

SiteLocaleAI makes international expansion a one‑click operation. In this guide we’ll take a typical Nuxt 3 marketing site and turn it into a multilingual, SEO‑friendly powerhouse with a single config file and a few lines of JavaScript. No rebuild, no extra Node server, and you keep full control of your LLM provider.

1. Why Nuxt.js + SiteLocaleAI?

  • Framework‑agnostic – The library works with any front‑end framework, but Nuxt’s file‑based routing and static‑site generation (SSG) give us a perfect playground for SEO pre‑rendering.
  • Self‑hosted LLMs – Use your own Claude, GPT‑4o‑mini, or any compatible API key. No data leaves your infrastructure.
  • Price localization – SiteLocaleAI automatically applies psychological rounding per currency (e.g., $9.99 → $9.95) without extra code.
  • Zero‑runtime cost for crawlers – The CLI pre‑renders translated pages, so Google sees fully rendered HTML for every locale.

2. Install the Library

Add the npm package (or just pull the UMD bundle if you prefer a script tag). For a typical Nuxt project:

npm i @sitelocaleai/js

If you’re on a static host that doesn’t support Node, you can skip this step and use the CDN version in the next section.

3. Create a Single Configuration File

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

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

  // All locales you want to support
  languages: ['en', 'es', 'fr', 'de'],

  // Choose your LLM provider – SiteLocaleAI works with any OpenAI‑compatible endpoint
  llmProvider: 'openai',
  apiKey: process.env.OPENAI_API_KEY,

  // Psychological rounding rules per currency (optional but recommended)
  rounding: {
    USD: 0.99,
    EUR: 0.95,
    GBP: 0.99,
    JPY: 0,
  },

  // Path to the JSON file that contains your translation strings (auto‑generated by the CLI)
  translationPath: './locales',

  // Enable SEO pre‑rendering – the CLI will generate static HTML for each locale
  seo: {
    enabled: true,
    outputDir: './dist',
  },
}

That’s it – all the heavy lifting is now declarative.

4. Wire the Library into Nuxt

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

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

export default defineNuxtPlugin(async (nuxtApp) => {
  const locale = await createLocale(config)
  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.t('hero.subtitle') }}</p>
  <price-display :amount="49.99" currency="USD" />
</template>

The t function pulls the appropriate translation from the pre‑generated JSON files, while price-display (shown later) applies the rounding rules.

5. Generate Translation Files with the CLI

SiteLocaleAI ships a CLI that scans your source files, extracts translatable strings, and calls your LLM to produce translations. Run it once after you’ve added the $locale.t calls:

npx site-locale-cli generate --config site-locale.config.js

The command creates a locales/ folder with en.json, es.json, fr.json, and de.json. Each file contains key‑value pairs ready for the runtime.

6. SEO Pre‑Rendering for Search Engines

With seo.enabled set to true, the CLI also produces static HTML for every locale. This is crucial because Google’s crawler prefers fully rendered pages.

npx site-locale-cli prerender --config site-locale.config.js

The output lands in dist/, mirroring your normal Nuxt build. Deploy the dist/ folder to any static host (Vercel, Netlify, Cloudflare Pages). Each locale gets its own URL, e.g.:

  • https://example.com/ (English)
  • https://example.com/es/
  • https://example.com/fr/
  • https://example.com/de/

Search engines will index each page separately, boosting international SEO without extra server‑side logic.

7. Price Localization Component (Optional)

Create a tiny component that respects the rounding rules defined in the config:

<script setup>
import { useLocale } from '#app'
const props = defineProps({ amount: Number, currency: String })
const { rounding } = useLocale()

function formatPrice(amount, currency) {
  const round = rounding[currency] ?? 0.99
  const rounded = Math.floor(amount) + round
  return new Intl.NumberFormat('en-US', { style: 'currency', currency }).format(rounded)
}
</script>

<template>
  <span>{{ formatPrice(props.amount, props.currency) }}</span>
</template>

Now every price on the site automatically follows the psychological rounding you configured.

8. WordPress & Shopify Compatibility (Quick Note)

If you ever need to reuse the same translation logic on a WordPress or Shopify store, SiteLocaleAI offers a Node‑less plugin that reads the same locales/ JSON files. The integration steps are identical – just drop the script tag and point it at your config URL.

9. Test & Deploy

  1. Local test – Run npm run dev and switch locales via ?lang=es query param. Verify text and prices.
  2. SEO audit – Use Google Search Console’s URL Inspection tool on https://example.com/es/ to confirm that the rendered HTML contains the translated content.
  3. Deploy – Push the dist/ folder to your static host. No additional server code is required.

10. Resources & Next Steps

Ready to go global?

With just a config file and a couple of CLI commands, your Nuxt.js marketing site is fully translated, price‑localized, and SEO‑ready for every target market. Try SiteLocaleAI today and launch your international presence overnight.

Back to blog