@xenterprises/nuxt-x-schema

@xenterprises/nuxt-x-schema

Nuxt layer providing 16 Schema.org structured data components for SEO. Renders JSON-LD via useHead for full SSR support — search engines see your schema markup on first paint.

Install

npm install @xenterprises/nuxt-x-schema

Add to your nuxt.config.ts:

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

Usage

<template>
  <main>
    <h1>{{ article.title }}</h1>
    <XSchemaArticle
      :headline="article.title"
      :description="article.description"
      :date-published="article.publishedAt"
      :author="article.author"
    />
  </main>
</template>

Components render no visible HTML. They inject <script type="application/ld+json"> into <head> via Nuxt's useHead, ensuring schema is present in server-rendered HTML.

Configuration

Configure defaults in your app's app.config.ts (the layer ships all four keys as undefined; useSchema() applies the runtime fallbacks shown below when a key is unset):

export default defineAppConfig({
  xSchema: {
    siteUrl: "https://mysite.com",
    siteName: "My Site",
    siteLogo: "/logo.png",
    organizationName: "My Company",
  },
});

Components

XSchemaArticle

Blog posts, news articles, and written content.

XSchemaBreadcrumb

Navigation breadcrumb trail.

Relative URLs in to/item are resolved to absolute URLs using xSchema.siteUrl.

XSchemaEvent

Events and conferences.

XSchemaFAQ

FAQ pages with question/answer pairs.

XSchemaHowTo

Step-by-step guides and tutorials.

XSchemaLocalBusiness

Business locations (restaurants, shops, offices).

XSchemaOffer

Pricing and purchase offers.

XSchemaOrganization

Company or organization information.

XSchemaPerson

Author and team profiles.

XSchemaProduct

Products with offers and reviews.

XSchemaQAPage

Q&A pages with community answers.

XSchemaReview

Reviews and aggregate ratings.

XSchemaService

Service pages.

XSchemaSoftwareApplication

Web and mobile applications.

XSchemaVideoObject

Video content.

XSchemaWebSite

Site-wide schema (typically in default layout).

Composable: useSchema

Auto-imported composable providing shared utilities for schema generation.

Environment Variables

This layer does not require any environment variables. All configuration is via app.config.ts.

How It Works

1. Each XSchema* component accepts typed props describing the content.
2. Components call useSchema().useSchemaHead() which wraps useHead() to inject a <script type="application/ld+json"> tag into the page <head>.
3. Because useHead is SSR-safe, the JSON-LD is rendered server-side and visible to search engine crawlers on first paint — unlike <ClientOnly> approaches that only render client-side.
4. Default values for publisher/organizer/seller come from app.config.ts via the useSchema() composable, so you configure once and all components use consistent branding.
5. String values for author, founder, brand, and alumniOf are automatically converted to proper Schema.org typed objects (Person, Organization, Brand).

Layer Architecture

• app/components/X/Schema/*.vue — 16 renderless components, each generating a specific Schema.org type
• app/composables/useSchema.ts — Shared utilities for URL resolution, default org/publisher, author normalization, and useHead injection
• app/types/schema.ts — TypeScript interfaces for all Schema.org types used by components
• app.config.ts — Layer defaults with type augmentation for xSchema namespace
• nuxt.config.ts — Minimal layer config (components and composables auto-imported by Nuxt)

Validation

Test your schema output with:

• Google Rich Results Test
• Schema.org Validator