Learn how to start using Schema.org with @vueuse/schema-org in Vitesse.
See the playground for reference.
yarn add -D @vueuse/schema-org-viteStart by adding in the Vite plugin which handles the aliasing for SSR mocking.
import { SchemaOrg } from '@vueuse/schema-org-vite'// https://vitejs.dev/config/export default defineConfig({ // ... plugins: [ SchemaOrg({ // use simple types full: false, // write type alias to tsconfig.json dts: true, // enable mocking in production mock: typeof process.env.VITE_SSG === 'undefined' && process.env.NODE_ENV === 'production', }), ],})Create a file called schema-org.ts inside your modules folder.
import { type UserModule } from '~/types'// Setup @vueuse/schema-org// https://schema-org.vueuse.comexport const install: UserModule = async (ctx) => { // Disables client on build, allows 0kb runtime if (ctx.isClient && import.meta.env.PROD) { return } const { installSchemaOrg } = await import('@vueuse/schema-org-vite/vitesse') installSchemaOrg(ctx, { canonicalHost: 'https://vitesse.example.com' })}You should set the canonical host of your site.
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, 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, ], }), ]})To quickly add the recommended Schema.org to all pages, you can make use Runtime Inferences.
This should be done in your App.vue.
<script lang="ts" setup>useSchemaOrg([ // @todo Select Identity: https://vue-schema-org.netlify.app/guide/guides/identity defineWebSite({ name: 'My Awesome Website', }), defineWebPage(),])</script>Your Vitesse app is now serving basic Schema.org, congrats! 🎉
The next steps are: