Skip to content
fluenti
GitHub

Quick Start (Nuxt)

  1. Install packages

    Terminal window
    pnpm add @fluenti/nuxt @fluenti/core @fluenti/vue
    pnpm add -D @fluenti/cli @fluenti/vite-plugin

  2. Configure Nuxt

    nuxt.config.ts
    export default defineNuxtConfig({
      modules: ['@fluenti/nuxt'],
      fluenti: {
        locales: ['en', 'ja', 'zh'],
        defaultLocale: 'en',
        strategy: 'prefix_except_default',
      },
    })

  3. Create fluenti.config.ts

    fluenti.config.ts
    import { defineConfig } from '@fluenti/cli'
    

    export default defineConfig({
      sourceLocale: 'en',
      locales: ['en', 'ja', 'zh'],
      catalogDir: './locales',
      format: 'po',
      include: ['./pages/**/*.vue', './components/**/*.vue', './layouts/**/*.vue'],
      compileOutDir: './locales/compiled',
    })

  4. Write a page with translations

    pages/index.vue
    <script setup>
    import { useI18n } from '@fluenti/vue'
    import { ref } from 'vue'
    

    const { setLocale } = useI18n()
    const name = ref('World')
    

    // t`` tagged template — auto-reactive, no import needed
    const greeting = t`Hello, ${name}!`
    </script>
    

    <template>
      <!-- v-t directive — compiled away at build time -->
      <h1 v-t>Welcome to my app</h1>
      <p>{{ greeting }}</p>
    

      <!-- Rich text with real HTML -->
      <Trans>Read the <a href="/docs">docs</a> to learn more.</Trans>
    

      <nav>
        <NuxtLinkLocale to="/about">About</NuxtLinkLocale>
      </nav>
    

      <div>
        <button @click="setLocale('en')">English</button>
        <button @click="setLocale('ja')">日本語</button>
        <button @click="setLocale('zh')">中文</button>
      </div>
    </template>

  5. Extract, translate, and compile

    Terminal window
    npx fluenti extract    # → locales/ja.po, locales/zh.po
    # ... translate the .po files ...
    npx fluenti compile    # → locales/compiled/

  6. Add locale-aware navigation

    Use the routing composables for locale-prefixed links and SEO:

    layouts/default.vue
    <script setup>
    const localePath = useLocalePath()
    const switchLocalePath = useSwitchLocalePath()
    const head = useLocaleHead({
      addSeoAttributes: true,
      baseUrl: 'https://example.com',
    })
    

    useHead(head.value)
    </script>
    

    <template>
      <nav>
        <NuxtLink :to="localePath('/')">Home</NuxtLink>
        <NuxtLink :to="localePath('/about')">About</NuxtLink>
      </nav>
    

      <div>
        <NuxtLink :to="switchLocalePath('en')">EN</NuxtLink>
        <NuxtLink :to="switchLocalePath('ja')">JA</NuxtLink>
        <NuxtLink :to="switchLocalePath('zh')">ZH</NuxtLink>
      </div>
    

      <slot />
    </template>

Routing strategies

Section titled “Routing strategies”

The strategy option controls how locale prefixes appear in URLs:

StrategyDefault localeOther locales
prefix_except_default/about/ja/about
prefix/en/about/ja/about
prefix_and_default/about + /en/about/ja/about
no_prefix/about/about

SEO output

Section titled “SEO output”

useLocaleHead() generates the following <head> metadata automatically:

<html lang="en">
<head>
  <link rel="alternate" hreflang="en" href="https://example.com/about" />
  <link rel="alternate" hreflang="ja" href="https://example.com/ja/about" />
  <link rel="alternate" hreflang="zh" href="https://example.com/zh/about" />
  <link rel="alternate" hreflang="x-default" href="https://example.com/about" />
  <meta property="og:locale" content="en" />
  <meta property="og:locale:alternate" content="ja" />
  <meta property="og:locale:alternate" content="zh" />
</head>

Next steps

Section titled “Next steps”