Setup îles


yarn add -D @vueuse/schema-org
npm install -D @vueuse/schema-org
pnpm add -D @vueuse/schema-org


Open in StackBlitz

Setup Module

1. Add Module

Start by adding in the îles module which handles component auto-imports.

import { defineConfig } from 'iles'import { SchemaOrgResolver } from '@vueuse/schema-org'export default defineConfig({  siteUrl: '',  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.

import { defineApp } from 'iles'import { SchemaOrgUnheadPlugin } from '@vueuse/schema-org'export default defineApp({  async enhanceApp(ctx) {    ctx.head.use(SchemaOrgUnheadPlugin({      // user config      host:,      // 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

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>
Component API
<template>  <!-- @todo Select Identity: -->  <SchemaOrgWebPage />  <SchemaOrgWebSite name="îles" /></template>

Next Steps

Your îles app is now serving basic, congrats! 🎉

The next steps are:

  1. Choose an Identity
  2. Set up your pages for Runtime Inferences
  3. Then feel free to follow some recipes: