Setup îles
Install
yarn
yarn add -D @vueuse/schema-orgDemo
Setup Module
1. Add Module
Start by adding in the îles Schema.org module which handles component auto-imports.
iles.config.ts
import { defineConfig } from 'iles'import { SchemaOrgResolver } from '@vueuse/schema-org'export default defineConfig({ siteUrl: 'https://iles-docs.netlify.app/', modules: [ { name: '@vueuse/schema-org', components: { resolvers: [ // adds component auto-imports SchemaOrgResolver(), ], }, }, ],})Note: Make sure you set your siteUrl if you haven't already.
2. Install Vue Plugin
Add the vue plugin in your app.ts file.
app.ts
import { defineApp } from 'iles'import { SchemaOrgUnheadPlugin } from '@vueuse/schema-org'export default defineApp({ async enhanceApp(ctx) { ctx.head.use(SchemaOrgUnheadPlugin({ // user config host: ctx.site.url, // needed for iles tagPosition: 'head', }, () => { // adds meta for runtime inferences return { path: ctx.router?.currentRoute.value.path || '/', ...ctx.meta, ...ctx.frontmatter, ...ctx.router?.currentRoute.value.meta || {}, } })) },})See the User Config page for all options you can pass.
3. Add Site Schema.org
Within your layouts/default.vue file you can add your site-wide schema.
Composition API
<script lang="ts" setup>import { defineWebPage, defineWebSite, useSchemaOrg } from '@vueuse/schema-org'useSchemaOrg([ defineWebPage(), defineWebSite({ name: 'test', }),])</script>Next Steps
Your îles 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: