Setup Vite
Install
yarn
yarn add -D @vueuse/schema-org @vueuse/head
Note: This package depends on @vueuse/head. Please make sure you set it up separately before proceeding with this guide.
Demos
Vite SPAVite + Vite SSRSetup Module
1. Install Vue Plugin
Next we need to load the plugin.
src/main.ts
import { createApp } from 'vue'
import { SchemaOrgUnheadPlugin } from '@vueuse/schema-org'
import { createHead } from '@vueuse/head'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(router)
const head = createHead()
head.use(SchemaOrgUnheadPlugin({
// config
host: 'https://example.com',
}, () => {
const route = router.currentRoute.value
return {
path: route.path,
...route.meta,
}
}))
app.use(head)
app.mount('#app')
See the User Config page for all options you can pass.
Recommended: Auto Imports
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 { SchemaOrgResolver, schemaAutoImports } from '@vueuse/schema-org'
export default defineConfig({
plugins: [
// ...
Components({
// ...
resolvers: [
// auto-import schema-org components
SchemaOrgResolver(),
],
}),
AutoImport({
// ...
imports: [
// auto-import schema-org composables
{
'@vueuse/schema-org': schemaAutoImports,
},
],
}),
]
})
Manual Imports
If you don't intend to use auto-imports you can import the components and define functions using the aliases.
Composition API
<script lang="ts" setup>
import { defineWebPage, useSchemaOrg } from '@vueuse/schema-org'
useSchemaOrg([
defineWebPage({
name: 'Test',
}),
])
</script>
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 Vite 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: