sample
+ + + diff --git a/example/css/index.css b/example/css/index.css new file mode 100644 index 00000000..8068c05f --- /dev/null +++ b/example/css/index.css @@ -0,0 +1,39 @@ +body { + text-align: center; +} + +code { + position: relative; + display: block; + margin: 0 auto; + padding: 20px; + max-width: 500px; + background-color: #ddd; + border-radius: 4px; + text-align: left; + white-space: pre-wrap; +} + +button { + margin-top: 10px; + padding: 10px; + + border: 1px solid #ddd; + background-color: #eee; + border-radius: 4px; + cursor: pointer; +} + +a { + display: inline-block; + margin-top: 20px; +} + +li { + display:block; + margin-top: 10px; +} + +li > a { + margin: 0; +} diff --git a/example/mixins/index.ts b/example/mixins/index.ts new file mode 100644 index 00000000..bf0fddd8 --- /dev/null +++ b/example/mixins/index.ts @@ -0,0 +1,34 @@ +export const extractJsonldFromHead = ($head): string => { + const tags = $head.headTags.filter( + (t) => t.tag === 'script' && t.props.type === 'application/ld+json' + ); + const jsons = tags.map((t) => t.props.children).filter((t) => t); + if (!jsons.length) { + return; + } + return jsons.map((j) => JSON.stringify(JSON.parse(j), null, 4)).join(',\n'); +}; + +export const getJsonldForDemo = { + data() { + return { + _time: new Date(), + }; + }, + computed: { + jsonld(): string { + // trigger to update + this._time; + return extractJsonldFromHead(this.$head); + }, + }, + watch: { + $head: { + async handler() { + await nextTick(); + this._time = new Date(); + }, + immediate: true, + }, + }, +}; diff --git a/example/nuxt.config.ts b/example/nuxt.config.ts new file mode 100644 index 00000000..72094e71 --- /dev/null +++ b/example/nuxt.config.ts @@ -0,0 +1,7 @@ +import { defineNuxtConfig } from 'nuxt3'; +import nuxtJsonld from '../dist/module'; + +export default defineNuxtConfig({ + buildModules: [nuxtJsonld], + css: ['@/css/index.css'], +}); diff --git a/example/pages/index.vue b/example/pages/index.vue new file mode 100644 index 00000000..2e77d333 --- /dev/null +++ b/example/pages/index.vue @@ -0,0 +1,52 @@ + +
+
+ No JSON-LD will be shown. Click the button.
+
+
+
+
+