getting started

Install Unhead

Get started with Unhead by installing the dependency to your project.

Using Nuxt? Check out nuxt-schema-org.


Vite SPA

Vite + Vite SSR


  1. Install @unhead/schema-org dependency to your project:
yarn add -D @unhead/schema-org
  1. Configure the params

At a minimum you should provide a host.

import { SchemaOrgUnheadPlugin } from '@unhead/schema-org'useHead({  templateParams: {    schemaOrg: {      host: '',    }  }})

See the Params for all options you can pass on schemaOrg.

3. Add Site

useSchemaOrg([  // @todo Select Identity:  defineWebSite({    name: 'My Awesome Website',  }),  defineWebPage(),])

If you're using Vite SSR, it's highly recommended to add the Unhead tree-shaking plugin.

This will remove the @unhead/schema-org dependency from your client bundle, and only include it in your server bundle.

import { defineConfig } from 'vite'import { unhead } from '@unhead/vite-plugin'export default defineConfig({  plugins: [    unhead(),  ]})

Optional: Auto-Imports

If you're using Vite with unplugin-vue-components or unplugin-auto-import, you can optionally configure automatic imports.

Modify your vite.config.ts to get the auto-imports.

import { SchemaOrgResolver, schemaAutoImports } from '@unhead/schema-org'export default defineConfig({  plugins: [    // ...    Components({      // ...      resolvers: [        // auto-import schema-org components        SchemaOrgResolver(),      ],    }),    AutoImport({      // ...      imports: [        // auto-import schema-org composables        {          '@unhead/schema-org': schemaAutoImports,        },      ],    }),  ]})

Next Steps

Your Nuxt app is now serving basic, congrats! 🎉

The next steps are:

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