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


yarn add -D nuxt-schema-org
npm install -D nuxt-schema-org
pnpm add -D nuxt-schema-org


Open in StackBlitz

Setup Module

1. Add Module

Add the module to your Nuxt config.

export default defineNuxtConfig({  modules: [    'nuxt-schema-org',  ],})
This module uses auto-imports for composables and components.

2. Configure the module

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

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

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

To quickly add the recommended to all pages, you can make use Runtime Inferences.

This should be done in either your app.vue or layouts/default.vue file.

Composition API
<script lang="ts" setup>useSchemaOrg([  // @todo Select Identity:  defineWebSite({    name: 'My Awesome Website',  }),  defineWebPage(),])</script>
Component API
<template>  <!-- @todo Select Identity: -->  <SchemaOrgWebSite name="My Awesome Website" />  <SchemaOrgWebPage /></template>

Next Steps

Your Nuxt 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:

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 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.url = `${}${meta.path}`    }  })})