Skip to content

Commit a31ddd3

Browse files
ymmoootymmooot
committed
chore: update example code
1 parent 47f159d commit a31ddd3

File tree

10 files changed

+125
-132
lines changed

10 files changed

+125
-132
lines changed

‎cypress/e2e/test.cy.js

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -16,23 +16,6 @@ describe('nuxt-jsonld', () => {
1616
});
1717
});
1818

19-
it('dumps static jsonld', () => {
20-
cy.visit('/static');
21-
cy.get('script[type="application/ld+json"]')
22-
.should('exist')
23-
.then((el) => {
24-
const json = JSON.parse(el[0].innerText);
25-
expect(json).to.have.property('@context', 'https://schema.org');
26-
expect(json).to.have.property('@type', 'Thing');
27-
expect(json).to.have.property('name', 'Static json');
28-
29-
const json2 = JSON.parse(el[1].innerText);
30-
expect(json2).to.have.property('@context', 'https://schema.org');
31-
expect(json2).to.have.property('@type', 'Thing');
32-
expect(json2).to.have.property('name', 'test');
33-
});
34-
});
35-
3619
it('replaces jsonld on page transition', () => {
3720
cy.visit('/static');
3821
cy.get('script[type="application/ld+json"]')

‎packages/example/composables/dog.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
type Dog = {
2+
breed: string;
3+
name: string;
4+
age: number;
5+
};
6+
7+
export const useDog = async () => {
8+
const app = useNuxtApp();
9+
10+
// fetch Dog data
11+
await new Promise((res) => setTimeout(res, 100));
12+
const dog: Dog = {
13+
breed: 'Golden Retriever',
14+
name: 'Buddy',
15+
age: 5,
16+
};
17+
18+
// Note: This jsonld will not disappear even after page transition.
19+
// If you want to link it to the page, use useJsonld in the component side.
20+
app.runWithContext(() => {
21+
useJsonld(() => ({
22+
'@context': 'https://schema.org',
23+
'@type': 'Thing',
24+
name: dog.name,
25+
description: `A ${dog.breed} dog: not linked to the page`,
26+
}));
27+
});
28+
29+
return {
30+
dog,
31+
};
32+
};

‎packages/example/nuxt.config.ts

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
import NuxtJsonld from 'nuxt-jsonld';
2-
31
export default defineNuxtConfig({
4-
modules: [NuxtJsonld],
2+
modules: ['nuxt-jsonld'],
53
css: ['@/css/index.css'],
6-
devtools: true,
4+
compatibilityDate: '2024-12-11',
75
});

‎packages/example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"start": "node ./.output/server/index.mjs"
1010
},
1111
"dependencies": {
12-
"nuxt": "^3.11.2"
12+
"nuxt": "^3.12.4"
1313
},
1414
"devDependencies": {
1515
"@nuxt/devtools": "^0.8.5"

‎packages/example/pages/composable-options.vue

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
11
<template>
22
<div>
33
<h1>Composable Options</h1>
4+
<nuxt-link to="/"> Back to list </nuxt-link>
45
</div>
56
</template>
67

7-
<script lang="ts">
8-
export default defineComponent({
9-
setup() {
10-
useJsonld(
11-
() => {
12-
return {
13-
'@context': 'https://schema.org',
14-
'@type': 'WebSite',
15-
name: 'nuxt-jsonld composable options',
16-
};
17-
},
18-
{
19-
tagPosition: 'bodyClose',
20-
}
21-
);
8+
<script lang="ts" setup>
9+
useJsonld(
10+
() => {
11+
return {
12+
'@context': 'https://schema.org',
13+
'@type': 'WebSite',
14+
name: 'nuxt-jsonld composable options',
15+
};
2216
},
23-
});
17+
{
18+
tagPosition: 'bodyClose',
19+
}
20+
);
2421
</script>

‎packages/example/pages/context.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<template>
2+
<div>
3+
<h1>Context example</h1>
4+
<div>
5+
<pre>{{ JSON.stringify(dog, null, 4) }}</pre>
6+
<nuxt-link to="/"> Back to list </nuxt-link>
7+
</div>
8+
</div>
9+
</template>
10+
11+
<script lang="ts" setup>
12+
import { useDog } from '@/composables/dog';
13+
const { dog } = await useDog();
14+
useJsonld(() => ({
15+
'@context': 'https://schema.org',
16+
'@type': 'Thing',
17+
name: dog.name,
18+
description: `A ${dog.breed} dog: linked to this page`,
19+
}));
20+
</script>
21+
22+
<style scoped>
23+
pre {
24+
display: block;
25+
margin: 10px auto;
26+
max-width: 300px;
27+
padding: 12px;
28+
text-align: left;
29+
background-color: gainsboro;
30+
border-radius: 4px;
31+
}
32+
</style>

‎packages/example/pages/index.vue

Lines changed: 21 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,43 +8,34 @@
88
{{ p.name }}
99
</nuxt-link>
1010
</li>
11-
<li><nuxt-link :to="{ name: 'static' }">Static JSON</nuxt-link></li>
1211
<li><nuxt-link :to="{ name: 'option' }">Options API</nuxt-link></li>
1312
<li><nuxt-link :to="{ name: 'composable-options' }">Composable API Options</nuxt-link></li>
13+
<li><nuxt-link :to="{ name: 'context' }">Context</nuxt-link></li>
1414
</ul>
1515
</div>
1616
</template>
1717

18-
<script lang="ts">
19-
import { WithContext, ItemList } from 'schema-dts';
18+
<script lang="ts" setup>
19+
useHead({
20+
title: 'Product List',
21+
});
2022
21-
export default defineComponent({
22-
setup() {
23-
useHead({
24-
title: 'Product List',
25-
});
23+
const products = [
24+
{ name: 'Foo', id: 1 },
25+
{ name: 'Bar', id: 2 },
26+
{ name: 'Baz', id: 3 },
27+
];
2628
27-
return {
28-
products: [
29-
{ name: 'Foo', id: 1 },
30-
{ name: 'Bar', id: 2 },
31-
{ name: 'Baz', id: 3 },
32-
],
33-
};
34-
},
35-
jsonld(): WithContext<ItemList> {
36-
return {
37-
'@context': 'https://schema.org',
38-
'@type': 'ItemList',
39-
itemListElement: this.products.map((p) => ({
40-
'@type': 'ListItem',
41-
position: p.id,
42-
item: {
43-
'@type': 'Product',
44-
name: p.name,
45-
},
46-
})),
47-
};
48-
},
29+
useJsonld({
30+
'@context': 'https://schema.org',
31+
'@type': 'ItemList',
32+
itemListElement: products.map((p) => ({
33+
'@type': 'ListItem',
34+
position: p.id,
35+
item: {
36+
'@type': 'Product',
37+
name: p.name,
38+
},
39+
})),
4940
});
5041
</script>

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

Lines changed: 23 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -10,39 +10,30 @@
1010
</div>
1111
</template>
1212

13-
<script lang="ts">
14-
export default defineComponent({
15-
setup() {
16-
const { params } = useRoute();
17-
const count = ref<number>(0);
18-
const updateCount = () => {
19-
count.value++;
20-
};
21-
const product = reactive({
22-
name: params.id,
23-
description: `This is a sample ${params.id} product.`,
24-
count,
25-
});
26-
27-
useHead({
28-
title: `Product: ${product.name}`,
29-
});
13+
<script lang="ts" setup>
14+
const { params } = useRoute();
15+
const count = ref<number>(0);
16+
const updateCount = () => {
17+
count.value++;
18+
};
19+
const product = reactive({
20+
name: params.id,
21+
description: `This is a sample ${params.id} product.`,
22+
count,
23+
});
3024
31-
useJsonld(() => {
32-
if (!product.count) {
33-
return null;
34-
}
35-
return {
36-
'@context': 'https://schema.org',
37-
'@type': 'Product',
38-
...product,
39-
};
40-
});
25+
useHead({
26+
title: `Product: ${product.name}`,
27+
});
4128
42-
return {
43-
updateCount,
44-
product,
45-
};
46-
},
29+
useJsonld(() => {
30+
if (!product.count) {
31+
return null;
32+
}
33+
return {
34+
'@context': 'https://schema.org',
35+
'@type': 'Product',
36+
...product,
37+
};
4738
});
4839
</script>

‎packages/example/pages/static.vue

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎yarn.lock

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7553,7 +7553,7 @@ nuxi@^3.15.0:
75537553
resolved "https://registry.yarnpkg.com/nuxi/-/nuxi-3.15.0.tgz#ed54923ca46727c6e7df10495143db340d9791c9"
75547554
integrity sha512-ZVu45nuDrdb7nzKW2kLGY/N1vvFYLLbUVX6gUYw4BApKGGu4+GktTR5o48dGVgMYX9A8chaugl7TL9ZYmwC9Mg==
75557555

7556-
nuxt@^3.11.2:
7556+
nuxt@^3.11.2, nuxt@^3.12.4:
75577557
version "3.14.1592"
75587558
resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-3.14.1592.tgz#0f94132b7e0ffe9087b37392f295e2c7d5d05ee3"
75597559
integrity sha512-roWAQH4Mb6WY72cNos+YVw0DgTCNAhNygiAMCedM7hbX6ESTR2n3VH7tU0yIWDPe/hfFdii4M4wWTTNHOtS44g==

0 commit comments

Comments
 (0)