---
title: "Install Unhead Schema.org"
description: "Add Schema.org structured data to Vue apps with @unhead/schema-org, defineWebSite(), and defineWebPage()."
canonical_url: "https://unhead.unjs.io/docs/vue/schema-org/guides/get-started/installation"
last_updated: "2026-07-24T05:56:58.911Z"
---

Using Nuxt? See [`nuxt-schema-org` in the official Nuxt module directory](https://nuxt.com/modules/schema-org).

## Demos

<u-button target="_blank" to="https://stackblitz.com/edit/vitejs-vite-xbb1fa" style="margin-right: 10px;">

Vite SPA

</u-button>

<u-button target="_blank" to="https://stackblitz.com/edit/vitejs-vite-vsf3sy">

Vite + Vite SSR

</u-button>

## Set Up

### 1. Install the Package

Install `@unhead/schema-org` in your project:

<code-group>

```bash [yarn]
yarn add @unhead/schema-org
```

```bash [npm]
npm install @unhead/schema-org
```

```bash [pnpm]
pnpm add @unhead/schema-org
```

</code-group>

### 2. Configure the Plugin

At a minimum, provide a [`host`](/docs/schema-org/guides/core-concepts/params) when creating the head instance:

```ts
import { UnheadSchemaOrg } from '@unhead/schema-org/vue'
import { createHead } from '@unhead/vue/client'

const head = createHead({
  plugins: [
    UnheadSchemaOrg({ host: 'https://example.com' }),
  ]
})
```

Use `createHead()` from `@unhead/vue/server` for SSR. See [Schema.org Params](/docs/schema-org/guides/core-concepts/params) for all available options.

### 3. Add Site Schema.org Data

```ts
import { defineWebPage, defineWebSite, useSchemaOrg } from '@unhead/schema-org/vue'

useSchemaOrg([
  defineWebSite({
    name: 'Example Site',
  }),
  defineWebPage(),
])
```

## Recommended: Vite Plugin

If you're using Vite, the [Vite plugin](/docs/head/guides/build-plugins/overview) can tree-shake server-only code and transform head composables at build time:

```ts
import vue from '@vitejs/plugin-vue'
import { Unhead } from '@unhead/vue/vite'

export default defineConfig({
  plugins: [vue(), Unhead()],
})
```

## Optional: Auto-Imports

If you're using Vite with [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) and [unplugin-auto-import](https://github.com/unplugin/unplugin-auto-import), configure the Vue adapter's presets in `vite.config.ts`:

```ts [@unhead/schema-org/vue]
import { schemaOrgAutoImports, SchemaOrgResolver } from '@unhead/schema-org/vue'

export default defineConfig({
  plugins: [
    // ...
    Components({
      // ...
      resolvers: [
        // auto-import schema-org components
        SchemaOrgResolver(),
      ],
    }),
    AutoImport({
      // ...
      imports: schemaOrgAutoImports,
    }),
  ]
})
```

`SchemaOrgResolver()` supports the deprecated component API. New projects can omit the `Components()` configuration and use the auto-imported composables instead.

## Next Steps

1. Choose an [Identity](/docs/schema-org/guides/recipes/identity)
2. Set up your pages for [Schema.org Params](/docs/schema-org/guides/core-concepts/params)
3. Follow a recipe:

- [Breadcrumbs](/docs/schema-org/guides/recipes/breadcrumbs)
- [FAQ Page](/docs/schema-org/guides/recipes/faq)
- [Site Search](/docs/schema-org/guides/recipes/site-search)