search

vueuse / schema-org

🔎 Quick and easy Schema.org graphs for Vue. Powered by Unhead.
https://unhead-schema-org.harlanzw.com
377 stars 21 forks source link

No schema generated in a Vue SPA without Vue Router #44

Open innocenzi opened 1 year ago

innocenzi commented 1 year ago

Hey, so I'm not sure the fact that we don't use Vue Router is the actual problem, but we're trying to implement schema-org in a Hybridly app (a server-driven SPA), but the schema never gets generated.

@vueuse/head works perfectly fine, and my understanding is that schema-org uses it under the hood, so I'm wondering if this has something to do with the router.

This is how we register the plugin:

const url = useProperty('security.url')
const head = createHead({
    titleTemplate: (title) => title ? `myLittlePlane - ${title}` : 'myLittlePlane',
})

head.use(SchemaOrgUnheadPlugin({
    title: 'myLittlePlane - European aircraft broker',
    description: 'Bringing reliable information, we represent clients looking to value, buy, sell, or trade their business jets.',
    host: import.meta.env.APP_URL,
    image: '/favicon/image.png',
},
() => ({
    url: url.value,
    path: new URL(url.value).pathname,
})))

The <SchemaOrgDebug /> is totally empty, nothing in it. The tag is nowhere to be seen, neither in <head> or at the bottom of <body>. Any idea?

Notes:

innocenzi commented 1 year ago

It seems like if I use useHead directly, I do get my graph generated:

useHead({
    script: [
        {
            type: 'application/ld+json',
            id: 'schema-org-graph',
            key: 'schema-org-graph',
            // @ts-expect-error runtime type
            nodes: [
                defineOrganization({
                    name: seo.sitename,
                    logo: seo.logo,
                    address: seo.address,
                }),
                defineWebSite({
                    name: seo.sitename,
                    description: seo.description,
                    inLanguage: seo.language,
                    url: import.meta.env.APP_URL,
                }),
            ],
        },
    ],
}, { mode: 'all' })