Vue SSR not picking up unhead metadata

Question

I have been trying to implement SSR in Vue 3 with very good results. However, I have hit a complete roadblock with how to add SEO Tags. I have been using unhead for this purpose and it seems to load the title and tags fine once the page is loaded. However, the server does not seem to loading the tags. I am not sure where I am going wrong. So, please do help.

// main.ts

export const createApp = () => {
    const app = createSSRApp(App)
    const pinia = createPinia()
    const head = createHead()

    app.use(router)
    app.use(pinia)
    app.use(head as any)

    return {
       app,
       pinia,
       router,
       head
    }

}

// entry-server.ts

export async function render(url:string, manifest:any):Promise {
    const { app, router, head } = createApp();

    await router.push(url);
    await router.isReady();
    await head.resolveTags()

    const payload = await renderSSRHead(head as any)

    const ctx:any = {};
    const html = await renderToString(app, ctx);

    const preloadLinks = renderPreloadLinks(ctx.modules, manifest);
    return [html, preloadLinks, payload];
}

EDIT:

Turns out, the issue was not with the SSR setup but I had not used useHead or useSEO in App.vue

Once I did, it started working fine.

score 0 · Answer 1 · answered Jul 23 '23 at 10:34

In your entry-server.ts file, ensure you are calling head.resolveTags() after router.isReady(). This is necessary because only then all your components and their respective useHead() tags are fully resolved.

So, your new code should be like this:

// entry-server.ts

export async function render(url:string, manifest:any):Promise {
    const { app, router, head } = createApp();

    await router.push(url);
    await router.isReady();

    // Resolve head tags after router is ready
    await head.resolveTags()

    const html = await renderToString(app, {});
    const payload = await renderSSRHead(head as any)
    const preloadLinks = renderPreloadLinks({}, manifest);

    return [html, preloadLinks, payload];
}

Lastly, verify your components' head tags are correctly defined using Unhead's useHead within their setup functions.

Hope this helps!

Thank you for the help! Turns out, my mistake was that I had not used useHead or useSEO in App.vue Not sure if it is common knowledge, but I had it only in view components. — , Jul 25 '23 at 14:36

Vue SSR not picking up unhead metadata

1 Answers1