nuxt ui pro content navigation not showing up

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// app.vue or your layout file
<script setup lang="ts">
import { provide } from 'vue'
import { queryCollectionNavigation } from '#content/utils'

const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('content')
)

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

// app.vue or your layout file
<script setup lang="ts">
import { provide } from 'vue'
import { queryCollectionNavigation } from '#content/utils'

const { data: navigation } = await useAsyncData('navigation', () =>
  queryCollectionNavigation('content')
)

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

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

<script setup lang="ts">
const { data: navigation } = await useAsyncData('legal-navigation', () =>
  queryCollectionNavigation('content')
    .where('category', '=', 'legal') // Optional: filter for legal pages if you use a category field
)
</script>

<template>
  <UPage>
    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" highlight />
      </UPageAside>
    </template>
    <!-- ...rest of your template -->
  </UPage>
</template>

<script setup lang="ts">
const { data: navigation } = await useAsyncData('legal-navigation', () =>
  queryCollectionNavigation('content')
    .where('category', '=', 'legal') // Optional: filter for legal pages if you use a category field
)
</script>

<template>
  <UPage>
    <template #left>
      <UPageAside>
        <UContentNavigation :navigation="navigation" highlight />
      </UPageAside>
    </template>
    <!-- ...rest of your template -->
  </UPage>
