Install

yarn add -D @vueuse/schema-org-vite @vueuse/head @vueuse/schema-org

npm install -D @vueuse/schema-org-vite @vueuse/head @vueuse/schema-org

pnpm add -D @vueuse/schema-org-vite @vueuse/head @vueuse/schema-org

Note: This package depends on @vueuse/head. The plugin will be automatically setup for you if you haven't already done so.

Note 2: dependency edge case with resolving the main package so including both are required.

Setup Module

1. Add Module

Modify your .vitepress/theme/index.ts file to add the plugin.

import DefaultTheme from 'vitepress/theme'import { installSchemaOrg } from '@vueuse/schema-org-vite/vitepress'import type { Theme } from 'vitepress/dist/client'const theme: Theme = {  ...DefaultTheme,  enhanceApp(ctx) {    installSchemaOrg(ctx, {      /* config */    })  },}export default theme

2. Install Vue Plugin

Next we need to load the plugin.

import DefaultTheme from 'vitepress/theme'import { installSchemaOrg } from '@vueuse/schema-org-vite/vitepress'import type { Theme } from 'vitepress/dist/client'const theme: Theme = {  ...DefaultTheme,  enhanceApp(ctx) {    installSchemaOrg(ctx, {      canonicalHost: 'https://example.com',    })  },}export default theme

You should set the canonical host of your site.

See the User Config page for all options you can pass.

Optional: Auto Imports

If you're using unplugin-vue-components or unplugin-auto-import, you can provide extra configuration for automatic imports.

Modify your vite.config.ts to get the auto-imports.

import { SchemaOrgResolver, schemaOrgAutoImports } from '@vueuse/schema-org-vite'export default defineConfig({  plugins: [    // ...    Components({      // ...      resolvers: [        // auto-import schema-org components          SchemaOrgResolver(),      ],    }),    AutoImport({      // ...      imports: [        // auto-import schema-org composables          schemaOrgAutoImports,      ],    }),  ]})

Manual Imports

If you don't intend to use auto-imports you can import the components and define functions using the aliases.

<script lang="ts" setup>import { useSchemaOrg } from '#vueuse/schema-org/runtime'import { defineWebPage } from '#vueuse/schema-org/provider'useSchemaOrg([  defineWebPage({    name: 'Test',  }),])</script>

<script lang="ts" setup>import { SchemaOrgWebPage, SchemaOrgWebSite } from '#vueuse/schema-org/runtime'</script><template>  <!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->  <SchemaOrgWebSite name="My Awesome Website" />  <SchemaOrgWebPage /></template>

3. Recommended: Add Site Schema.org

To get all your pages up and running with Schema, you can make use schema inheritance and define Schema in your Layout file.

This allows all pages to inherit these Schemas, without them having to explicitly define them.

To add global Schema in VitePress, you need to override the default layout.

<script lang="ts" setup>useSchemaOrg([  // @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity  defineWebSite({    name: 'My Awesome Website',  }),  defineWebPage(),])</script>

<template>  <!-- @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity -->  <SchemaOrgWebSite name="My Awesome Website" />  <SchemaOrgWebPage /></template>

Next Steps

Your VitePress app is now serving basic Schema.org, congrats! 🎉

The next steps are:

1. Choose an Identity
2. Set up your pages for Runtime Inferences
3. Then feel free to follow some recipes:

• Breadcrumbs
• FAQ Page
• Site Search