<script setup lang="ts">import type { NuxtError } from '#app'import type { ContentNavigationItem, PageCollections } from '@nuxt/content'import * as nuxtUiLocales from '@nuxt/ui/locale'import { transformNavigation } from './utils/navigation' const props = defineProps<{ error: NuxtError}>() const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n() const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)const lang = computed(() => nuxtUiLocale.value.code)const dir = computed(() => nuxtUiLocale.value.dir) useHead({ htmlAttrs: { lang, dir, },}) const localizedError = computed(() => { return { ...props.error, statusMessage: t('common.error.title'), message: t('common.error.description'), }}) useSeoMeta({ title: () => t('common.error.title'), description: () => t('common.error.description'),}) if (isEnabled.value) { const route = useRoute() const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale! onMounted(() => { const currentLocale = route.path.split('/')[1] if (!locales.some(locale => locale.code === currentLocale)) { return navigateTo(switchLocalePath(defaultLocale) as string) } })} const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs') const { data: navigation } = await useAsyncData(`navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), { transform: (data: ContentNavigationItem[]) => transformNavigation(data, isEnabled.value, locale.value), watch: [locale],}) provide('navigation', navigation)</script> <template> <UApp :locale="nuxtUiLocale"> <AppHeader /> <UError :error="localizedError" /> <AppFooter /> <ClientOnly> <AppSearch :navigation="navigation" /> </ClientOnly> </UApp></template>
<script setup lang="ts">
import type { NuxtError } from '#app'
import type { ContentNavigationItem, PageCollections } from '@nuxt/content'
import * as nuxtUiLocales from '@nuxt/ui/locale'
import { transformNavigation } from './utils/navigation'
const props = defineProps<{
error: NuxtError
}>()
const { locale, locales, isEnabled, t, switchLocalePath } = useDocusI18n()
const nuxtUiLocale = computed(() => nuxtUiLocales[locale.value as keyof typeof nuxtUiLocales] || nuxtUiLocales.en)
const lang = computed(() => nuxtUiLocale.value.code)
const dir = computed(() => nuxtUiLocale.value.dir)
useHead({
htmlAttrs: {
lang,
dir,
},
})
const localizedError = computed(() => {
return {
...props.error,
statusMessage: t('common.error.title'),
message: t('common.error.description'),
}
})
useSeoMeta({
title: () => t('common.error.title'),
description: () => t('common.error.description'),
})
if (isEnabled.value) {
const route = useRoute()
const defaultLocale = useRuntimeConfig().public.i18n.defaultLocale!
onMounted(() => {
const currentLocale = route.path.split('/')[1]
if (!locales.some(locale => locale.code === currentLocale)) {
return navigateTo(switchLocalePath(defaultLocale) as string)
}
})
}
const collectionName = computed(() => isEnabled.value ? `docs_${locale.value}` : 'docs')
const { data: navigation } = await useAsyncData(`navigation_${collectionName.value}`, () => queryCollectionNavigation(collectionName.value as keyof PageCollections), {
transform: (data: ContentNavigationItem[]) => transformNavigation(data, isEnabled.value, locale.value),
watch: [locale],
})
provide('navigation', navigation)
</script>
<template>
<UApp :locale="nuxtUiLocale">
<AppHeader />
<UError :error="localizedError" />
<AppFooter />
<ClientOnly>
<AppSearch :navigation="navigation" />
</ClientOnly>
</UApp>
</template>