chore: update example

Author: ymmooot

packages/example/composables/dog.ts

@@ -1,5 +1,3 @@
-import type { NuxtApp } from '#app';
-
 type Dog = {
   breed: string;
   name: string;
@@ -17,18 +15,18 @@ export const useDog = async () => {
     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`,
+      description: `A ${dog.breed} dog: not linked to the page`,
     }));
   });
 
   return {
-    data: {
-      dog,
-    },
+    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/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

@@ -2,15 +2,21 @@
   <div>
     <h1>Context example</h1>
     <div>
-      <pre>{{ JSON.stringify(data.dog, null, 4) }}</pre>
+      <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 { data } = await useDog();
+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>

packages/example/pages/index.vue

@@ -8,44 +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 type { 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>