Switch Language Component

Language switcher component for internationalized applications. Provides seamless language switching with flag icons and dropdown menu.

Overview

The SwitchLanguage component enables users to change the application language. It integrates with Nuxt i18n for complete internationalization support and includes visual language indicators.

Preview

Basic Usage

<template>
  <div class="flex items-center space-x-4">
    <!-- Other header elements -->
    <SwitchLanguage />
  </div>
</template>

<script setup lang="ts">
import SwitchLanguage from '@/components/SwitchLanguage.vue'
</script>

Features

• Flag Icons - Visual language representation
• Dropdown Menu - Clean language selection interface
• Persistent Preference - Remembers user language choice
• SEO Friendly - Proper hreflang attributes
• Accessible - Keyboard navigation support

Supported Languages

Default languages included:

• 🇺🇸 English (en)
• 🇫🇷 French (fr)
• 🇪🇸 Spanish (es)
• 🇷🇺 Russian (ru)

Component API

Props

Prop	Type	Default	Description
compact	boolean	false	Show compact version with flag only

Events

Event	Payload	Description
languageChanged	{ locale: string }	Emitted when language changes

Configuration

Configure available languages in nuxt.config.ts:

export default defineNuxtConfig({
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', name: 'English', flag: '🇺🇸' },
      { code: 'fr', iso: 'fr-FR', name: 'Français', flag: '🇫🇷' },
      { code: 'es', iso: 'es-ES', name: 'Español', flag: '🇪🇸' },
      { code: 'ru', iso: 'ru-RU', name: 'Русский', flag: '🇷🇺' }
    ],
    defaultLocale: 'en'
  }
})

Composables Used

useI18n()

Nuxt i18n composable for language management:

const { locale, setLocale, availableLocales } = useI18n()

Styling

The component uses Tailwind CSS for responsive design and follows the site's design system for consistency with other UI elements.

Related Components

• Header - Contains language switcher
• Footer - May include language links