Translate Your Nuxt.js Site Overnight with SiteLocaleAI

International growth is a matter of minutes, not months, when you use SiteLocaleAI. This guide shows how a typical Nuxt.js marketing site can be fully translated, price‑localized, and SEO‑ready with one configuration file and a couple of CLI commands. The approach works with any LLM API key you already own (Claude, GPT‑4o‑mini, etc.) and requires no server‑side changes.

---

1. Install the library

SiteLocaleAI is a drop‑in JavaScript bundle that works with any framework. In a Nuxt project you can install it via npm or yarn:

npm i @sitelocaleai/js
# or
yarn add @sitelocaleai/js

The package ships a tiny runtime (siteLocaleAI.min.js) that you will import in your Nuxt plugin.

---

2. Create a single config file

Create a file called siteLocale.config.js at the root of your project. This file tells SiteLocaleAI which languages to support, which LLM to call, and how to round prices.

// siteLocale.config.js
export default {
  // Languages you want to serve. The first entry is the default (usually English).
  locales: [
    { code: 'en', name: 'English' },
    { code: 'es', name: 'Español' },
    { code: 'de', name: 'Deutsch' },
    { code: 'fr', name: 'Français' },
  ],

  // Your LLM endpoint – keep the key secret on the server side.
  // The library will call this endpoint from the browser using your own API key.
  llm: {
    provider: 'openai', // or 'anthropic', 'google', etc.
    model: 'gpt-4o-mini',
    apiKey: process.env.SITELOCALEAI_API_KEY,
  },

  // Price localization – you can provide a custom rounding function.
  priceLocalization: {
    // Example: round to the nearest 0.99 for USD, 0.95 for EUR, etc.
    roundingRules: {
      USD: (value) => Math.round(value * 100 - 1) / 100,
      EUR: (value) => Math.round(value * 100 - 5) / 100,
      GBP: (value) => Math.round(value * 100 - 1) / 100,
    },
  },

  // Enable SEO pre‑rendering (see step 5).
  seo: {
    enable: true,
    // Path where the pre‑rendered HTML will be written.
    outDir: 'dist/seo',
  },
};

All settings are optional – SiteLocaleAI falls back to sensible defaults if you omit a block.

---

3. Wire the library into Nuxt

Create a Nuxt plugin that loads the library and applies the configuration at runtime.

// plugins/siteLocale.js
import { defineNuxtPlugin } from '#app';
import SiteLocaleAI from '@sitelocaleai/js';
import localeConfig from '@/siteLocale.config.js';

export default defineNuxtPlugin((nuxtApp) => {
  // Initialise the library once the app is ready.
  SiteLocaleAI.init({
    locales: localeConfig.locales,
    llm: localeConfig.llm,
    priceLocalization: localeConfig.priceLocalization,
    // The library automatically scans the DOM for translatable text.
  });

  // Expose a helper so you can change language from any component.
  nuxtApp.provide('setLocale', (code) => SiteLocaleAI.setLocale(code));
});

Add the plugin to nuxt.config.ts:

export default defineNuxtConfig({
  plugins: [{ src: '@/plugins/siteLocale.js', mode: 'client' }],
  // Ensure the environment variable is available in the client bundle.
  runtimeConfig: {
    public: {
      SITELOCALEAI_API_KEY: process.env.SITELOCALEAI_API_KEY,
    },
  },
});

Now every page rendered by Nuxt will be scanned by SiteLocaleAI and translated on the fly.

---

4. Localize prices in your components

SiteLocaleAI provides a simple helper to format numbers according to the active locale and rounding rules.

<template>
  <div>
    <p>{{ $t('pricing.title') }}</p>
    <p>{{ formatPrice(product.price) }}</p>
    <button @click="switchTo('es')">Español</button>
  </div>
</template>

<script setup>
import { useLocale } from '@/composables/useLocale';

const { formatPrice, switchTo } = useLocale();
const product = { price: 49.99 };
</script>

The useLocale composable is just a thin wrapper around the library:

// composables/useLocale.js
import SiteLocaleAI from '@sitelocaleai/js';

export function useLocale() {
  return {
    formatPrice: (value) => SiteLocaleAI.formatPrice(value),
    switchTo: (code) => SiteLocaleAI.setLocale(code),
  };
}

All price strings will be rounded according to the rules defined in siteLocale.config.js and displayed with the correct currency symbol.

---

5. SEO pre‑rendering with the CLI

Search engines cannot execute JavaScript reliably, so you need static HTML for each language. SiteLocaleAI ships a CLI that crawls your site, renders every locale, and writes the result to dist/seo.

# Build the Nuxt app first
npm run build

# Run the SEO pre‑renderer
npx siteLocaleAI seo --config siteLocale.config.js

The command will:
1. Start a headless Chromium instance.
2. Visit every route defined in nuxt.config.ts.
3. Switch the locale, capture the fully translated DOM, and write an HTML file per language.
4. Place the files in dist/seo where your web server can serve them directly.

You can read more about the CLI options in the SiteLocaleAI docs.

---

6. Deploy – no extra runtime needed

Because the translation happens in the browser using your own LLM API key, the production server only needs to serve static assets. Deploy the dist folder to any static host (Vercel, Netlify, Cloudflare Pages, etc.) and you’re live in under an hour.

---

7. Verify the result

1. Visit https://your‑domain.com – you should see the default English version.
2. Click the language switcher you added (or manually add ?lang=es to the URL). The page instantly shows Spanish text and correctly rounded EUR prices.
3. Inspect the source of https://your‑domain.com/seo/es/index.html. The HTML contains the fully translated content, confirming that search bots will index the right language.

---

8. Next steps

• A/B test different price rounding strategies to see which yields higher conversion.
• Add more locales by extending the locales array – the library will handle translation automatically.
• Combine with a CDN for edge‑caching of the pre‑rendered HTML, guaranteeing sub‑second load times worldwide.

---

Ready to go global? Try SiteLocaleAI today and launch a multilingual Nuxt.js site overnight. Visit sitelocaleai.com for pricing and a free trial.