Framework Guide

Translate Your Nuxt.js Site Overnight with SiteLocaleAI

Published March 14, 2026

Translate Your Nuxt.js Site Overnight with SiteLocaleAI

International expansion no be as simple as adding a few lines of configuration. In this tutorial we’ll take a Nuxt 3 marketing site and make it multilingual, price‑localized, and SEO‑ready in a single night using SiteLocaleAI – a self‑hosted, framework‑agnostic JavaScript library that talks to any LLM you own (Claude, GPT‑4o‑mini, etc.).

1. Why SiteLocaleAI?

Drop‑in JS library – works with Vue, React, WordPress, Shopify, or plain HTML. No build‑time magic required.
Self‑hosted – you keep your LLM API keys, data never leaves your server.
Psychological price rounding – automatically converts $99.99 → €89, $199.99 → ¥21,900, etc.
SEO pre‑rendering CLI – generates static, fully translated HTML for crawlers, giving you instant indexing.
WordPress plugin – for non‑Node environments, but we’ll stay in the Nuxt ecosystem.

All of these features are available under the $5 Indie plan, which is perfect for a single‑page marketing site.

2. Prerequisites

Item	Version
Node.js	>= 18
Nuxt 3	latest
SiteLocaleAI npm package	`@sitelocaleai/core`
LLM API key	Claude, GPT‑4o‑mini, etc.
(Optional) Docker for CI/CD	any recent version

Make sure you have a Nuxt project already set up:

n create nuxt-app my‑marketing‑site
cd my‑marketing‑site
npm i

3. Install SiteLocaleAI

npm i @sitelocaleai/core

The package ships a tiny runtime (sitelocale.js) and a CLI (sitelocale-cli). Both are framework‑agnostic, so you can import them anywhere.

4. Create a single configuration file

Create sitelocale.config.js at the project root:

// sitelocale.config.js
module.exports = {
  // Your LLM endpoint – can be OpenAI, Anthropic, etc.
  llm: {
    provider: "openai",
    apiKey: process.env.LLM_API_KEY,
    model: "gpt-4o-mini",
  },
  // Languages you want to support
  locales: [
    { code: "en", name: "English" },
    { code: "es", name: "Spanish" },
    { code: "fr", name: "French" },
    { code: "de", name: "German" },
  ],
  // Price localisation rules (psychological rounding)
  priceStrategy: {
    rounding: "psychological",
    currencyMap: {
      USD: "$",
      EUR: "€",
      GBP: "£",
      JPY: "¥",
    },
  },
  // Paths to pre‑render for SEO – Nuxt pages are auto‑discovered, but you can add static routes
  seo: {
    routes: ["/", "/features", "/pricing"],
  },
};

All the heavy lifting is now in this file. No per‑page code changes are required.

5. Wire the library into Nuxt

Create a plugin that injects the translation helper into the Vue app:

// plugins/sitelocale.client.js
import { createSiteLocale } from "@sitelocaleai/core";
import config from "../../sitelocale.config.js";

export default defineNuxtPlugin((nuxtApp) => {
  const locale = createSiteLocale(config);
  // Make it available as $locale in components
  nuxtApp.provide("locale", locale);
});

Add the plugin to nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: ["~/plugins/sitelocale.client.js"],
  // Ensure the config file is bundled
  alias: {
    "@sitelocale/config": "~/sitelocale.config.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="199.99" />
</template>

The t method sends the source string to the LLM, caches the result, and returns the translation for the current locale.

6. Automatic price localisation

Create a tiny component that asks SiteLocaleAI to round prices:

<!-- components/PriceDisplay.vue -->
<script setup>
import { useLocale } from "#app";
const props = defineProps({ amount: Number });
const locale = useLocale();
</script>

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

formatPrice respects the priceStrategy defined in sitelocale.config.js. For example, a USD $199.99 becomes €179 for French users.

7. SEO pre‑rendering with the CLI

After you have built the site (npm run build), run the CLI to generate static HTML for each locale:

n i -g @sitelocaleai/cli
npx sitelocale-cli prerender --config sitelocale.config.js

The CLI does three things:
1. Renders each route (/, /features, /pricing) with every locale.
2. Injects <link rel="alternate" hreflang="…"> tags for search engines.
3. Writes the output to dist/locale/<code>/ – a folder structure that can be served directly from any static host (Vercel, Netlify, Cloudflare Pages).

You can now point your CDN to the dist folder and every crawler will see a fully translated version of each page, boosting international SEO.

8. Deploy in minutes

If you use Vercel, add a build step in vercel.json:

{
  "builds": [
    { "src": "nuxt.config.ts", "use": "@vercel/nuxt" }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/dist/$1" }
  ]
}

And a post‑build script in package.json:

{
  "scripts": {
    "build": "nuxt build && npx sitelocale-cli prerender --config sitelocale.config.js"
  }
}

Push to Git, Vercel builds, runs the CLI, and your multilingual site is live overnight.

9. Verify the output

Open https://your‑domain.com/es/ and you should see:
- All UI text translated to Spanish.
- Prices displayed in € with psychological rounding.
- <link rel="alternate" hreflang="es" href="https://your‑domain.com/es/"/> in the <head>.

Use Google Search Console’s URL Inspection tool to confirm that the rendered HTML is indexable.

10. Next steps & resources

Dive deeper into custom translation prompts in the docs: https://sitelocaleai.com/docs/custom-prompts
Learn how to cache translations with Redis for ultra‑fast repeat visits.
Explore the WordPress plugin if you have a hybrid site: https://sitelocaleai.com/docs/wordpress

11. Ready to go global?

With just a single config file, a couple of npm commands, and the power of your own LLM, you can turn any Nuxt.js marketing site into a multilingual, price‑aware, SEO‑optimized asset. No extra frameworks, no third‑party SaaS data pipelines—just clean, self‑hosted code.

Try SiteLocaleAI today and watch your international traffic soar!

Back to blog