Setup Vite | Unhead

To use this package with Vite, you'll need to be using Unhead.

Install

yarn

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

Playgrounds

Vite SPA

Vite + Vite SSR

Setup Module

1. Install Vue Plugin

Next we need to load the plugin.

src/main.ts

import { createApp } from 'vue'
import { SchemaOrgUnheadPlugin } from '@unhead/schema-org-vue'
import { createHead } from '@unhead/vue'
import App from './App.vue'
import router from './router'
import './assets/main.css'
const app = createApp(App)
app.use(router)
const head = createHead()
head.use(SchemaOrgUnheadPlugin({
  // config
  host: 'https://example.com',
}, () => {
  const route = router.currentRoute.value
  return {
    path: route.path,
    ...route.meta,
  }
}))
app.use(head)
app.mount('#app')

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

Recommended: Auto Imports

If you're using unplugin-vue-components or unplugin-auto-import, you can provide extra configuration for automatic imports.

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

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

Manual Imports

If you don't intend to use auto-imports you can import the components and define functions using the aliases.

Composition API

<script lang="ts" setup>
import { defineWebPage, useSchemaOrg } from '@unhead/schema-org-vue'
useSchemaOrg([
  defineWebPage({
    name: 'Test',
  }),
])
</script>

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 your App.vue.

Composition API

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

Next Steps

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