Template Params

Template params act as a way of providing runtime data to your title, titleTemplate, or meta.content tags.

They accept an object where the values must be strings or nested objects (or computed strings / objects for Vue).

Example

useHead({
  templateParams: {
    site: {
      name: 'My Site',
      url: 'https://example.com',
    },
    separator: '-',
  },
  title: 'My Page',
  titleTemplate: '%s %separator %site.name',
  meta: [
    {
      name: 'description',
      content: 'Welcome to %site.name.',
    },
    {
      property: 'og:site_name',
      content: '%site.name',
    },
    {
      property: 'og:url',
      content: '%site.url/my-page',
    },
  ],
})

The following HTML will be generated:

<head>
<title>My Page - My Site</title>
<meta name="description" content="Welcome to My Site.">
<meta property="og:site_name" content="My Site">
<meta property="og:url" content="https://example.com/my-page">
</head>

Separator

The separator is a special param for templating. When the template is substituted, the separator will be trimmed from the start and end of the string, in the case where some params are empty.

useHead({
  templateParams: {
    site: {
      name: 'My Site',
    },
    separator: '-',
    subPage: null // empty
  },
  title: 'My Page',
  titleTemplate: '%s %separator %subPage% %separator %site.name',
})
<title>My Page - My Site</title>
Edit this page on GitHub
Table of Contents