diff --git a/docs/config/basics.md b/docs/config/basics.md index d0d6719d..9e95b703 100644 --- a/docs/config/basics.md +++ b/docs/config/basics.md @@ -22,8 +22,6 @@ module.exports = { The `lang` attribute for the site. This will render as a `` tag in the page HTML. -Note that the `lang` attribute will only be added when building the site via `vitepress build`. You will not see this rendered during `vitepress dev`. - ```js module.exports = { lang: 'en-US' diff --git a/src/client/app/index.ts b/src/client/app/index.ts index 5eb688e3..2a05afbd 100644 --- a/src/client/app/index.ts +++ b/src/client/app/index.ts @@ -1,5 +1,12 @@ import 'vite/dynamic-import-polyfill' -import { App, createApp as createClientApp, createSSRApp, h } from 'vue' +import { + App, + createApp as createClientApp, + createSSRApp, + h, + onMounted, + watch +} from 'vue' import { inBrowser, pathToFile } from './utils' import { Router, RouterSymbol, createRouter } from './router' import { mixinGlobalComputed, mixinGlobalComponents } from './mixin' @@ -15,6 +22,20 @@ const NotFound = Theme.NotFound || (() => '404 Not Found') const VitePressApp = { name: 'VitePressApp', setup() { + const siteData = useSiteDataByRoute() + + // change the language on the HTML element based on the current lang + onMounted(() => { + watch( + () => siteData.value.lang, + (lang: string) => { + console.log('lang', lang) + document.documentElement.lang = lang + }, + { immediate: true } + ) + }) + if (import.meta.env.PROD) { // in prod mode, enable intersectionObserver based pre-fetch usePrefetch() diff --git a/src/client/app/utils.ts b/src/client/app/utils.ts index 26383bf5..dea88b64 100644 --- a/src/client/app/utils.ts +++ b/src/client/app/utils.ts @@ -1,4 +1,6 @@ -export const inBrowser = typeof window !== 'undefined' +import { inBrowser } from '/@shared/config' + +export { inBrowser } /** * Join two paths by resolving the slash collision. diff --git a/src/shared/config.ts b/src/shared/config.ts index 378829e1..281ce539 100644 --- a/src/shared/config.ts +++ b/src/shared/config.ts @@ -1,6 +1,6 @@ import { SiteData } from '/@types/shared' -const inBrowser = typeof window !== 'undefined' +export const inBrowser = typeof window !== 'undefined' function findMatchRoot(route: string, roots: string[]) { // first match to the routes with the most deep level.