Title Templates

The default title template for your site is equivalent to:

useHead({
  titleTemplate: '%s %separator %siteName'
})

Template Params

These tokens that are prefixed with % are making use of Template Params.

The following tokens are available out-of-the-box:

• %siteName - The name of your site.
• %siteUrl - The canonical URL of your site.
• %s or %pageTitle - The page title, without the template
• %separator - Special token used to seperate parts of your title. These have special behavior in that they will be logically removed when it makes sense. See Seperator for more details.

These tokens are available not only for the title, but also:

• meta: [ { content: '%site.url/my-url.png' } ]
• script: [ { type: 'application/json', content: { title: '%s' } } ]

Changing Template Params And Separator

To modify the template params you can provide them through nuxt.config or useHead.

For example, if you'd like to change the separator (the default is |), you can provide the runtime config.

export default defineNuxtConfig({
  app: {
    head: {
      templateParams: {
        separator: '-'
        // other common separators: '·', '—', '•'
      }
    }
  },
})

Changing Title Template

If you need to modify the default titleTemplate, it's recommended to do it through nuxt.config.

export default defineNuxtConfig({
  app: {
    head: {
      titleTemplate: '%s %separator %siteName'
    }
  }
})

Likewise if you'd like to use a different template for a subset of pages, you can use useHead.

<script lang="ts" setup>
useHead({
  templateParams: {
    blogCategory: 'Tutorials'
  },
  title: 'How To Use Titles',
  titleTemplate: '%s %separator %blogCategory %separator %siteName'
})
// output: How To Use Titles | Tutorials | MyApp
</script>