Learn how to start using Schema.org with Vite.
Due to there being many ways to setup a Vanilla Vite project, it's hard to prescribe exactly how to set one up, thus Vanilla Vite integration is experimental.
yarn add -D @vueuse/schema-org-vite @vueuse/headWarning: This package depends on @vueuse/head. Please make sure you set it up seperately before proceeding with this guide.
Start by adding in the Vite plugin which handles the aliasing for SSR mocking.
import { URL, fileURLToPath } from 'node:url'import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import { SchemaOrg } from '@vueuse/schema-org-vite'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), SchemaOrg({ // Note: mocking is disable as it's expiremental mock: false, // use simple types full: false, // write type alias to tsconfig.json dts: true, }), ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)), }, },})Next we need to load the plugin.
import { createApp } from 'vue'import { installSchemaOrg } from '@vueuse/schema-org-vite/vite'import App from './App.vue'import router from './router'import './assets/main.css'const app = createApp(App)app.use(router)installSchemaOrg({ app, router }, { canonicalHost: 'https://vitejs.dev',})app.mount('#app')You should set the canonical host of your site.
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 { SchemaOrg, SchemaOrgResolver, schemaOrgAutoImports } from '@vueuse/schema-org/vite'export default defineConfig({ plugins: [ // ... SchemaOrg({ // use simple types full: false, // write type alias to tsconfig.json dts: true, }), Components({ // ... resolvers: [ // auto-import schema-org components SchemaOrgResolver(), ], }), AutoImport({ // ... imports: [ // auto-import schema-org composables schemaOrgAutoImports, ], }), ]})If you don't intend to use auto-imports you can import the components and define functions using the aliases.
<script lang="ts" setup>import { useSchemaOrg } from '#vueuse/schema-org/runtime'import { defineWebPage } from '#vueuse/schema-org/provider'useSchemaOrg([ defineWebPage({ name: 'Test', }),])</script>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 Vite app is now serving basic Schema.org, congrats! 🎉
The next steps are: