Setup Vitesse


See the playground for reference.


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

Setup Module

1. Install Vue Plugin

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

import { type UserModule } from '~/types'// 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: ''  }, () => {    return {      path: ctx.router.currentRoute.value.path,      ...ctx.router.currentRoute.value.meta,    }  }))}

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

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

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,        },      ],    }),  ]})

To quickly add the recommended 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:  defineWebSite({    name: 'My Awesome Website',  }),  defineWebPage(),])</script>
Component API
<template>  <!-- @todo Select Identity: -->  <SchemaOrgWebSite name="My Awesome Website" />  <SchemaOrgWebPage /></template>

Next Steps

Your Vitesse app is now serving basic, 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: