`lang`

Environment: server

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

Default: 'en'

Local

Provided by: vike-react/vike-vue/vike-solid

You need vike-react/vike-vue/vike-solid to be able to use this setting. If you don't use vike-{react,vue,solid} then see Without vike-{react,vue,solid}.

You can set the value of the <html lang> attribute by using Vike's lang setting.

// /pages/+config.js
 
export default {
  lang: 'fr'
}

// /pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  lang: 'fr'
} satisfies Config

You can also dynamically set the value of lang. For example, if you want to internationalize your app:

// /pages/+lang.js
 
export default (pageContext) => {
  return pageContext.locale
}

// /pages/+lang.ts
 
import type { PageContextServer } from 'vike/types'
 
export default (pageContext: PageContextServer) => {
  return pageContext.locale
}

The pageContext.locale value is usually set by your onBeforeRoute() hook, see Guides > Internationalization (i18n).

Without `vike-{react,vue,solid}`

The lang setting is implemented by the UI framework Vike extension vike-react/vike-vue/vike-solid. If you don't use such extension, then you usually don't need to implement a setting like lang as you can directly set the value of the <html lang> attribute at your onRenderHtml() hook.

// /renderer/+onRenderHtml.js
 
import { escapeInject } from 'vike/server'
 
export function onRenderHtml(pageContext) {
  const lang = 'fr'
  return escapeInject`<!DOCTYPE html>
    <html lang=${lang}>
      ...
    </html>`
}

// /renderer/+onRenderHtml.ts
 
import type { PageContextServer } from 'vike/types'
import { escapeInject } from 'vike/server'
 
export function onRenderHtml(pageContext: PageContextServer) {
  const lang = "fr"
  return escapeInject`<!DOCTYPE html>
    <html lang=${lang}>
      ...
    </html>`
}

That said, you can also implement and replicate the lang setting described in this page, see the source code of vike-react/vike-vue/vike-solid.

lang

Without vike-{react,vue,solid}

See also

`lang`

Without `vike-{react,vue,solid}`