chore: update example code

Author: ymmooot

cypress/e2e/test.cy.js

@@ -25,7 +25,6 @@ describe('nuxt-jsonld', () => {
         expect(json).to.have.property('@context', 'https://schema.org');
         expect(json).to.have.property('@type', 'Thing');
         expect(json).to.have.property('name', 'Static json');
-
         const json2 = JSON.parse(el[1].innerText);
         expect(json2).to.have.property('@context', 'https://schema.org');
         expect(json2).to.have.property('@type', 'Thing');

package.json

@@ -22,7 +22,7 @@
     "prettier": "^3.3.2"
   },
   "volta": {
-    "node": "18.18.0",
+    "node": "22.12.0",
     "yarn": "1.22.22"
   }
 }

packages/example/composables/dog.ts

@@ -0,0 +1,32 @@
+type Dog = {
+  breed: string;
+  name: string;
+  age: number;
+};
+
+export const useDog = async () => {
+  const app = useNuxtApp();
+
+  // fetch Dog data
+  await new Promise((res) => setTimeout(res, 100));
+  const dog: Dog = {
+    breed: 'Golden Retriever',
+    name: 'Buddy',
+    age: 5,
+  };
+
+  // Note: This jsonld will not disappear even after page transition.
+  // If you want to link it to the page, use useJsonld in the component side.
+  app.runWithContext(() => {
+    useJsonld(() => ({
+      '@context': 'https://schema.org',
+      '@type': 'Thing',
+      name: dog.name,
+      description: `A ${dog.breed} dog: not linked to the page`,
+    }));
+  });
+
+  return {
+    dog,
+  };
+};

packages/example/nuxt.config.ts

@@ -1,7 +1,5 @@
-import NuxtJsonld from 'nuxt-jsonld';
-
 export default defineNuxtConfig({
-  modules: [NuxtJsonld],
+  modules: ['nuxt-jsonld'],
   css: ['@/css/index.css'],
-  devtools: true,
+  compatibilityDate: '2024-12-11',
 });

packages/example/package.json

@@ -9,7 +9,7 @@
     "start": "node ./.output/server/index.mjs"
   },
   "dependencies": {
-    "nuxt": "^3.11.2"
+    "nuxt": "^3.12.4"
   },
   "devDependencies": {
     "@nuxt/devtools": "^0.8.5"

packages/example/pages/composable-options.vue

@@ -1,24 +1,21 @@
 <template>
   <div>
     <h1>Composable Options</h1>
+    <nuxt-link to="/"> Back to list </nuxt-link>
   </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  setup() {
-    useJsonld(
-      () => {
-        return {
-          '@context': 'https://schema.org',
-          '@type': 'WebSite',
-          name: 'nuxt-jsonld composable options',
-        };
-      },
-      {
-        tagPosition: 'bodyClose',
-      }
-    );
+<script lang="ts" setup>
+useJsonld(
+  () => {
+    return {
+      '@context': 'https://schema.org',
+      '@type': 'WebSite',
+      name: 'nuxt-jsonld composable options',
+    };
   },
-});
+  {
+    tagPosition: 'bodyClose',
+  }
+);
 </script>

packages/example/pages/context.vue

@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <h1>Context example</h1>
+    <div>
+      <pre>{{ JSON.stringify(dog, null, 4) }}</pre>
+      <nuxt-link to="/"> Back to list </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useDog } from '@/composables/dog';
+const { dog } = await useDog();
+useJsonld(() => ({
+  '@context': 'https://schema.org',
+  '@type': 'Thing',
+  name: dog.name,
+  description: `A ${dog.breed} dog: linked to this page`,
+}));
+</script>
+
+<style scoped>
+pre {
+  display: block;
+  margin: 10px auto;
+  max-width: 300px;
+  padding: 12px;
+  text-align: left;
+  background-color: gainsboro;
+  border-radius: 4px;
+}
+</style>

packages/example/pages/index.vue

@@ -8,43 +8,34 @@
           {{ p.name }}
         </nuxt-link>
       </li>
-      <li><nuxt-link :to="{ name: 'static' }">Static JSON</nuxt-link></li>
       <li><nuxt-link :to="{ name: 'option' }">Options API</nuxt-link></li>
       <li><nuxt-link :to="{ name: 'composable-options' }">Composable API Options</nuxt-link></li>
+      <li><nuxt-link :to="{ name: 'context' }">Context</nuxt-link></li>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
-import { WithContext, ItemList } from 'schema-dts';
+<script lang="ts" setup>
+useHead({
+  title: 'Product List',
+});
 
-export default defineComponent({
-  setup() {
-    useHead({
-      title: 'Product List',
-    });
+const products = [
+  { name: 'Foo', id: 1 },
+  { name: 'Bar', id: 2 },
+  { name: 'Baz', id: 3 },
+];
 
-    return {
-      products: [
-        { name: 'Foo', id: 1 },
-        { name: 'Bar', id: 2 },
-        { name: 'Baz', id: 3 },
-      ],
-    };
-  },
-  jsonld(): WithContext<ItemList> {
-    return {
-      '@context': 'https://schema.org',
-      '@type': 'ItemList',
-      itemListElement: this.products.map((p) => ({
-        '@type': 'ListItem',
-        position: p.id,
-        item: {
-          '@type': 'Product',
-          name: p.name,
-        },
-      })),
-    };
-  },
+useJsonld({
+  '@context': 'https://schema.org',
+  '@type': 'ItemList',
+  itemListElement: products.map((p) => ({
+    '@type': 'ListItem',
+    position: p.id,
+    item: {
+      '@type': 'Product',
+      name: p.name,
+    },
+  })),
 });
 </script>

packages/example/pages/products/[id].vue

@@ -10,39 +10,30 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  setup() {
-    const { params } = useRoute();
-    const count = ref<number>(0);
-    const updateCount = () => {
-      count.value++;
-    };
-    const product = reactive({
-      name: params.id,
-      description: `This is a sample ${params.id} product.`,
-      count,
-    });
-
-    useHead({
-      title: `Product: ${product.name}`,
-    });
+<script lang="ts" setup>
+const { params } = useRoute();
+const count = ref<number>(0);
+const updateCount = () => {
+  count.value++;
+};
+const product = reactive({
+  name: params.id,
+  description: `This is a sample ${params.id} product.`,
+  count,
+});
 
-    useJsonld(() => {
-      if (!product.count) {
-        return null;
-      }
-      return {
-        '@context': 'https://schema.org',
-        '@type': 'Product',
-        ...product,
-      };
-    });
+useHead({
+  title: `Product: ${product.name}`,
+});
 
-    return {
-      updateCount,
-      product,
-    };
-  },
+useJsonld(() => {
+  if (!product.count) {
+    return null;
+  }
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Product',
+    ...product,
+  };
 });
 </script>

packages/example/pages/static.vue

@@ -8,15 +8,11 @@
   </div>
 </template>
 
-<script lang="ts">
-export default defineComponent({
-  setup() {
-    useJsonld({
-      '@context': 'https://schema.org',
-      '@type': 'Thing',
-      name: 'Static json',
-    });
-  },
+<script lang="ts" setup>
+useJsonld({
+  '@context': 'https://schema.org',
+  '@type': 'Thing',
+  name: 'Static json',
 });
 </script>