lang

Type: string | null | ((pageContext) => string | null | undefined)
Default value: 'en'.
Environment: server.
Implemented by: UI framework Vike extension vike-react/vike-vue/vike-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.

See also