VueUse - UseSchemaOrg

Status: In Development 🔨
_{Made possible by my Sponsor Program 💖
Follow me @harlan_zw 🐦}

Features

✨ Rich Results with minimal configuration
🔎 Automatic Schema.org generation
📰 Handy composables and utilities for advanced configuration
🤖 Renderless + rendered components
🍞 Supports: Breadcrumbs, Article, Carousel, FAQ, Reviews, + more to come
🇹 Full Type Support

Schema.org 📰

The highest leverage schema.org data has been abstracted into a simple configuration seoMeta.schema which will generate everything you need for Google to start showing your result in their Knowledge Graph.

Additionally, composables are available to change the generated page schema.

Install

# NPM
npm install -D @vueuse/schema-org
# or Yarn
yarn add -D @vueuse/schema-org
# or PNPM
pnpm add -D @vueuse/schema-org

Usage

Within your nuxt.config.ts add the following.

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

Configure the default app fields for your site.

Organisation

If you're creating a website for a brand, then you'll want to setup the organisation meta.

export default defineNuxtConfig({
  // ...
  schemaOrg: {
    host: 'https://v3.nuxtjs.org/',
    // use an organisation as the publisher
    publisher: defineOrganization({
      name: 'Nuxt.js',
      logo: {
        url: 'https://vueuse.js.org/logo.png',
        width: '200',
        height: '200'
      },
      sameAs: [
        'https://twitter.com/nuxt_js'
      ]
    }),
  }
})

Person

If you're creating a site about a person, such as a blog, then you'll want to use the person schema.

export default defineNuxtConfig({
  // ...
  schemaOrg: {
    host: 'https://v3.nuxtjs.org/',
    // Alternative: use a person
    publisher: definePerson({
      name: 'Harlan Wilton',
      image: 'https://pbs.twimg.com/profile_images/1296047415611387904/bI-fltZ4_normal.jpg',
    })
  }
})

Extending Schema

// @todo

Composables

API

useSchemaOrgPageType(type: SupportedSchemaOrgPageType, options)

Set page type
useSchemaOrgArticleType(type: SupportedSchemaOrgArticleType, options)

Mark the page as displaying an article and set the type

<script setup lang="ts">
// mark the page as an about page
useSchemaOrgPageType('AboutPage')
</script>

<script setup lang="ts">
// mark the page as an about page
useSchemaOrgArticleType('TechArticle')
</script>

Breadcrumbs 🍞

You can either use the useSchemaOrgBreadcrumbs or the SchamaOrgBreadcrumbs component.

Composable

<script setup lang="ts">
const breadcrumbs = [
  {
    name: 'Home',
    url: '/'
  },
  {
    name: 'About',
    url: '/about'
  }
]

useSchemaOrgBreadcrumbs(breadcrumbs)
</script>

Headless UI component

<template>
<SchamaOrgBreadcrumbs :items="items">
  <template #link="{ text, link }">>
    <nuxt-link :to="link">text</nuxt-link>
  </template>
</SchamaOrgBreadcrumbs>
</template>

Package detail

@vueuse/schema-org-vite

readme