Setup Vitesse
Demo
See the playground for reference.
Install
yarn
yarn add -D @vueuse/schema-orgSetup Module
1. Install Vue Plugin
Create a file called schemaOrg.ts inside your modules folder.
src/modules/schemaOrg.ts
import { type UserModule } from '~/types'// https://unhead-schema-org.harlanzw.com/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('@vueuse/schema-org') 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 '@vueuse/schema-org'export default defineConfig({ plugins: [ // ... Components({ resolvers: [ // auto-import @vueuse/schema-org components SchemaOrgResolver(), ], }), AutoImport({ imports: [ // auto-import @vueuse/schema-org composables { '@vueuse/schema-org': 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: https://unhead-schema-org.harlanzw.com//guide/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: