@vueuse/schema-org

Composition API

useSchemaOrg([  definePerson({    name: 'Harlan Wilton',    image: '/me.png',    sameAs: [      'https://github.com/harlan-zw',      'https://twitter.com/harlan_zw'    ]  }),  defineWebSite({ name: 'My Blog' }),  defineWebPage(),])

Output

{  "@type": "Person",  "name": "Harlan Wilton",  "image": {    "@id": "https://harlanzw.com/#/schema/image/0clPJC0nqP"  },  "sameAs": [    "https://twitter.com/harlan_zw",    "https://github.com/harlan-zw"  ],  "@id": "https://harlanzw.com/#identity",  "url": "https://harlanzw.com/"},{  "@type": "WebSite",  "url": "https://harlanzw.com/",  "inLanguage": "en-AU",  "name": "Harlan Wilton",  "image": {    "@id": "https://harlanzw.com/#/schema/image/BujjRcRH0N"  },  "description": "Hey, I'm Harlan, a full-stack web developer living in Sydney, Australia. I'm passionate about building open-source packages in the Vue, Nuxt and Vite ecosystems.",  "@id": "https://harlanzw.com/#website",  "publisher": {    "@id": "https://harlanzw.com/#identity"  }},{  "@type": "WebPage",  "@id": "https://harlanzw.com/#webpage",  "url": "https://harlanzw.com/",  "potentialAction": [    {      "@type": "ReadAction",      "target": [        "https://harlanzw.com/"      ]    }  ],  "about": {    "@id": "https://harlanzw.com/#identity"  },  "isPartOf": {    "@id": "https://harlanzw.com/#website"  }},{  "@type": "ImageObject",  "inLanguage": "en-AU",  "url": "https://harlanzw.com/cover.png",  "@id": "https://harlanzw.com/#/schema/image/BujjRcRH0N",  "contentUrl": "https://harlanzw.com/cover.png"},{  "@type": "ImageObject",  "inLanguage": "en-AU",  "url": "https://harlanzw.com/harlan-wilton",  "@id": "https://harlanzw.com/#/schema/image/0clPJC0nqP",  "contentUrl": "https://harlanzw.com/harlan-wilton"}

What's included

Best Practices

Built from the ground up around Google and Yoast's best practices for Schema.org

Runtime Inferences

Hooks into your runtime to infer Schema, reducing boilerplate.

Minimal Boilerplate

Automatically improves your Schema.org with resolving of relations, URLs and more.

Simple or Advanced Types

Simple by default, with an advanced opt-in to schema-dts in one line.

Seriously Performant

By default has a 0 kB JS runtime when Server-Side Rendering, otherwise fully tree-shakable.

Integrations

Ready to work out of the box with Nuxt, Vitesse, Vite and VitePress.

@vueuse/
Schema.org