fix(locales): use correct lang (#276)

vuejs · Apr 1, 2021 · f505db9 · f505db9
1 parent fa1616a
commit f505db9
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 6 deletions.
diff --git 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 `<html lang="en-US">` 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
@@ -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,19 @@ 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) => {
+          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/router.ts b/src/client/app/router.ts
@@ -1,6 +1,7 @@
 import { reactive, inject, markRaw, nextTick, readonly } from 'vue'
 import type { Component, InjectionKey } from 'vue'
 import { PageData } from '../../../types/shared'
+import { inBrowser } from './utils'
 
 export interface Route {
   path: string
@@ -38,7 +39,6 @@ export function createRouter(
   fallbackComponent?: Component
 ): Router {
   const route = reactive(getDefaultRoute())
-  const inBrowser = typeof window !== 'undefined'
 
   function go(href: string = inBrowser ? location.href : '/') {
     // ensure correct deep link so page refresh lands on correct files.

diff --git 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
@@ -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.