feat!: configurable lang attribute for useLocaleHead (#3097)

nuxt-modules · Sep 13, 2024 · a3fb89f · a3fb89f
1 parent 34b7b4c
commit a3fb89f
Show file tree

Hide file tree

Showing 15 changed files with 36 additions and 10 deletions.
diff --git a/docs/content/docs/5.v9/2.guide/19.breaking-changes-in-v9.md b/docs/content/docs/5.v9/2.guide/19.breaking-changes-in-v9.md
@@ -59,4 +59,8 @@ Some properties have changed or swapped names to better fit their functionality,
 | v8 | v9 | Notes |
 | --- | --- | --- |
 | `locales` | `domainLocales` | This also changes the environment variable key to `NUXT_PUBLIC_I18N_DOMAIN_LOCALES_{code}_DOMAIN`, see [`runtimeConfig`](/docs/options/runtime-config#domainLocales) |
-| `configLocales` | `locales` | | 
+| `configLocales` | `locales` | | 
+
+## SEO - `useLocaleHead`
+
+We have added a `addLangAttribute` property to the options parameter of `useLocaleHead` and `$localeHead`, originally this was not configurable on its own. If you want to keep the same behavior, if you were passing `addSeoAttributes`, you will also have to pass `addLangAttribute: true`. See [`useLocaleHead`](/docs/v9/api#useLocaleHead)
diff --git a/docs/content/docs/5.v9/2.guide/6.seo.md b/docs/content/docs/5.v9/2.guide/6.seo.md
@@ -79,6 +79,7 @@ const route = useRoute()
 const { t } = useI18n()
 const head = useLocaleHead({
   addDirAttribute: true,
+  addLangAttribute: true,
   identifierAttribute: 'id',
   addSeoAttributes: true
 })
@@ -245,6 +246,7 @@ useHead({
     ```vue
     <script setup>
     const i18nHead = useLocaleHead({
+      addLangAttribute: true,
       addSeoAttributes: {
         canonicalQueries: ['foo']
       }

diff --git a/docs/content/docs/5.v9/4.api/1.index.md b/docs/content/docs/5.v9/4.api/1.index.md
@@ -120,6 +120,12 @@ An object accepting the following optional fields:
 
   Adds a `dir` attribute to the HTML element. default `false`.
 
+- `addLangAttribute`
+
+  **Type**: `Boolean`
+
+  Adds a `lang` attribute to the HTML element. default `false`.
+
 - `addSeoAttributes`
 
   **Type**: `boolean | SeoAttributesOptions`

diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
@@ -3,7 +3,7 @@ import { useLocaleHead } from '#i18n'
 
 const route = useRoute()
 const { t } = useI18n()
-const head = useLocaleHead({ addDirAttribute: true, addSeoAttributes: true })
+const head = useLocaleHead({ addLangAttribute: true, addDirAttribute: true, addSeoAttributes: true })
 const title = computed(() => t('layouts.title', { title: t(route.meta.title ?? 'TBD') }))
 </script>
 

diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -99,7 +99,7 @@ definePageMeta({
     <div v-for="item in items">
       <p>{{ item }}</p>
     </div>
-    <div>v-t directive: <code v-t="{ path: 'hello', args: { name: 'v-t' } }"></code></div>
+    <!-- <div>v-t directive: <code v-t="{ path: 'hello', args: { name: 'v-t' } }"></code></div> -->
   </div>
 </template>
 

diff --git a/specs/fixtures/basic/pages/index.vue b/specs/fixtures/basic/pages/index.vue
@@ -8,6 +8,7 @@ import LangSwitcher from '../components/LangSwitcher.vue'
 const { t } = useI18n()
 const localePath = useLocalePath()
 const i18nHead = useLocaleHead({
+  addLangAttribute: true,
   addDirAttribute: true,
   identifierAttribute: 'id',
   addSeoAttributes: { canonicalQueries: ['page'] },

diff --git a/specs/fixtures/basic_usage/layouts/default.vue b/specs/fixtures/basic_usage/layouts/default.vue
@@ -7,6 +7,7 @@ const route = useRoute()
 const { t } = useI18n()
 const head = useLocaleHead({
   addDirAttribute: true,
+  addLangAttribute: true,
   identifierAttribute: 'id',
   addSeoAttributes: { canonicalQueries: ['page'] }
 })

diff --git a/specs/fixtures/basic_usage/pages/index.vue b/specs/fixtures/basic_usage/pages/index.vue
@@ -64,6 +64,7 @@ definePageMeta({
 
 const i18nHead = useLocaleHead({
   addDirAttribute: true,
+  addLangAttribute: true,
   identifierAttribute: 'id',
   addSeoAttributes: { canonicalQueries: ['page'] }
 })

diff --git a/specs/fixtures/basic_usage/pages/nuxt-context-extension.vue b/specs/fixtures/basic_usage/pages/nuxt-context-extension.vue
@@ -6,6 +6,6 @@
     <p id="switch-locale-path">{{ $nuxt.$switchLocalePath('ja') }}</p>
     <p id="locale-path">{{ $nuxt.$localePath('nuxt-context-extension', 'nl') }}</p>
     <p id="locale-route">{{ JSON.stringify($nuxt.$localeRoute()) }}</p>
-    <p id="locale-head">{{ $nuxt.$localeHead({}) }}</p>
+    <p id="locale-head">{{ $nuxt.$localeHead({ addLangAttribute: true }) }}</p>
   </div>
 </template>
diff --git a/specs/fixtures/issues/2590/app.vue b/specs/fixtures/issues/2590/app.vue
@@ -9,6 +9,7 @@ const { locale, locales, setLocale } = useI18n()
 
 const head = useLocaleHead({
   addDirAttribute: true,
+  addLangAttribute: true,
   addSeoAttributes: true
 })
 

diff --git a/specs/fixtures/lazy/pages/index.vue b/specs/fixtures/lazy/pages/index.vue
@@ -6,7 +6,7 @@ import LangSwitcher from '../components/LangSwitcher.vue'
 
 const { t } = useI18n()
 const localePath = useLocalePath()
-const i18nHead = useLocaleHead({ addSeoAttributes: { canonicalQueries: ['page'] } })
+const i18nHead = useLocaleHead({ addLangAttribute: true, addSeoAttributes: { canonicalQueries: ['page'] } })
 const { data, refresh } = useAsyncData('home', () =>
   Promise.resolve({
     aboutPath: localePath('about'),

diff --git a/specs/fixtures/restructure/pages/index.vue b/specs/fixtures/restructure/pages/index.vue
@@ -6,7 +6,7 @@ import LangSwitcher from '../components/LangSwitcher.vue'
 
 const { t } = useI18n()
 const localePath = useLocalePath()
-const i18nHead = useLocaleHead({ addSeoAttributes: { canonicalQueries: ['page'] } })
+const i18nHead = useLocaleHead({ addLangAttribute: true, addSeoAttributes: { canonicalQueries: ['page'] } })
 const { data, refresh } = useAsyncData('home', () =>
   Promise.resolve({
     aboutPath: localePath('about'),

diff --git a/src/runtime/composables/index.ts b/src/runtime/composables/index.ts
@@ -135,6 +135,7 @@ export type LocaleHeadFunction = (options: I18nHeadOptions) => ReturnType<typeof
  */
 export function useLocaleHead({
   addDirAttribute = false,
+  addLangAttribute = false,
   addSeoAttributes = false,
   identifierAttribute = 'hid'
 }: I18nHeadOptions = {}): Ref<I18nHeadMetaInfo> {
@@ -156,6 +157,7 @@ export function useLocaleHead({
   function updateMeta() {
     metaObject.value = localeHead(common, {
       addDirAttribute,
+      addLangAttribute,
       addSeoAttributes,
       identifierAttribute
     })

diff --git a/src/runtime/routing/compatibles/head.ts b/src/runtime/routing/compatibles/head.ts
@@ -23,6 +23,7 @@ export function localeHead(
   common: CommonComposableOptions,
   {
     addDirAttribute = false,
+    addLangAttribute = false,
     addSeoAttributes: seoAttributes = true,
     identifierAttribute: idAttribute = 'hid'
   }: I18nHeadOptions
@@ -36,6 +37,7 @@ export function localeHead(
     meta: []
   }
 
+  // skip if no locales or baseUrl is set
   if (unref(i18n.locales) == null || unref(i18n.baseUrl) == null) {
     return metaObject
   }
@@ -53,12 +55,12 @@ export function localeHead(
     metaObject.htmlAttrs.dir = currentDir
   }
 
+  if (addLangAttribute && currentLanguage) {
+    metaObject.htmlAttrs.lang = currentLanguage
+  }
+
   // Adding SEO Meta
   if (seoAttributes && locale && unref(i18n.locales)) {
-    if (currentLanguage) {
-      metaObject.htmlAttrs.lang = currentLanguage
-    }
-
     metaObject.link.push(
       ...getHreflangLinks(common, unref(locales) as LocaleObject[], idAttribute),
       ...getCanonicalLink(common, idAttribute, seoAttributes)

diff --git a/src/types.ts b/src/types.ts
@@ -343,6 +343,12 @@ export interface SeoAttributesOptions {
  * @public
  */
 export interface I18nHeadOptions {
+  /**
+   * Adds a `lang` attribute to the HTML element.
+   *
+   * @defaultValue false
+   */
+  addLangAttribute?: boolean
   /**
    * Adds a `dir` attribute to the HTML element.
    *