Add language support

app/app.vue

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+import * as locales from '@nuxt/ui-pro/locale'
+
+const { locale } = useI18n()
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
+
 const colorMode = useColorMode()
 
 const color = computed(() => colorMode.value === 'dark' ? '#1b1718' : 'white')
@@ -13,7 +19,8 @@ useHead({
     { rel: 'icon', href: '/favicon.ico' }
   ],
   htmlAttrs: {
-    lang: 'en'
+    lang,
+    dir
   }
 })
 
@@ -32,7 +39,7 @@ useSeoMeta({
 </script>
 
 <template>
-  <UApp>
+  <UApp :locale="locales[locale]">
     <NuxtLoadingIndicator />
 
     <NuxtLayout>

app/components/NotificationsSlideover.vue

@@ -2,6 +2,8 @@
 import { formatTimeAgo } from '@vueuse/core'
 import type { Notification } from '~/types'
 
+const { t } = useI18n()
+
 const { isNotificationsSlideoverOpen } = useDashboard()
 
 const { data: notifications } = await useFetch<Notification[]>('/api/notifications')
@@ -10,9 +12,14 @@ const { data: notifications } = await useFetch<Notification[]>('/api/notificatio
 <template>
   <USlideover
     v-model:open="isNotificationsSlideoverOpen"
-    title="Notifications"
+    :title="t('notifications.title')"
   >
     <template #body>
+      <div v-if="!notifications?.length" class="text-center py-4">
+        <p class="text-dimmed">
+          {{ t('notifications.no_notifications') }}
+        </p>
+      </div>
       <NuxtLink
         v-for="notification in notifications"
         :key="notification.id"

app/components/TeamsMenu.vue

@@ -3,6 +3,8 @@ defineProps<{
   collapsed?: boolean
 }>()
 
+const { t } = useI18n()
+
 const teams = ref([{
   label: 'Nuxt',
   avatar: {
@@ -31,10 +33,10 @@ const items = computed(() => {
       selectedTeam.value = team
     }
   })), [{
-    label: 'Create team',
+    label: t('layout.teams.menu.create_team'),
     icon: 'i-lucide-circle-plus'
   }, {
-    label: 'Manage teams',
+    label: t('layout.teams.menu.manage_teams'),
     icon: 'i-lucide-cog'
   }]]
 })

app/components/UserMenu.vue

@@ -4,6 +4,27 @@ import type { DropdownMenuItem } from '@nuxt/ui'
 defineProps<{
   collapsed?: boolean
 }>()
+const { locale: current, setLocale, locales, t } = useI18n()
+
+const localesDropdownItems = computed(() => {
+  const iconMap = {
+    en: '🇬🇧',
+    es: '🇪🇸',
+    fr: '🇫🇷'
+  }
+  return locales.value.map(locale => ({
+    label: `${iconMap[locale.code] || ''} ${locale.name}`,
+    type: 'checkbox',
+    checked: locale.code === current.value,
+    onSelect: async (e: Event) => {
+      e.preventDefault()
+      current.value = locale.code
+    }
+  }))
+})
+watch(current, (newLocale: 'en' | 'es' | 'fr') => {
+  setLocale(newLocale)
+})
 
 const colorMode = useColorMode()
 const appConfig = useAppConfig()
@@ -24,28 +45,28 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
   label: user.value.name,
   avatar: user.value.avatar
 }], [{
-  label: 'Profile',
+  label: t('userMenu.profile'),
   icon: 'i-lucide-user'
 }, {
-  label: 'Billing',
+  label: t('userMenu.billing'),
   icon: 'i-lucide-credit-card'
 }, {
-  label: 'Settings',
+  label: t('userMenu.settings'),
   icon: 'i-lucide-settings',
   to: '/settings'
 }], [{
-  label: 'Theme',
+  label: t('userMenu.theme'),
   icon: 'i-lucide-palette',
   children: [{
-    label: 'Primary',
+    label: t('userMenu.primary'),
     slot: 'chip',
     chip: appConfig.ui.colors.primary,
     content: {
       align: 'center',
       collisionPadding: 16
     },
     children: colors.map(color => ({
-      label: color,
+      label: t(`colors.${color}`),
       chip: color,
       slot: 'chip',
       checked: appConfig.ui.colors.primary === color,
@@ -57,15 +78,15 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
       }
     }))
   }, {
-    label: 'Neutral',
+    label: t('userMenu.neutral'),
     slot: 'chip',
     chip: appConfig.ui.colors.neutral,
     content: {
       align: 'end',
       collisionPadding: 16
     },
     children: neutrals.map(color => ({
-      label: color,
+      label: t(`colors.${color}`),
       chip: color,
       slot: 'chip',
       type: 'checkbox',
@@ -78,23 +99,39 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
     }))
   }]
 }, {
-  label: 'Appearance',
+  label: t('userMenu.appearance'),
   icon: 'i-lucide-sun-moon',
   children: [{
-    label: 'Light',
+    label: t('userMenu.system'),
+    icon: 'i-lucide-monitor',
+    type: 'checkbox',
+    checked: colorMode.preference === 'system',
+    onUpdateChecked(checked: boolean) {
+      if (checked) {
+        colorMode.preference = 'system'
+      }
+    },
+    onSelect(e: Event) {
+      e.preventDefault()
+    }
+  }, {
+    label: t('userMenu.light'),
     icon: 'i-lucide-sun',
     type: 'checkbox',
-    checked: colorMode.value === 'light',
+    checked: colorMode.preference === 'light',
+    onUpdateChecked(checked: boolean) {
+      if (checked) {
+        colorMode.preference = 'light'
+      }
+    },
     onSelect(e: Event) {
       e.preventDefault()
-
-      colorMode.preference = 'light'
     }
   }, {
-    label: 'Dark',
+    label: t('userMenu.dark'),
     icon: 'i-lucide-moon',
     type: 'checkbox',
-    checked: colorMode.value === 'dark',
+    checked: colorMode.preference === 'dark',
     onUpdateChecked(checked: boolean) {
       if (checked) {
         colorMode.preference = 'dark'
@@ -104,47 +141,51 @@ const items = computed<DropdownMenuItem[][]>(() => ([[{
       e.preventDefault()
     }
   }]
+}, {
+  label: t('userMenu.language'),
+  icon: 'i-lucide-languages',
+  children: localesDropdownItems.value
 }], [{
-  label: 'Templates',
+  label: t('userMenu.templates'),
   icon: 'i-lucide-layout-template',
   children: [{
-    label: 'Starter',
+    label: t('userMenu.starter'),
     to: 'https://ui-pro-starter.nuxt.dev/'
   }, {
-    label: 'Landing',
+    label: t('userMenu.landing'),
     to: 'https://landing-template.nuxt.dev/'
   }, {
-    label: 'Docs',
+    label: t('userMenu.docs'),
     to: 'https://docs-template.nuxt.dev/'
   }, {
-    label: 'SaaS',
+    label: t('userMenu.saas'),
     to: 'https://saas-template.nuxt.dev/'
   }, {
-    label: 'Dashboard',
+    label: t('userMenu.dashboard'),
     to: 'https://dashboard-template.nuxt.dev/',
     checked: true,
     type: 'checkbox'
   }, {
-    label: 'Chat',
+    label: t('userMenu.chat'),
     to: 'https://chat-template.nuxt.dev/'
   }]
 }], [{
-  label: 'Documentation',
+  label: t('userMenu.documentation'),
   icon: 'i-lucide-book-open',
   to: 'https://ui.nuxt.com/getting-started/installation/pro/nuxt',
   target: '_blank'
 }, {
-  label: 'GitHub repository',
+  label: t('userMenu.github'),
   icon: 'i-simple-icons-github',
   to: 'https://github.com/nuxt-ui-pro/dashboard',
   target: '_blank'
 }, {
-  label: 'Upgrade to Pro',
+  label: t('userMenu.upgrade'),
   icon: 'i-lucide-rocket',
   to: 'https://ui.nuxt.com/pro/purchase',
   target: '_blank'
 }], [{
-  label: 'Log out',
+  label: t('userMenu.logout'),
   icon: 'i-lucide-log-out'
 }]]))
 </script>

app/components/customers/AddModal.vue

@@ -2,9 +2,11 @@
 import * as z from 'zod'
 import type { FormSubmitEvent } from '@nuxt/ui'
 
+const { t } = useI18n()
+
 const schema = z.object({
-  name: z.string().min(2, 'Too short'),
-  email: z.string().email('Invalid email')
+  name: z.string().min(2, t('validation.name_too_short')),
+  email: z.string().email(t('validation.invalid_email'))
 })
 const open = ref(false)
 
@@ -23,8 +25,12 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
 </script>
 
 <template>
-  <UModal v-model:open="open" title="New customer" description="Add a new customer to the database">
-    <UButton label="New customer" icon="i-lucide-plus" />
+  <UModal 
+    v-model:open="open" 
+    :title="t('customers.new_customer')"
+    :description="t('customers.add_new_customer')"
+  >
+    <UButton :label="t('customers.new_customer')" icon="i-lucide-plus" />
 
     <template #body>
       <UForm
@@ -33,21 +39,21 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         class="space-y-4"
         @submit="onSubmit"
       >
-        <UFormField label="Name" placeholder="John Doe" name="name">
+        <UFormField :label="t('customers.name')" :placeholder="t('customers.name_placeholder')" name="name">
           <UInput v-model="state.name" class="w-full" />
         </UFormField>
-        <UFormField label="Email" placeholder="[email protected]" name="email">
+        <UFormField :label="t('customers.email')" :placeholder="t('customers.email_placeholder')" name="email">
           <UInput v-model="state.email" class="w-full" />
         </UFormField>
         <div class="flex justify-end gap-2">
           <UButton
-            label="Cancel"
+            :label="t('common.cancel')"
             color="neutral"
             variant="subtle"
             @click="open = false"
           />
           <UButton
-            label="Create"
+            :label="t('common.create')"
             color="primary"
             variant="solid"
             type="submit"

app/components/customers/DeleteModal.vue

@@ -5,6 +5,7 @@ withDefaults(defineProps<{
   count: 0
 })
 
+const { t } = useI18n()
 const open = ref(false)
 
 async function onSubmit() {
@@ -16,21 +17,21 @@ async function onSubmit() {
 <template>
   <UModal
     v-model:open="open"
-    :title="`Delete ${count} customer${count > 1 ? 's' : ''}`"
-    :description="`Are you sure, this action cannot be undone.`"
+    :title="t('customers.delete_title', { count, s: count > 1 ? 's' : '' })"
+    :description="t('customers.delete_description')"
   >
     <slot />
 
     <template #body>
       <div class="flex justify-end gap-2">
         <UButton
-          label="Cancel"
+          :label="t('common.cancel')"
           color="neutral"
           variant="subtle"
           @click="open = false"
         />
         <UButton
-          label="Delete"
+          :label="t('common.delete')"
           color="error"
           variant="solid"
           loading-auto

app/components/home/HomeChart.client.vue

@@ -3,6 +3,7 @@ import { eachDayOfInterval, eachWeekOfInterval, eachMonthOfInterval, format } fr
 import { VisXYContainer, VisLine, VisAxis, VisArea, VisCrosshair, VisTooltip } from '@unovis/vue'
 import type { Period, Range } from '~/types'
 
+const { t } = useI18n()
 const cardRef = useTemplateRef<HTMLElement | null>('cardRef')
 
 const props = defineProps<{
@@ -65,7 +66,7 @@ const template = (d: DataRecord) => `${formatDate(d.date)}: ${formatNumber(d.amo
     <template #header>
       <div>
         <p class="text-xs text-muted uppercase mb-1.5">
-          Revenue
+          {{ t('home.chart.revenue.title') }}
         </p>
         <p class="text-3xl text-highlighted font-semibold">
           {{ formatNumber(total) }}

app/components/home/HomeChart.server.vue

@@ -1,9 +1,13 @@
+<script setup lang="ts">
+const { t } = useI18n()
+</script>
+
 <template>
   <UCard :ui="{ body: '!px-0 !pt-0 !pb-3' }">
     <template #header>
       <div>
         <p class="text-xs text-muted uppercase mb-1.5">
-          Revenue
+          {{ t('home.chart.revenue.title') }}
         </p>
         <p class="text-3xl text-highlighted font-semibold">
           ---