`+title`

Environment: client, server

type Value = string | null | undefined
type Title = Value | ((pageContext) => Value)

Per-page

vike-react/vike-vue/vike-solid setting

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'
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  title: 'Some Title'
} satisfies Config

JavaScript

TypeScript

It adds <title> and <meta property="og:title"> to <head>:
<head>
  <title>Some Title</title>
  <meta property="og:title" content="Some Title">
</head>

You can set its value using a pageContext function:

// pages/some-page/+title.js
// Environment: server, client
 
export function title(pageContext) {
  return pageContext.data.product.title
}

// pages/some-page/+title.ts
// 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
}

JavaScript

TypeScript

Under the hood

On the server, upon rendering the HTML of the first page, the +title setting adds the <title> and <meta property="og:title"> tags to the <head> tag.

On the client, upon client-side page navigation, the +title setting dynamically updates these tags by mutating the DOM.

+title

Under the hood

See also

`+title`