`lang`

TypeScript: string | null | ((pageContext) => string | null | undefined)
Default value: 'en'
Environment: server
Cumulative: false
Global: false

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

You need to install vike-react/vike-vue/vike-solid to be able to use this setting. If you don't use vike-react/vike-vue/vike-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'
}

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
}

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

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