Setup Vitesse | Unhead

Demo

See the playground for reference.

Install

yarn

yarn add -D @unhead/schema-org-vue

Setup Module

1. Install Vue Plugin

Create a file called schemaOrg.ts inside your modules folder.

src/modules/schemaOrg.ts

import { type UserModule } from '~/types'
// http://unhead.unjs.io/
export const install: UserModule = async (ctx) => {
  // Disables on client build, allows 0kb runtime
  if (ctx.isClient && import.meta.env.PROD)
    return
  const { SchemaOrgUnheadPlugin } = await import('@unhead/schema-org-vue')
  ctx.head.use(SchemaOrgUnheadPlugin({
    // config
    host: 'https://vitesse.example.com'
  }, () => {
    return {
      path: ctx.router.currentRoute.value.path,
      ...ctx.router.currentRoute.value.meta,
    }
  }))
}

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

Recommended: Auto Imports

Modify your vite.config.ts to enable auto imports of all composables and components.

vite.config.ts

import { SchemaOrgResolver, schemaAutoImports } from '@unhead/schema-org-vue'
export default defineConfig({
  plugins: [
    // ...
    Components({
      resolvers: [
        // auto-import @unhead/schema-org-vue components
        SchemaOrgResolver(),
      ],
    }),
    AutoImport({
      imports: [
        // auto-import @unhead/schema-org-vuecomposables
        {
          '@unhead/schema-org-vue': schemaAutoImports,
        },
      ],
    }),
  ]
})

3. Recommended: Add Site Schema.org

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: http://unhead.unjs.io/schema-org/guides/identity
  defineWebSite({
    name: 'My Awesome Website',
  }),
  defineWebPage(),
])
</script>

Next Steps

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

The next steps are:

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