Composables

<script setup lang="ts">
const { data: page } = await useAsyncData('page', () => 
  queryContent('/docs/introduction').findOne()
)

useSeo({
  title: page.value.title,
  description: page.value.description,
  type: 'article',
  publishedAt: page.value.publishedAt,
  modifiedAt: page.value.modifiedAt,
  breadcrumbs: [
    { title: 'Home', path: '/' },
    { title: 'Docs', path: '/docs' },
    { title: page.value.title, path: page.value._path }
  ]
})
</script>

<script setup lang="ts">
useSeo({
  title: 'Introduction to Docus',
  description: 'Learn how to build beautiful documentation with Docus',
  type: 'article',
  ogImage: 'https://docus.dev/og-images/introduction.png',
  publishedAt: '2024-01-15T10:00:00Z',
  modifiedAt: '2024-03-20T15:30:00Z',
  breadcrumbs: [
    { title: 'Home', path: '/' },
    { title: 'Documentation', path: '/docs' },
    { title: 'Getting Started', path: '/docs/getting-started' },
    { title: 'Introduction', path: '/docs/getting-started/introduction' }
  ]
})
</script>

<script setup lang="ts">
const {
  hasLogo,
  currentLogoUrl,
  headerLightUrl,
  headerDarkUrl,
  logoAlt,
  contextMenuItems,
  copyLogo,
  downloadLogo
} = useLogoAssets()
</script>

<template>
  <img 
    v-if="hasLogo" 
    :src="currentLogoUrl" 
    :alt="logoAlt" 
  />
  <button @click="copyLogo">Copy Logo</button>
  <button @click="downloadLogo">Download Logo</button>
</template>

<script setup lang="ts">
const { 
  isEnabled, 
  locale, 
  locales, 
  t, 
  localePath, 
  switchLocalePath 
} = useDocusI18n()
</script>

<template>
  <div>
    <p>Current locale: {{ locale }}</p>
    <p>{{ t('welcome.message') }}</p>
    
    <NuxtLink 
      v-for="loc in locales" 
      :key="loc.code"
      :to="switchLocalePath(loc.code)"
    >
      {{ loc.name }}
    </NuxtLink>
  </div>
</template>

// Logo actions
t('logo.copyLogo')
t('logo.copyWordmark')
t('logo.downloadLogo')
t('logo.downloadWordmark')
t('logo.brandAssets')
t('logo.logoCopied')
t('logo.wordmarkCopied')
t('logo.copyLogoFailed')
t('logo.copyWordmarkFailed')
t('logo.logoDownloaded')
t('logo.wordmarkDownloaded')

<script setup lang="ts">
const { 
  isEnabled,
  isOpen, 
  isExpanded,
  messages,
  pendingMessage,
  faqQuestions,
  open, 
  close, 
  toggle,
  toggleExpanded,
  clearMessages,
  clearPending
} = useAssistant()

// Open assistant with an initial question
function askQuestion(question: string) {
  open(question)
}

// Open assistant and clear previous conversation
function startNewConversation() {
  open(undefined, true)
}
</script>

<template>
  <div>
    <button v-if="isEnabled" @click="toggle">
      {{ isOpen ? 'Close' : 'Open' }} Assistant
    </button>
    
    <p v-if="isOpen">
      Panel width: {{ panelWidth }}px
      Expanded: {{ isExpanded }}
    </p>
  </div>
</template>

<script setup lang="ts">
const { isEnabled, open, faqQuestions } = useAssistant()

function askFaq(question: string) {
  open(question, true) // Open with question and clear previous messages
}
</script>

<template>
  <div v-if="isEnabled">
    <h3>Frequently Asked Questions</h3>
    <div v-for="category in faqQuestions" :key="category.category">
      <h4>{{ category.category }}</h4>
      <button 
        v-for="question in category.items" 
        :key="question"
        @click="askFaq(question)"
      >
        {{ question }}
      </button>
    </div>
  </div>
</template>

interface UseSeoOptions {
  title: MaybeRefOrGetter<string | undefined>
  description: MaybeRefOrGetter<string | undefined>
  type?: MaybeRefOrGetter<'website' | 'article'>
  ogImage?: MaybeRefOrGetter<string | undefined>
  publishedAt?: MaybeRefOrGetter<string | undefined>
  modifiedAt?: MaybeRefOrGetter<string | undefined>
  breadcrumbs?: MaybeRefOrGetter<BreadcrumbItem[] | undefined>
}

interface BreadcrumbItem {
  title: string
  path: string
}