The AI Engine Optimization module for Nuxt.

<script setup lang="ts">
const { data: article } = await useAsyncData('article', () => {
  return queryCollection('articles').path('/my-article').first()
})

useSchema({
  type: 'Article',
  headline: article.value?.title,
  datePublished: article.value?.date,
  author: {
    type: 'Person',
    name: 'Author Name'
  }
})
</script>

<template>
  <article>
    <h1>{{ article?.title }}</h1>
    <ContentRenderer :value="article" />
  </article>
</template>

<script setup lang="ts">
useSchemaFaq({
  mainEntity: [
    {
      name: 'What is the Nuxt AEO module?',
      acceptedAnswer: {
        text: 'Nuxt AEO is a Nuxt module that implements AI Engine Optimization (AEO) using Schema.org JSON-LD structured data. It helps AI models and search engines better understand website content.',
      },
    },
    {
      name: 'What Schema types are supported?',
      acceptedAnswer: {
        text: 'Nuxt AEO supports various Schema.org types including Person, Organization, Article, ItemList, and more. You can configure both global schemas and page-specific schemas through useSchema() and useSchemaFaq() composables.',
      },
    },
    {
      name: 'Can I use it immediately after installation?',
      acceptedAnswer: {
        text: 'Yes! Nuxt AEO can be used immediately after installation. Once you install the module and add it to nuxt.config.ts, you can define schemas using useSchema() or useSchemaFaq() composables. It provides default behavior without additional configuration.',
      },
    },
    {
      name: 'What is the difference between useSchemaFaq() and useSchema()?',
      acceptedAnswer: {
        text: 'useSchema() is used to define schemas that describe the main content of a page (e.g., Article, Person), while useSchemaFaq() is used to define metadata about the page itself (e.g., FAQPage, BreadcrumbList). You can use both composables together to structure both page content and metadata.',
      },
    },
  ],
})
</script>

<template>
  <div>
    <h1>Nuxt AEO</h1>
    <!--Page Content-->
  </div>
</template>