---
title: "Vue Components"
description: "Schema.org Vue components API (deprecated). Use composables like useSchemaOrg() instead for better TypeScript support."
canonical_url: "https://unhead.unjs.io/docs/nuxt/schema-org/guides/core-concepts/vue-components"
last_updated: "2026-06-19T10:02:32.212Z"
---

⚠️ Using the components API is no longer recommended. You should use the composables for better developer experience.

Each Schema has a component that can be used to configure
Schema.

Each component implements the same logic and there are multiple ways to define your components.

## Headless - Attributes

Any attribute passed on the component will be forwarded to the
Schema.

For fields which are prefixed with `@`, such as `@type` and `@id`, you can simply omit the `@`.

For example, to set a page name and type:

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

## Headless - Slots

Alternatively to providing attributes on the prop, you are also able to provide the data through slots which
use the same name as the attribute.

- Only supports shallow text nodes

For example, we can generate a FAQ Question with the following:

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

## Rendered Default slot

If you want to render the markup and want full customisation, you can provide a default slot. The slot props
will be the resolved node.

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