`title`

Type: string | null | ((pageContext) => string | null | undefined)
Kind: overridable.
Environment: server, client.

Implemented by: vike-react/vike-vue/vike-solid.

You need vike-react/vike-vue/vike-solid to be able to use this setting.

See Guides > <head> tags for a general introduction about <head> tags.

The title setting sets the page's title.

// pages/+config.js
 
export default {
  title: 'Some Title'
}

It adds the following tags to <head>:

<head>
  <title>Some Title</title>
  <meta property="og:title" content="Some Title">
</head>

As shown at:

Guides > <head> tags > Page specific you can override it.
Guides > <head> tags > Data you can set it based on fetched data.

TypeScript

// pages/some-page/+title.js
// Environment: server, client
 
import type { Data } from './+data'
import type { PageContext } from 'vike/types'
 
export function title(pageContext: PageContext<Data>) {
  return pageContext.data.product.title
}

Under the hood

On the server-side, upon rendering the HTML of the first page, the title setting adds the <title> tag to the <head> tag.

On the client-side, upon client-side page navigation, the title setting dynamically updates the page's title by mutating the DOM with document.title = 'Some Title'.

title

TypeScript

Under the hood

See also

`title`