NPM version NPM Downloads Docs & Demos GitHub stars

Schema.org for Vue. Supports typed and automated Google Rich Results

Status: Technical Preview ? Announcement soon Made possible by my Sponsor Program ? Follow me @harlan_zw ?


  • ? No Schema.org knowledge required, get up and running in minutes with minimal configuration
  • ✨ 15+ Typed definitions for best practice (Google, Yoast) Rich Results e.g. defineProduct, defineArticle, defineLocalBusiness, etc.
  • ? Automated Schema management: @id‘s, URL resolving & more
  • ? Composable or Components e.g. SchemaOrgBreadcrumb, SchemaOrgQuestion, SchemaOrgInspector
  • ? Integrations for VitePress, Nuxt, Vitesse and Vite with auto-imports
  • ? SSR and tree-shaking enabled


Implementing Schema.org is the easiest way to opt-in to Google Rich Results. The improved visibility of Rich Results has been shown to improve click-through rates.

Existing solutions to add Schema.org ld+json script tags work.

However, implementing and maintaining Schema has issues:

  • Option paralysis in which Schema to implement and how
  • Limited and confusing documentation on best practices
  • Nested Schema adding unnecessary kB to page weight
  • Managing @id and url references are brittle

This package aims to solve all of these issues, following the best practices from SEO giant Yoast and Google’s own documentation.

Get Started


Framework guides:


Transforms the below code into an embedded <script type="application/ld+json"> with the JSON content following it.

    name: 'Nuxt.js',
    logo: '/logo.png',
    sameAs: [
    name: 'Nuxt',
    description: 'Nuxt is a progressive framework for building modern web applications with Vue.js',

  "@context": "https://schema.org",
  "@graph": [
      "@type": "Organization",
      "@id": "https://nuxtjs.org/#identity",
      "url": "https://nuxtjs.org/",
      "name": "Nuxt.js",
      "logo": {
        "@type": "ImageObject",
        "inLanguage": "en",
        "@id": "https://nuxtjs.org/#logo",
        "url": "https://nuxtjs.org/logo.png",
        "caption": "Nuxt.js",
        "contentUrl": "https://nuxtjs.org/logo.png"
      "sameAs": [
      "image": {
        "@id": "https://nuxtjs.org/#logo"
      "@type": "WebPage",
      "@id": "https://nuxtjs.org/#webpage",
      "url": "https://nuxtjs.org/",
      "potentialAction": [
          "@type": "ReadAction",
          "target": [
      "about": {
        "@id": "https://nuxtjs.org/#identity"
      "primaryImageOfPage": {
        "@id": "https://nuxtjs.org/#logo"
      "isPartOf": {
        "@id": "https://nuxtjs.org/#website"
      "@type": "WebSite",
      "@id": "https://nuxtjs.org/#website",
      "url": "https://nuxtjs.org/",
      "inLanguage": "en",
      "name": "Nuxt",
      "description": "Nuxt is a progressive framework for building modern web applications with Vue.js",
      "publisher": {
        "@id": "https://nuxtjs.org/#identity"



MIT License © 2022-PRESENT Harlan Wilton


View Github