Nuxflare

Internationalization

Nuxflare Pro includes internationalization support using `@nuxtjs/i18n`, making it easy to serve your application in multiple languages.

Note: English and French are pre-configured - just add your own languages and translations!

What's Included

The i18n setup provides:

  • Pre-configured locale management
  • Language switching component

Nuxflare Internationalization Screenshot

Configuration

Set up your locales in nuxt.config.ts:

packages/app/nuxt.config.ts 
i18n: {
  vueI18n: "./i18n.config.ts",
  defaultLocale: "en",
  strategy: "no_prefix",
  locales: [
    {
      name: "English (US)",
      code: "en",
      language: "en-US",
    },
    {
      name: "French",
      code: "fr",
      language: "fr",
    },
  ],
}

Translation Messages

Define your translations in i18n.config.ts:

packages/app/i18n.config.ts 
export default defineI18nConfig(() => ({
  legacy: false,
  locale: "en",
  messages: {
    en: {
      welcome: "Welcome to the dashboard!",
    },
    fr: {
      welcome: "Bienvenue sur le tableau de bord !",
    },
  },
}));

Language Switcher

There's a simple language switcher component:

<template>
  <ClientOnly>
    <USelectMenu
      v-model="currentLocale"
      :options="locales"
      option-attribute="name"
      value-attribute="code"
      @change="setLocale($event)"
    >
      <template #label>
        {{ getCurrentLocaleName }}
      </template>
    </USelectMenu>
  </ClientOnly>
</template>

<script setup lang="ts">
const { locale: currentLocale, locales, setLocale } = useI18n();
const getCurrentLocaleName = computed(() => {
  return locales.value.find((l) => l.code === currentLocale.value)?.name;
});
</script>