Setup Vite

Install

yarn
yarn add -D @vueuse/schema-org @vueuse/head
npm
npm install -D @vueuse/schema-org @vueuse/head
pnpm
pnpm add -D @vueuse/schema-org @vueuse/head

Note: This package depends on @vueuse/head. Please make sure you set it up separately before proceeding with this guide.

Demos

Vite SPAVite + Vite SSR

Setup Module

1. Install Vue Plugin

Next we need to load the plugin.

src/main.ts
import { createApp } from 'vue'import { SchemaOrgUnheadPlugin } from '@vueuse/schema-org'import { createHead } from '@vueuse/head'import App from './App.vue'import router from './router'import './assets/main.css'const app = createApp(App)app.use(router)const head = createHead()head.use(SchemaOrgUnheadPlugin({  // config  host: 'https://example.com',}, () => {  const route = router.currentRoute.value  return {    path: route.path,    ...route.meta,  }}))app.use(head)app.mount('#app')

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

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, schemaAutoImports } from '@vueuse/schema-org'export default defineConfig({  plugins: [    // ...    Components({      // ...      resolvers: [        // auto-import schema-org components          SchemaOrgResolver(),      ],    }),    AutoImport({      // ...      imports: [        // auto-import schema-org composables          {          '@vueuse/schema-org': schemaAutoImports,        },      ],    }),  ]})

Manual Imports

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

Composition API
<script lang="ts" setup>import { useSchemaOrg, defineWebPage } from '@vueuse/schema-org'useSchemaOrg([  defineWebPage({    name: 'Test',  }),])</script>
Component API
<script lang="ts" setup>import { SchemaOrgWebPage, SchemaOrgWebSite } from '@vueuse/schema-org'</script><template>  <!-- @todo Select Identity: https://unhead-schema-org.harlanzw.com//guide/guides/identity -->  <SchemaOrgWebSite name="My Awesome Website" />  <SchemaOrgWebPage /></template>

To quickly add the recommended Schema.org to all pages, you can make use Runtime Inferences.

This should be done in your App.vue.

Composition API
<script lang="ts" setup>useSchemaOrg([  // @todo Select Identity: https://unhead-schema-org.harlanzw.com//guide/guides/identity  defineWebSite({    name: 'My Awesome Website',  }),  defineWebPage(),])</script>
Component API
<template>  <!-- @todo Select Identity: https://unhead-schema-org.harlanzw.com//guide/guides/identity -->  <SchemaOrgWebSite name="My Awesome Website" />  <SchemaOrgWebPage /></template>

Next Steps

Your Vite 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:
Table of Contents