</template>

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/*.md'
    }),
    support: defineCollection({
      type: 'page',
      source: 'support/*.md'
    }),
    legal: defineCollection({
      type: 'page',
      source: '{privacy-policy,terms-of-service,site-rules}.md'
    })
  }
})

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    blog: defineCollection({
      type: 'page',
      source: 'blog/*.md'
    }),
    support: defineCollection({
      type: 'page',
      source: 'support/*.md'
    }),
    legal: defineCollection({
      type: 'page',
      source: '{privacy-policy,terms-of-service,site-rules}.md'
    })
  }
})

const navigation = ref([
  {
    title: 'Guide',
    icon: 'i-lucide-book-open',
    path: '#getting-started',
    children: [
      {
        title: 'Introduction',
        path: '#introduction',
        active: true
      },
      {
        title: 'Installation',
        path: '#installation'
      }
    ]
  },
  {
    title: 'Composables',
    icon: 'i-lucide-database',
    path: '#composables',
    children: [
      {
        title: 'defineShortcuts',
        path: '#defineshortcuts'
      },
      {
        title: 'useModal',
        path: '#usemodal'
      }
    ]
  }
])

const navigation = ref([
  {
    title: 'Guide',
    icon: 'i-lucide-book-open',
    path: '#getting-started',
    children: [
      {
        title: 'Introduction',
        path: '#introduction',
        active: true
      },
      {
        title: 'Installation',
        path: '#installation'
      }
    ]
  },
  {
    title: 'Composables',
    icon: 'i-lucide-database',
    path: '#composables',
    children: [
      {
        title: 'defineShortcuts',
        path: '#defineshortcuts'
      },
      {
        title: 'useModal',
        path: '#usemodal'
      }
    ]
  }
])

title: Blog
icon: i-lucide-book-open

title: Blog
icon: i-lucide-book-open

title: Legal
icon: i-lucide-shield

title: Legal
icon: i-lucide-shield

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    legal: defineCollection({
      type: 'page',
      source: {
        include: 'legal/*.md',
        prefix: '/'
      }
    }),
    // ... other collections
  }
})

import { defineContentConfig, defineCollection } from '@nuxt/content'

export default defineContentConfig({
  collections: {
    legal: defineCollection({
      type: 'page',
      source: {
        include: 'legal/*.md',
        prefix: '/'
      }
    }),
    // ... other collections
  }
})

<script setup lang="ts">
const route = useRoute()

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description']
  })
})
</script>

<template>
  <UContentSurround :surround="(surround as any)" />
</template>

<script setup lang="ts">
const route = useRoute()

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description']
  })
})
</script>

<template>
  <UContentSurround :surround="(surround as any)" />
</template>

<script setup lang="ts">
const route = useRoute()

// Fetch all legal pages
const { data: legalPages } = await useAsyncData('legal-pages', () =>
  queryCollection('legal').find()
)

// Filter out the current page
const surround = computed(() =>
  (legalPages.value || [])
    .filter(page => page._path !== route.path)
    .map(page => ({
      title: page.title,
      path: page._path,
      description: page.description
    }))
)
</script>

<template>
  <UContentSurround :surround="surround" />
</template>

<script setup lang="ts">
const route = useRoute()

// Fetch all legal pages
const { data: legalPages } = await useAsyncData('legal-pages', () =>
  queryCollection('legal').find()
)

// Filter out the current page
const surround = computed(() =>
  (legalPages.value || [])
    .filter(page => page._path !== route.path)
    .map(page => ({
      title: page.title,
      path: page._path,
      description: page.description
    }))
)
</script>

<template>
  <UContentSurround :surround="surround" />
</template>

<script setup lang="ts">
const links = ref([
  {
    label: 'Privacy Policy',
    icon: 'i-lucide-shield',
    to: '/privacy-policy'
  },
  {
    label: 'Terms of Service',
    icon: 'i-lucide-file-text',
    to: '/terms-of-service'
  },
  {
    label: 'Site Rules',
    icon: 'i-lucide-gavel',
    to: '/site-rules'
  }
])
</script>

<template>
  <UPageHeader
    title="Legal"
    description="Our legal documents and policies."
    :links="links"
  />
</template>

<script setup lang="ts">
const links = ref([
  {
    label: 'Privacy Policy',
    icon: 'i-lucide-shield',
    to: '/privacy-policy'
  },
  {
    label: 'Terms of Service',
    icon: 'i-lucide-file-text',
    to: '/terms-of-service'
  },
  {
    label: 'Site Rules',
    icon: 'i-lucide-gavel',
    to: '/site-rules'
  }
])
</script>

<template>
  <UPageHeader
    title="Legal"
    description="Our legal documents and policies."
    :links="links"
  />
</template>

<script setup lang="ts">
const { data: legalPages } = await useAsyncData('legal-pages', () =>
  queryCollection('legal').find()
)

const links = computed(() =>
  (legalPages.value || []).map(page => ({
    label: page.title,
    to: page._path
    // Add icon or other properties if available in your content
  }))
)
</script>

<template>
  <UPageHeader
    title="Legal"
    description="Our legal documents and policies."
    :links="links"
  />
</template>

<script setup lang="ts">
const { data: legalPages } = await useAsyncData('legal-pages', () =>
  queryCollection('legal').find()
)

const links = computed(() =>
  (legalPages.value || []).map(page => ({
    label: page.title,
    to: page._path
    // Add icon or other properties if available in your content
  }))
)
</script>

<template>
  <UPageHeader
    title="Legal"
    description="Our legal documents and policies."
    :links="links"
  />
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const route = useRoute()
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// Fetch the current page content
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)

// Generate the breadcrumb items
const breadcrumb = computed(() =>
  mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link)
)
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page">
      <template #headline>
        <UBreadcrumb :items="breadcrumb" />
      </template>
    </UPageHeader>
  </UPage>
</template>

<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'

const route = useRoute()
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')

// Fetch the current page content
const { data: page } = await useAsyncData(route.path, () =>
  queryCollection('content').path(route.path).first()
)

// Generate the breadcrumb items
const breadcrumb = computed(() =>
  mapContentNavigation(findPageBreadcrumb(navigation?.value, page.value)).map(({ icon, ...link }) => link)
)
</script>

<template>
  <UPage>
    <UPageHeader v-bind="page">
      <template #headline>
        <UBreadcrumb :items="breadcrumb" />
      </template>
    </UPageHeader>
  </UPage>
</template>

   export default defineNuxtConfig({
     modules: [
       '@nuxt/ui-pro',
       '@nuxt/content'
     ],
     // ...other config
   })
   

   export default defineNuxtConfig({
     modules: [
       '@nuxt/ui-pro',
       '@nuxt/content'
     ],
     // ...other config
   })
   

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbs = computed(() => [
  { label: 'Home', to: '/' },
  { label: getPageTitle(route.path), to: route.path }
])

function getPageTitle(path) {
  // Map your routes to titles
  switch (path) {
    case '/privacy-policy':
      return 'Privacy Policy'
    case '/terms-of-service':
      return 'Terms of Service'
    case '/site-rules':
      return 'Site Rules'
    default:
      return ''
  }
}
</script>

<template>
  <UBreadcrumb :items="breadcrumbs" />
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'

const route = useRoute()

const breadcrumbs = computed(() => [
  { label: 'Home', to: '/' },
  { label: getPageTitle(route.path), to: route.path }
])

function getPageTitle(path) {
  // Map your routes to titles
  switch (path) {
    case '/privacy-policy':
      return 'Privacy Policy'
    case '/terms-of-service':
      return 'Terms of Service'
    case '/site-rules':
      return 'Site Rules'
    default:
      return ''
  }
}
</script>

<template>
  <UBreadcrumb :items="breadcrumbs" />
</template>

<script setup lang="ts">
useSeoMeta({
  title: 'Privacy Policy',
  description: 'Read our privacy policy to learn how we handle your data.',
  ogTitle: 'Privacy Policy',
  ogDescription: 'Read our privacy policy to learn how we handle your data.',
  // You can add more tags as needed, such as ogImage, twitterCard, etc.
})
</script>

<script setup lang="ts">
useSeoMeta({
  title: 'Privacy Policy',
  description: 'Read our privacy policy to learn how we handle your data.',
  ogTitle: 'Privacy Policy',
  ogDescription: 'Read our privacy policy to learn how we handle your data.',
  // You can add more tags as needed, such as ogImage, twitterCard, etc.
})
</script>

<script setup lang="ts">
const { data: page } = await useAsyncData('privacy-policy', () =>
  queryCollection('legal').path('/privacy-policy').first()
)

useSeoMeta({
  title: page.value?.seo?.title || page.value?.title,
  description: page.value?.seo?.description || page.value?.description,
  ogTitle: page.value?.seo?.title || page.value?.title,
  ogDescription: page.value?.seo?.description || page.value?.description,
})
</script>

<script setup lang="ts">
const { data: page } = await useAsyncData('privacy-policy', () =>
  queryCollection('legal').path('/privacy-policy').first()
)

useSeoMeta({
  title: page.value?.seo?.title || page.value?.title,
  description: page.value?.seo?.description || page.value?.description,
  ogTitle: page.value?.seo?.title || page.value?.title,
  ogDescription: page.value?.seo?.description || page.value?.description,
})
</script>

<script setup lang="ts">
const appName = 'AppName'
const pageTitle = 'Privacy Policy' // Replace with your dynamic title source

useSeoMeta({
  title: () => `${pageTitle} - ${appName}`,
  ogTitle: () => `${pageTitle} - ${appName}`,
  // ...other meta fields
})
</script>

<script setup lang="ts">
const appName = 'AppName'
const pageTitle = 'Privacy Policy' // Replace with your dynamic title source

useSeoMeta({
  title: () => `${pageTitle} - ${appName}`,
  ogTitle: () => `${pageTitle} - ${appName}`,
  // ...other meta fields
})
</script>

<script setup lang="ts">
const appName = 'AppName'
const { data: page } = await useAsyncData('privacy-policy', () =>
  queryCollection('legal').path('/privacy-policy').first()
)

useSeoMeta({
  title: () => `${page.value?.title} - ${appName}`,
  ogTitle: () => `${page.value?.title} - ${appName}`,
  // ...other meta fields
})
</script>

<script setup lang="ts">
const appName = 'AppName'
const { data: page } = await useAsyncData('privacy-policy', () =>
  queryCollection('legal').path('/privacy-policy').first()
)

useSeoMeta({
  title: () => `${page.value?.title} - ${appName}`,
  ogTitle: () => `${page.value?.title} - ${appName}`,
  // ...other meta fields
})
</script>

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark', // Set default preference to dark
      fallback: 'dark',   // Fallback to dark if no preference is found
      // You can also add 'forced: true' if you want to prevent switching
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark', // Set default preference to dark
      fallback: 'dark',   // Fallback to dark if no preference is found
      // You can also add 'forced: true' if you want to prevent switching
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark',
      fallback: 'dark',
      forced: true
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark',
      fallback: 'dark',
      forced: true
    }
  }
})

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark',
      fallback: 'dark',
      forced: true
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark',
      fallback: 'dark',
      forced: true
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark',
      fallback: 'dark',
      forced: true
    }
  }
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: {
      preference: 'dark',
      fallback: 'dark',
      forced: true
    }
  }
})

import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir,
  }
})

import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)

useHead({
  htmlAttrs: {
    lang,
    dir,
  }
})

i18n: {
  strategy: 'prefix_except_default',
  defaultLocale: 'en',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_redirected',
    fallbackLocale: 'en',
    redirectOn: 'root',
  },
  locales: [
    { code: 'en', name: 'English' },
    { code: 'fr', name: 'Français' },
    { code: 'es', name: 'Español' },
  ],
  lazy: true,
}

i18n: {
  strategy: 'prefix_except_default',
  defaultLocale: 'en',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_redirected',
    fallbackLocale: 'en',
    redirectOn: 'root',
  },
  locales: [
    { code: 'en', name: 'English' },
    { code: 'fr', name: 'Français' },
    { code: 'es', name: 'Español' },
  ],
  lazy: true,
}

// lang stuff delete later
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()

// lang stuff delete later
import * as locales from '@nuxt/ui/locale'

const { locale } = useI18n()

<ULocaleSelect v-model="locale" :locales="Object.values(locales)" />

<ULocaleSelect v-model="locale" :locales="Object.values(locales)" />

   export default defineNuxtConfig({
     modules: [
       '@nuxt/ui',
       '@nuxtjs/i18n'
     ],
     i18n: {
       strategy: 'prefix_except_default',
       defaultLocale: 'en',
       detectBrowserLanguage: {
         useCookie: true,
         cookieKey: 'i18n_redirected',
         fallbackLocale: 'en',
         redirectOn: 'root',
       },
       locales: [
         { code: 'en', name: 'English' },
         { code: 'fr', name: 'Français' },
         { code: 'es', name: 'Español' },
       ],
       lazy: true,
     }
   })
   

   export default defineNuxtConfig({
     modules: [
       '@nuxt/ui',
       '@nuxtjs/i18n'
     ],
     i18n: {
       strategy: 'prefix_except_default',
       defaultLocale: 'en',
       detectBrowserLanguage: {
         useCookie: true,
         cookieKey: 'i18n_redirected',
         fallbackLocale: 'en',
         redirectOn: 'root',
       },
       locales: [
         { code: 'en', name: 'English' },
         { code: 'fr', name: 'Français' },
         { code: 'es', name: 'Español' },
       ],
       lazy: true,
     }
   })
   

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()
</script>

<template>
  <UApp>
    <UHeader />

    <UError :error="error" />

    <UFooter />
  </UApp>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()
</script>

<template>
  <UApp>
    <UHeader />

    <UError :error="error" />

    <UFooter />
  </UApp>
</template>

app/error.vue

app/error.vue

<template>
  <NuxtLayout name="default">
    <!-- Your error content here -->
  </NuxtLayout>
</template>

<template>
  <NuxtLayout name="default">
    <!-- Your error content here -->
  </NuxtLayout>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()
</script>

<template>
  <NuxtLayout name="default">
    <UError :error="error" />
  </NuxtLayout>
</template>

<script setup lang="ts">
import type { NuxtError } from '#app'

const props = defineProps<{
  error: NuxtError
}>()
</script>

<template>
  <NuxtLayout name="default">
    <UError :error="error" />
  </NuxtLayout>
</template>

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
</script>

<template>
  <UFormField label="Language">
    <ULocaleSelect v-model="locale" :locales="Object.values(locales)" />
  </UFormField>
</template>

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
</script>

<template>
  <UFormField label="Language">
    <ULocaleSelect v-model="locale" :locales="Object.values(locales)" />
  </UFormField>
</template>