Translate Your Nuxt.js Marketing Site Overnight

If you run a marketing site built with Nuxt.js, you already know how powerful server‑side rendering (SSR) can be for SEO. The next step is to make that site multilingual, price‑aware, and fully indexable by search engines—without hiring a translation agency or rewriting your codebase.

SiteLocaleAI solves this problem with a single configuration file, a drop‑in JavaScript library, and a CLI that pre‑renders translated pages for crawlers. Below is a step‑by‑step SEO guide that takes you from a plain Nuxt.js project to a globally optimized site overnight.

---

1. Why Choose SiteLocaleAI for Nuxt.js?

Feature	Benefit
Framework‑agnostic JS library	Works with Nuxt, React, Vue, WordPress, Shopify, etc.
Self‑hosted LLM API keys	Use your own Claude, GPT‑4o‑mini, or other model – no data leakage.
Psychological price rounding	Prices appear natural in each currency (e.g., $9.99 → €9, 99).
SEO pre‑rendering CLI	Search engines receive fully translated HTML, improving crawlability.
Zero‑node WordPress plugin	Even non‑dev teams can benefit.

All of these translate directly into higher organic traffic, lower bounce rates, and better conversion across markets.

---

2. Install the Nuxt Module (One‑Liner)

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

The module registers a global plugin that reads a site‑locale.config.js file (or .ts) and injects translation helpers into your Vue components.

---

3. Create the Configuration File

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

// site-locale.config.js
export default {
  // The language that your source content is written in
  defaultLocale: 'en',

  // List of target locales – add or remove as you wish
  locales: [
    { code: 'en', name: 'English' },
    { code: 'es', name: 'Español' },
    { code: 'fr', name: 'Français' },
    { code: 'de', name: 'Deutsch' },
    // …more locales
  ],

  // LLM provider configuration – keep your API key secret
  llmProvider: {
    apiKey: process.env.LLM_API_KEY, // set in .env
    model: 'gpt-4o-mini', // or 'claude-3-haiku', etc.
  },

  // Enable psychological rounding for prices
  priceRounding: true,

  // Turn on SEO‑friendly pre‑rendering
  seoPreRender: true,
};

Tip: Store LLM_API_KEY in a .env file and add it to your CI pipeline. This keeps the key out of source control.

---

4. Wire the Config into nuxt.config.ts

// nuxt.config.ts
import siteLocaleConfig from './site-locale.config.js';

export default defineNuxtConfig({
  modules: ['@sitelocaleai/nuxt'],
  siteLocale: siteLocaleConfig,
  // optional: customize the runtime config for SEO meta tags
  runtimeConfig: {
    public: {
      siteName: 'Acme Marketing',
    },
  },
});

Now every page has access to $locale and $translate helpers. For example, in a component:

<template>
  <h1>{{ $t('hero.title') }}</h1>
  <p>{{ $t('hero.subtitle') }}</p>
  <price :amount="49.99" />
</template>

The $t function automatically fetches the translated string from the LLM, while the <price> component applies locale‑specific rounding.

---

5. Generate SEO‑Ready Pre‑Rendered Pages

SiteLocaleAI ships a CLI that crawls your routes, translates the HTML, and writes static files to dist/ for search engines.

# Build the Nuxt app first
npm run build

# Run the pre‑render step
npx site-locale pre-render

The CLI will:
1. Call your LLM for each route and locale.
2. Replace dynamic placeholders (prices, dates) with localized equivalents.
3. Output a folder structure like dist/es/, dist/fr/, etc., each containing fully translated HTML.

Search engines that respect Accept-Language or that follow the hreflang tags you add will index the correct language version, boosting international SEO.

---

6. Add hreflang Tags Automatically

SiteLocaleAI can inject hreflang meta tags based on the locales array. Add the following to your app.vue layout:

<script setup>
import { useHead } from '#app';
import { locales, defaultLocale } from '#sitelocaleai';

useHead({
  link: locales.map(l => ({
    rel: 'alternate',
    hreflang: l.code,
    href: `${process.env.BASE_URL}/${l.code}`,
  })),
});
</script>

Now Google and Bing understand the language targeting of each page.

---

7. Test Your International SEO

1. Google Search Console – Submit the sitemap for each locale (/sitemap.xml, /es/sitemap.xml).
2. Lighthouse – Run an audit on a translated URL (https://example.com/fr). Look for “International SEO” scores.
3. Manual Crawl – Use curl -H "Accept-Language: fr" https://example.com to verify the returned HTML is fully translated.

If you need deeper guidance, check the official docs: https://sitelocaleai.com/docs/seo and https://sitelocaleai.com/docs/quick-start.

---

8. Pricing Overview (Optional)

Plan	Price	Ideal For
Indie	$5/mo	Solo developers, hobby projects
Starter	$49/mo	Small agencies, up to 5 locales
Growth	$99/mo	Mid‑size SaaS, unlimited locales
Enterprise	$249/mo	Large brands, custom SLAs

All plans include the same core library; only the number of supported locales and priority support differ.

---

9. Launch and Monitor

After the pre‑render step, deploy the dist/ folder to your static host (Vercel, Netlify, Cloudflare Pages, etc.). Keep an eye on:
- Organic traffic by country (Google Analytics → Acquisition → Geo).
- Conversion rate after price rounding.
- Crawl errors in Search Console.

Iterate by adding new locales to site-locale.config.js and re‑running the CLI. The process is fully automated, so you can scale globally in minutes.

---

10. Ready to Go Global?

With just one config file and a couple of CLI commands, your Nuxt.js marketing site can be multilingual, price‑localized, and SEO‑optimized overnight. No extra Node.js servers, no third‑party translation services, and full control over your LLM keys.

Try SiteLocaleAI today and see how fast you can launch an international version of your site. 👉 Get started for free