nuxt4/app/pages/index.vue

<template>
  <div class="page-grid">
    <UCard variant="soft">
      <template #header>
        <div class="stack">
          <p class="section-kicker">{{ t('home.hero.kicker') }}</p>
          <h2>{{ t('home.hero.title') }}</h2>
          <p>{{ t('home.hero.description') }}</p>
        </div>
      </template>

      <div class="hero-actions">
        <UButton @click="cycleTheme">
          {{ t('home.hero.actions.theme') }}
        </UButton>
        <UButton color="neutral" variant="soft" @click="toggleLocale">
          {{ t('home.hero.actions.locale') }}
        </UButton>
        <UButton color="neutral" variant="outline" @click="writeLog">
          {{ t('home.hero.actions.log') }}
        </UButton>
      </div>
    </UCard>

    <UCard variant="soft">
      <template #header>
        <div class="stack">
          <p class="section-kicker">{{ t('home.form.kicker') }}</p>
          <h2>{{ t('home.form.title') }}</h2>
        </div>
      </template>

      <form class="stack" @submit.prevent="submitDemo">
        <UFormField :label="t('home.form.fields.name')">
          <UInput
            v-model="form.name"
            name="name"
            autocomplete="name"
            class="w-full"
          />
        </UFormField>
        <UFormField :label="t('home.form.fields.role')">
          <USelect
            v-model="form.role"
            :items="roleOptions"
            value-key="value"
            label-key="label"
            class="w-full"
          />
        </UFormField>
        <UButton type="submit">{{ t('home.form.submit') }}</UButton>
      </form>
    </UCard>

    <UCard variant="soft">
      <template #header>
        <div class="stack">
          <p class="section-kicker">{{ t('home.status.kicker') }}</p>
          <h2>{{ t('home.status.title') }}</h2>
        </div>
      </template>

      <div class="stack">
        <UAlert
          color="info"
          variant="soft"
          :title="t('home.status.theme')"
          :description="resolvedThemeLabel"
        />
        <UAlert
          color="success"
          variant="soft"
          :title="t('home.status.locale')"
          :description="locale.toUpperCase()"
        />
        <UAlert
          color="neutral"
          variant="soft"
          :title="t('home.status.logger')"
          :description="t('home.status.loggerReady')"
        />
      </div>
    </UCard>

    <UCard variant="soft">
      <template #header>
        <div class="stack">
          <p class="section-kicker">{{ t('home.components.kicker') }}</p>
          <h2>{{ t('home.components.title') }}</h2>
          <p>{{ t('home.components.description') }}</p>
        </div>
      </template>

      <div class="component-showcase">
        <UButton size="sm">{{ t('home.components.buttons.small') }}</UButton>
        <UButton>{{ t('home.components.buttons.medium') }}</UButton>
        <UButton color="neutral" variant="soft">{{ t('home.components.buttons.secondary') }}</UButton>
        <UButton color="neutral" variant="outline">{{ t('home.components.buttons.ghost') }}</UButton>
      </div>
    </UCard>
  </div>
</template>

<script setup lang="ts">
const { locale, setLocale, t } = useI18n()
const logger = useLogger()
const colorMode = useColorMode()
const hydrated = ref(false)

const form = reactive({
  name: '',
  role: 'developer'
})

const roleOptions = computed(() => [
  { label: t('roles.developer'), value: 'developer' },
  { label: t('roles.designer'), value: 'designer' },
  { label: t('roles.maintainer'), value: 'maintainer' }
])

const resolvedThemeLabel = computed(() => {
  const safePreference = hydrated.value ? colorMode.preference : 'system'
  const preferenceText = t(`theme.preference.${safePreference}`)
  const resolvedMode = safePreference === 'system' ? 'system' : colorMode.value
  const resolvedText = t(`theme.resolved.${resolvedMode}`)

  return `${preferenceText} / ${resolvedText}`
})

onMounted(() => {
  hydrated.value = true
})

function toggleLocale() {
  const nextLocale = locale.value === 'sk' ? 'en' : 'sk'

  setLocale(nextLocale)
  logger.info('Locale changed', { locale: nextLocale })
}

function cycleTheme() {
  const nextTheme =
    colorMode.preference === 'light'
      ? 'dark'
      : colorMode.preference === 'dark'
        ? 'system'
        : 'light'

  colorMode.preference = nextTheme

  logger.info('Theme changed', { theme: nextTheme })
}

function writeLog() {
  logger.debug('Template action executed', {
    locale: locale.value,
    theme: colorMode.value
  })
}

function submitDemo() {
  logger.info('Demo form submitted', { ...form })
}
</script>