Nighttime Peanut Migrations

    nuxt-jsonld
    TypeScript icon, indicating that this package has built-in type declarations

    1.5.3 • Public • Published

    nuxt-jsonld

    version dependencies downloads CircleCI codecov

    A Nuxt.js plugin to manage jsonld in Vue component.

    Installation

    $ yarn add nuxt-jsonld
    or
    $ npm install nuxt-jsonld
    // plugins/jsonld.js
    import Vue from 'vue';
    import NuxtJsonld from 'nuxt-jsonld';
    
    Vue.use(NuxtJsonld);

    Then, add plugin config to nuxt.config.js.

      plugins: ['~/plugins/jsonld'],

    Usage

    Make a jsonld method to your Vue components and return structured data object.

    <template>...</template>
    
    <script>
    export default {
      data() {
        return {
          breadcrumbs: [
            {
              url: 'https://example.com',
              text: 'top page',
            },
            {
              url: 'https://example.com/foo',
              text: 'foo',
            },
            {
              url: 'https://example.com/foo/bar',
              text: 'bar',
            },
          ],
        };
      },
      jsonld() {
        const items = this.breadcrumbs.map((item, index) => ({
          '@type': 'ListItem',
          position: index + 1,
          item: {
            '@id': item.url,
            name: item.text,
          },
        }));
        return {
          '@context': 'https://schema.org',
          '@type': 'BreadcrumbList',
          itemListElement: items,
        };
      },
    };
    </script>

    🎉 You will get the jsonld tag! 🎉

    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
          {
            "@type": "ListItem",
            "position": 1,
            "item": {
              "@id": "https://example.com",
              "name": "top page"
            }
          },
          {
            "@type": "ListItem",
            "position": 2,
            "item": {
              "@id": "https://example.com/foo",
              "name": "foo"
            }
          },
          {
            "@type": "ListItem",
            "position": 3,
            "item": {
              "@id": "https://example.com/foo/bar",
              "name": "bar"
            }
          }
        ]
      }
    </script>

    If you do not want to make jsonld tag, just return null;

    <script>
      export default {
        props: ['foo'],
        jsonld() {
          if (!this.foo) {
            return null;
          }
    
          return {
            '@context': 'https://schema.org',
            '@type': 'Product',
            name: 'product name',
          };
        },
      };
    </script>

    You can return multiple json data as an array.

    [
      {
        '@context': 'https://schema.org',
        '@type': 'BreadcrumbList',
        itemListElement: [
          /* breadcrumb items*/
        ],
      },
      {
        '@context': 'https://schema.org',
        '@type': 'NewsArticle',
        mainEntityOfPage: {
          /* article info */
        },
      },
    ];

    Or use @graph notation. #247

    TypeScript

    with Vue.extend

    <script lang="ts">
      export default Vue.extend({
        jsonld() {
          return {
            '@context': 'https://schema.org',
            '@type': 'Product',
            name: 'product name',
          };
        },
      });
    </script>

    with vue-property-decorator

    <script lang="ts">
      import { Component, Vue } from 'vue-property-decorator'
      import { Jsonld } from 'nuxt-jsonld';
    
      @Jsonld
      @Component
      export default class Sample extends Vue {
        jsonld() {
          return {
            '@context': 'https://schema.org',
            '@type': 'Product'
            name: 'product name',
          };
        }
      };
    </script>

    Install

    npm i nuxt-jsonld

    DownloadsWeekly Downloads

    12,881

    Version

    1.5.3

    License

    MIT

    Unpacked Size

    11.5 kB

    Total Files

    10

    Last publish

    Collaborators

    • ymmooot