Skip to content
fluenti
GitHub

Setup & Routing

@fluenti/nuxt provides locale-prefixed routing, navigation composables, and SEO metadata out of the box.

Module Setup

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

The module automatically registers the Vite plugin — v-t directive transforms, <Trans> / <Plural> compile-time optimization, and code splitting all work out of the box.

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

NuxtLinkLocale

Section titled “NuxtLinkLocale”

Use <NuxtLinkLocale> instead of <NuxtLink> for locale-aware navigation. It automatically adds the correct locale prefix:

<template>
  <nav>
    <!-- Automatically prefixed: /about (en), /ja/about (ja) -->
    <NuxtLinkLocale to="/about">About</NuxtLinkLocale>
    <NuxtLinkLocale to="/contact">Contact</NuxtLinkLocale>
  </nav>
</template>
Section titled “Navigation Composables”

useLocalePath()

Section titled “useLocalePath()”

Returns a function that generates locale-prefixed paths:

<script setup>
const localePath = useLocalePath()
</script>


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

useSwitchLocalePath()

Section titled “useSwitchLocalePath()”

Returns a function that generates a path to the current page in a different locale:

<script setup>
const switchLocalePath = useSwitchLocalePath()
</script>


<template>
  <NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
  <NuxtLink :to="switchLocalePath('ja')">日本語</NuxtLink>
  <NuxtLink :to="switchLocalePath('zh')">中文</NuxtLink>
</template>

useLocaleHead()

Section titled “useLocaleHead()”

Generates SEO-friendly <head> metadata including hreflang links and og:locale tags:

<script setup>
const head = useLocaleHead({
  addSeoAttributes: true,
  baseUrl: 'https://example.com',
})


useHead(head.value)
</script>

This generates:

<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>

Programmatic Locale Switching

Section titled “Programmatic Locale Switching”

Use setLocale() from useI18n() for programmatic switching:

<script setup>
import { useI18n } from '@fluenti/vue'


const { setLocale } = useI18n()
</script>


<template>
  <select @change="setLocale($event.target.value)">
    <option value="en">English</option>
    <option value="ja">日本語</option>
    <option value="zh">中文</option>
  </select>
</template>

The module automatically:

  • Updates the URL path to include/remove the locale prefix
  • Syncs the cookie for future visits
  • Updates <html lang> attribute