Vue Components

The component API is deprecated. Prefer useSchemaOrg() for stronger TypeScript support. Existing component code can pass node data through attributes or named slots.

Headless Attributes

Component attributes are forwarded to the Schema.org node.

Omit the @ prefix from fields such as @type and @id.

For example, to set a page name and type:

<template>
  <!-- About us page inline -->
  <SchemaOrgWebPage type="AboutPage" name="About Us" />
</template>

Headless Slots

Named slots can provide the same data as attributes.

Only shallow text nodes are supported.

This FAQ question uses named slots:

<template>
  <SchemaOrgQuestion>
    <template #name>
      What is the capital of Australia?
    </template>
    <template #acceptedAnswer>
      Canberra
    </template>
  </SchemaOrgQuestion>
</template>

Rendered Default Slot

To render markup with full customization, provide a default slot. Its slot props contain the resolved node.

<template>
  <SchemaOrgQuestion>
    <!-- Scoped slots won't render anything -->
    <template #name>
      {{ question }}
    </template>
    <template #acceptedAnswer>
      <div>{{ answer }}</div>
    </template>
    <!-- Default slot will render -->
    <h2>
      {{ question }}
    </h2>
    <div>{{ answer }}</div>
  </SchemaOrgQuestion>
</template>

Interpolation escapes HTML. If the answer must contain markup, sanitize it before using v-html; Vue's security guidance recommends rendering only trusted HTML.