guides
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 WorldFor 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>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 %nameThe 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>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>