Setup îles | Unhead

Install

yarn

yarn add -D @unhead/schema-org-vue

Demo

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 '@unhead/schema-org-vue'
export default defineConfig({
  siteUrl: 'https://iles-docs.netlify.app/',
  modules: [
    {
      name: '@unhead/schema-org-vue',
      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 '@unhead/schema-org-vue'
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 '@unhead/schema-org-vue'
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: