fix(InferSeoMetaPlugin): template param replacement broken

Fixes harlan-zw/nuxt-seo#416

Author: harlan-zw

packages/unhead/src/plugins/inferSeoMetaPlugin.ts

@@ -46,22 +46,23 @@ export function InferSeoMetaPlugin(options: InferSeoMetaPluginOptions = {}) {
       key: 'infer-seo-meta',
       hooks: {
         'tags:beforeResolve': ({ tagMap }) => {
-          let title = head._title || ''
-          const titleTemplate = head._titleTemplate
+          let title = head._titleTemplate || head._title
           // check if the current title is %infer
           const ogTitle = tagMap.get('meta:og:title')
           if (typeof ogTitle?.props['data-infer'] !== 'undefined') {
-            if (titleTemplate) {
-              // @ts-expect-error broken types
-              title = typeof titleTemplate === 'function' ? titleTemplate(title) : titleTemplate.replace('%s', title)
+            if (typeof title === 'function') {
+              // @ts-expect-error untyped
+              title = title(head._title)
             }
             ogTitle.props!.content = options.ogTitle ? options.ogTitle(title) : title || ''
+            ogTitle.processTemplateParams = true
           }
 
           const description = tagMap.get('meta:description')?.props?.content
           const ogDescription = tagMap.get('meta:og:description')
           if (typeof ogDescription?.props['data-infer'] !== 'undefined') {
             ogDescription.props!.content = options.ogDescription ? options.ogDescription(description) : description || ''
+            ogDescription.processTemplateParams = true
           }
         },
       },

packages/unhead/test/unit/plugins/infer-seo-meta.test.ts

@@ -189,7 +189,10 @@ describe('inferSeoMetaPlugin', () => {
   it('handles title template', async () => {
     const head = createHead({
       disableDefaults: true,
-      plugins: [InferSeoMetaPlugin()],
+      plugins: [
+        InferSeoMetaPlugin(),
+        TemplateParamsPlugin,
+      ],
     })
     head.push({
       title: 'Title',
@@ -299,4 +302,33 @@ describe('inferSeoMetaPlugin', () => {
     expect(result.headTags).toContain('<meta name="description" content="Description.">')
     expect(result.headTags).toContain('<meta name="theme-color" content="#007ed4">')
   })
+  it('template params Nuxt SEO #416', async () => {
+    const head = createHead({
+      disableDefaults: true,
+      plugins: [
+        InferSeoMetaPlugin(),
+        TemplateParamsPlugin,
+      ],
+    })
+    head.push({
+      titleTemplate: '%siteName %separator %s',
+      templateParams: {
+        separator: '–',
+        siteName: 'Nuxt SEO',
+      },
+    })
+
+    // Simulate the app.vue setup with a function titleTemplate
+    head.push({
+      title: 'Hello World',
+    })
+
+    const result = await renderSSRHead(head)
+
+    expect(result.headTags).toMatchInlineSnapshot(`
+      "<title>Nuxt SEO – Hello World</title>
+      <meta name="twitter:card" content="summary_large_image">
+      <meta property="og:title" data-infer="" content="Nuxt SEO – Hello World">"
+    `)
+  })
 })