@xenterprises/nuxt-x-schema

A reusable Nuxt layer providing Schema.org structured data components for SEO and semantic markup.

Features

• 🏷️ 16 Schema Components: Pre-built components for common schema types
• 📝 JSON-LD Output: Renders structured data as <script type="application/ld+json"> tags
• ⚙️ Flexible Props: Accepts strings, objects, or arrays for complex schema properties
• 🎯 TypeScript: Full type safety with TypeScript support
• 🔧 Auto-imported: Components available as <XSchema[Type]> throughout your app
• ✅ SEO Ready: Generates rich snippets, knowledge panels, and better AI search citations

Installation

npm install @xenterprises/nuxt-x-schema

Add to your nuxt.config.ts:

export default defineNuxtConfig({
  extends: ["@xenterprises/nuxt-x-schema"],
});

Available Components

Essential (9)

• <XSchemaOrganization> - Company information
• <XSchemaArticle> - Blog posts and articles
• <XSchemaFAQ> - FAQ pages
• <XSchemaHowTo> - Step-by-step guides
• <XSchemaService> - Service pages
• <XSchemaBreadcrumb> - Navigation breadcrumbs
• <XSchemaPerson> - Author and team profiles
• <XSchemaReview> - Reviews and ratings
• <XSchemaWebSite> - Site-wide schema

Advanced (7)

• <XSchemaVideoObject> - Video content
• <XSchemaSoftwareApplication> - Web applications
• <XSchemaEvent> - Events
• <XSchemaProduct> - Products
• <XSchemaOffer> - Pricing and offers
• <XSchemaQAPage> - Q&A pages
• <XSchemaLocalBusiness> - Business locations

Usage

Basic Example

<template>
  <main>
    <h1>{{ article.title }}</h1>
    <p>{{ article.description }}</p>

    <!-- Add schema markup -->
    <XSchemaArticle
      :headline="article.title"
      :description="article.description"
      :image="article.image"
      :date-published="article.publishedAt"
      :date-modified="article.updatedAt"
      author="John Doe"
      article-type="BlogPosting"
    />
  </main>
</template>

Organization Schema

<template>
  <XSchemaOrganization
    name="My Company"
    description="We build amazing products"
    url="https://example.com"
    logo="https://example.com/logo.png"
    :same-as="[
      'https://twitter.com/mycompany',
      'https://linkedin.com/company/mycompany',
    ]"
  />
</template>

FAQ Schema

<template>
  <XSchemaFAQ
    :items="[
      {
        question: 'What is this?',
        answer: 'This is a great product',
      },
      {
        question: 'How much does it cost?',
        answer: 'It costs $99/month',
      },
    ]"
  />
</template>

Development

The .playground directory contains a test application for developing the layer:

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

SEO Benefits

Each component generates:

• ✅ Rich snippets in Google search results
• ✅ Knowledge panels
• ✅ Star ratings and reviews
• ✅ Breadcrumb trails
• ✅ Featured images
• ✅ Better AI search citations

Validation

All components are validated with:

• Google Rich Results Test
• Schema.org Validator

License

MIT