Content Template Functions Invoked on Server Render Only

[johndugan]

I am using a Content Template for my og:title content, as the example in the docs is. However, unlike the titleTemplate, which is invoked on both server and client SPA renders, Content Templates are only invoked on server renders. In my universal Nuxt application, following hydration, the content template function is not invoked when switching pages. This appears to be a bug.

[pimlie]

Please add a reproduction for this

[johndugan]

Here is the content template defined in my nuxt.config.js file.

{
    hid: 'og:title',
    property: 'og:title',
    content: '',
    template: (content) =>
        `St. Thomas The Apostle Parish Festival ${content}`.trim()
}

Here is the relevant code in my events.vue page component.

export default {
    name: 'EventsPage',
    head: function() {
        return {
            title: this.seoTitle,
            meta: [
                {
                    hid: 'description',
                    name: 'description',
                    content: this.seoDescription
                },
                {
                    hid: 'og:title',
                    property: 'og:title',
                    content: this.seoTitle
                },
                {
                    hid: 'og:description',
                    property: 'og:description',
                    content: this.seoDescription
                }
            ]
        };
    },
    components: {
        EventsNav: EventsNav,
        EventCard: EventCard
    },
    data: function() {
        return {
            seoTitle: 'Events',
            seoDescription:
                "From the Turkey Dinner to the Live Music, learn more about all of the events at this year's parish festival!",
            events: events
        };
    }
};

Below are steps to reproduce the issue of the the content template function not being called on client side page changes.

1. Visit https://www.parishfestival.org/
2. Click the "Events" link.
3. The og:title value on the events page is Events (ignores the content template).
4. Refresh the page events page to get a server render. The value is St. Thomas The Apostle Parish Festival Events (as expected).

[pimlie]

Thanks for the repro. Which vue-meta version are you using?

In v2 I cant reproduce your exact problem. But it seems that in v2 the content template is being execute more than once, so the text part of the content template is listed more then once (eg Page Title - My Site - My Site - My Site)

[johndugan]

Nuxt version 2.8.1 whose vue-meta dependency is ^1.6.0 in node_modules/@nuxt/vue-app/package.json. However, it seems they've updated vue-meta for a nuxt version that has not been released? ...see nuxt/nuxt#6153

[TheAlexLichter]

@johndugan Yes, a major update will land in Nuxt in the next minor version (v2.9)

[pimlie]

The content template issue I found is fixed in v2.2.1, if you still experience an issue make sure you have this version installed instead of Nuxt's default v1.