DocsSearch

<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { default: () => [], server: false })

const links = [{
  label: 'Documentation',
  icon: 'i-heroicons-book-open',
  to: '/getting-started'
}, {
  label: 'Playground',
  icon: 'i-simple-icons-stackblitz',
  to: '/playground'
}, {
  label: 'Roadmap',
  icon: 'i-heroicons-academic-cap',
  to: '/roadmap'
}, {
  label: 'Pro',
  icon: 'i-heroicons-square-3-stack-3d',
  to: '/pro',
  children: [{
    label: 'Features',
    to: '/pro#features',
    exactHash: true,
    icon: 'i-heroicons-beaker',
    description: 'Discover all the features of Nuxt UI Pro.'
  }, {
    label: 'Pricing',
    to: '/pro#pricing',
    exactHash: true,
    icon: 'i-heroicons-credit-card',
    description: 'A simple pricing, for solo developers or teams.'
  }, {
    label: 'Guide',
    to: '/pro/guide',
    icon: 'i-heroicons-book-open',
    description: 'Learn how to use Nuxt UI Pro in your app.'
  }, {
    label: 'Components',
    to: '/pro/components',
    icon: 'i-heroicons-cube-transparent',
    description: 'Discover all the components available in Nuxt UI Pro.'
  }]
}, {
  label: 'Releases',
  icon: 'i-heroicons-rocket-launch',
  to: 'https://github.com/nuxt/ui/releases',
  target: '_blank'
}]

provide('navigation', navigation)
provide('files', files)
</script>

<template>
  <Header :links="links" />

  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>

  <Footer />

  <ClientOnly>
    <LazyUDocsSearch :files="files" :navigation="navigation" :groups="groups" :links="links" />
  </ClientOnly>

  <UNotifications />
</template>