Guides
Template Params
Use template params to simplify your code.
Template parameters allow you to write runtime templates within your tags in a SSR-friendly and easy to use way.
They are always prefixed with a % symbol and are case-sensitive. By default, they will work with the following tags:
titletitleTemplate<meta content><link href>
useHead({
title: 'Hello %name',
templateParams: { name: 'World' }
})
// title: Hello World
Tag Opt-In
For tags using innerHTML or textContent you can opt-in to template param processing by passing the
processTemplateParams: true option.
useHead({
templateParams: { name: 'My App' },
script: [
{
innerHTML: { name: '%name' },
type: 'application/json',
processTemplateParams: true
}
]
})
// <script type="application/json>{ "name": "My App" }</script>
Tag Opt-Out
For tags that process template params by default, you can opt out of the processing by using processTemplateParams: false.
useHead({
title: 'Hello %name',
templateParams: { name: 'World' },
}, {
processTemplateParams: false,
})
// Title: Hello %name
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>
Advanced 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>