Internationalization
Nuxfire includes internationalization support using @nuxtjs/i18n, making it easy to serve your application in multiple languages.
English, Brazilian Portuguese, and Spanish are pre-configured — add your own languages and translations.
What's Included
- Pre-configured locale management across apps and layers
- A dedicated language switcher on the Appearance settings page and in the public navigation bar
Configuration
Locales are configured in nuxt.config.ts:
i18n: {
restructureDir: "i18n",
defaultLocale: "en",
strategy: "no_prefix",
locales: [
{ name: "English (US)", code: "en", language: "en-US", file: "en.json" },
{
name: "Português (Brasil)",
code: "pt-br",
language: "pt-BR",
file: "pt-BR.json",
},
{ name: "Español", code: "es", language: "es-ES", file: "es.json" },
],
experimental: { typedOptionsAndMessages: "default" },
}
Translation Messages
Translations are structured in i18n/locales/ directory as individual JSON files (en.json, pt-BR.json, es.json) in each app and layer (e.g. apps/app/i18n/locales/ and layers/*/i18n/locales/). Runtime configuration in i18n.config.ts configures fallback options:
export default defineI18nConfig(() => ({
legacy: false,
fallbackLocale: "en",
}));
Language Switcher
In the dashboard, language selection lives in Account Settings → Appearance (apps/app/app/pages/account-settings/appearance.vue), alongside theme preferences:
<script setup lang="ts">
const { locale, locales, setLocale } = useI18n();
</script>
<template>
<UPageCard title="Language" description="Choose the language used across Nuxfire." variant="subtle">
<div class="flex flex-col gap-1">
<button
v-for="item in locales"
:key="item.code"
type="button"
class="flex items-center justify-between gap-3 px-3 py-2 rounded-md transition-colors cursor-pointer"
:class="locale === item.code ? 'bg-primary/10 text-primary font-medium' : 'hover:bg-elevated text-default'"
@click="setLocale(item.code)"
>
<span class="text-sm">{{ item.name ?? item.code }}</span>
<UIcon v-if="locale === item.code" name="i-lucide-check" class="size-4" />
</button>
</div>
</UPageCard>
</template>
Ready to build and launch your SaaS?
Get 100% full source code ownership, zero proprietary wrappers, and architecture engineered for millions of requests on Cloudflare.