Nuxt Schema.org

ℹ️ Looking for a complete SEO solution? Check out Nuxt SEO Kit.

Install

yarn add -D nuxt-schema-org

npm install -D nuxt-schema-org

pnpm add -D nuxt-schema-org

Demo

Setup Module

1. Add Module

Add the module to your Nuxt config.

export default defineNuxtConfig({  modules: [    'nuxt-schema-org',  ],})

2. Configure the module

To server-side render Schema.org, you'll need to provide a canonical host.

export default defineNuxtConfig({  // recommended  runtimeConfig: {    public: {      siteUrl: process.env.NUXT_PUBLIC_SITE_URL || 'https://example.com',    }  },  // ...  schemaOrg: {    host: 'https://example.com',  },})

See the User Config page for all options you can pass on schemaOrg.

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 either your app.vue or layouts/default.vue file.

<script lang="ts" setup>useSchemaOrg([  // @todo Select Identity: https://unhead-schema-org.harlanzw.com//guide/guides/identity  defineWebSite({    name: 'My Awesome Website',  }),  defineWebPage(),])</script>

<template>  <!-- @todo Select Identity: https://unhead-schema-org.harlanzw.com//guide/guides/identity -->  <SchemaOrgWebSite name="My Awesome Website" />  <SchemaOrgWebPage /></template>

Next Steps

Your Nuxt app is now serving basic Schema.org, 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:

• Breadcrumbs
• FAQ Page
• Site Search

Module Options

All module options can be passed on the schemaOrg key in your nuxt.config.ts.

See User Config for config options.

NuxtApp Hooks

• schema-org:meta: (meta: MetaInput) => void

You can hook into the generation of the meta-data used to generate the Schema.org data.

For example, this can be useful for dynamically changing the host.

import { defineNuxtPlugin } from '#app'export default defineNuxtPlugin((nuxtApp) => {  nuxtApp.hooks.hook('schema-org:meta', (meta) => {    if (nuxtApp._route.path === '/plugin-override') {      meta.host = 'https://override-example.com'      meta.url = `${meta.host}${meta.path}`    }  })})