<script lang="ts" setup>
// You don't need to import explicitly.
// import { useJsonld } from '#jsonld';

// just pass a jsonld object for static jsonld
useJsonld({
  '@context': 'https://schema.org',
  '@type': 'Thing',
  name: 'static json',
});

// pass a function which returns a jsonld object for reactive jsonld
const count = ref(0);
const countUp = () => {
  count.value += 1;
};
useJsonld(() => ({
  '@context': 'https://schema.org',
  '@type': 'Thing',
  name: `reactive json: count is ${count.value}`,
}));
</script>

<script lang="ts">
import type { WithContext, ListItem } from 'schema-dts';

export default defineComponent({
  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(): WithContext<ListItem> {
    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>