Internationalization

Add multi-language support to your SaaS with built-in locale management and language switching.

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

Note: The boilerplate comes with English and French pre-configured - just add your own languages and translations!

What's Included

The i18n setup provides:

  • Pre-configured locale management
  • Language switching component

Configuration

Set up your locales in nuxt.config.ts:

~/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:

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

The boilerplate includes a ready-to-use 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>

Need Help?

See It in Action

Want to see it in action? Create an account and try switching languages using the language selector in the sidebar right on this site.