îles
Setup Schema.org with your îles app.
Demo
Install
yarn
yarn add -D @vueuse/schema-org-viteSetup Module
1. Add Module
Start by adding in the îles Schema.org module which handles aliasing and component auto-imports.
iles.config.ts
import { defineConfig } from 'iles'import { schemaOrgIles } from '@vueuse/schema-org-vite/iles-module'export default defineConfig({ siteUrl: 'https://iles-docs.netlify.app/', modules: [ schemaOrgIles({ // select which types you'd like full: false, }), ],})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 { installSchemaOrg } from '@vueuse/schema-org-vite/iles-app'export default defineApp({ async enhanceApp(ctx) { installSchemaOrg(ctx, { // any default 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/runtime'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: