htmlAttrs.lang not working

Hi, I have a weird bug, not sure if it’s worth opening a GitHub issue for it.

In my

nuxt.config.ts

nuxt.config.ts

, I’m setting the HTML

lang="fr"

lang="fr"

attribute like this:

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  future: {
    compatibilityVersion: 4,
  },

  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      htmlAttrs: { dir: 'ltr', lang: 'fr' },
      [...]
    },
  },

  modules: [
    '@nuxt/ui',
    'nuxt-auth-utils',
    '@vueuse/nuxt',
    '@nuxtjs/seo',
    '@nuxt/image',
    '@nuxtjs/critters',
    '@nuxt/scripts',
  ],

  [...]
})

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  future: {
    compatibilityVersion: 4,
  },

  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      htmlAttrs: { dir: 'ltr', lang: 'fr' },
      [...]
    },
  },

  modules: [
    '@nuxt/ui',
    'nuxt-auth-utils',
    '@vueuse/nuxt',
    '@nuxtjs/seo',
    '@nuxt/image',
    '@nuxtjs/critters',
    '@nuxt/scripts',
  ],

  [...]
})

Yet, at build time, the DOM has

lang="en"

lang="en"

.

I even tried using

useHead({ htmlAttrs: { lang: 'fr' } })

useHead({ htmlAttrs: { lang: 'fr' } })

in my

./app/app.vue

./app/app.vue

, but I still get

lang="en"

lang="en"

in the DOM.

Could it be that Nuxt uses an environment variable to determine the DOM language?

What’s really strange is that I have another site that builds correctly and respects the language setting.

Maybe the issue is caused by a new version of Nuxt?

{
  "dependencies": {
    "@floating-ui/vue": "^1.1.6",
    "@internationalized/date": "^3.7.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/scripts": "^0.11.7",
    "@nuxt/ui": "^3.0.1",
    "@nuxtjs/critters": "^0.9.0",
    "@nuxtjs/seo": "^3.0.3",
    "@vueuse/core": "^13.2.0",
    "@vueuse/nuxt": "^13.2.0",
    "chart.js": "^4.4.9",
    "chartjs-plugin-datalabels": "^2.2.0",
    "ipx": "3.0.1",
    "nuxt": "~3.17.4",
    "nuxt-auth-utils": "^0.5.17",
    "nuxt-seo-utils": "^7.0.12",
    "quill": "^2.0.3",
    "quill-auto-detect-url": "1.0.0-alpha.1",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.16",
    "vite-plugin-vue-tracer": "0.1.2",
    "vue": "^3.5.13"
  }
}

{
  "dependencies": {
    "@floating-ui/vue": "^1.1.6",
    "@internationalized/date": "^3.7.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/scripts": "^0.11.7",
    "@nuxt/ui": "^3.0.1",
    "@nuxtjs/critters": "^0.9.0",
    "@nuxtjs/seo": "^3.0.3",
    "@vueuse/core": "^13.2.0",
    "@vueuse/nuxt": "^13.2.0",
    "chart.js": "^4.4.9",
    "chartjs-plugin-datalabels": "^2.2.0",
    "ipx": "3.0.1",
    "nuxt": "~3.17.4",
    "nuxt-auth-utils": "^0.5.17",
    "nuxt-seo-utils": "^7.0.12",
    "quill": "^2.0.3",
    "quill-auto-detect-url": "1.0.0-alpha.1",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.16",
    "vite-plugin-vue-tracer": "0.1.2",
    "vue": "^3.5.13"
  }
}

htmlAttrs.lang not working

Hi, I have a weird bug, not sure if it’s worth opening a GitHub issue for it.

In my

nuxt.config.ts

nuxt.config.ts

, I’m setting the HTML

lang="fr"

lang="fr"

attribute like this:

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  future: {
    compatibilityVersion: 4,
  },

  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      htmlAttrs: { dir: 'ltr', lang: 'fr' },
      [...]
    },
  },

  modules: [
    '@nuxt/ui',
    'nuxt-auth-utils',
    '@vueuse/nuxt',
    '@nuxtjs/seo',
    '@nuxt/image',
    '@nuxtjs/critters',
    '@nuxt/scripts',
  ],

  [...]
})

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  future: {
    compatibilityVersion: 4,
  },

  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
      htmlAttrs: { dir: 'ltr', lang: 'fr' },
      [...]
    },
  },

  modules: [
    '@nuxt/ui',
    'nuxt-auth-utils',
    '@vueuse/nuxt',
    '@nuxtjs/seo',
    '@nuxt/image',
    '@nuxtjs/critters',
    '@nuxt/scripts',
  ],

  [...]
})

Yet, at build time, the DOM has

lang="en"

lang="en"

.

I even tried using

useHead({ htmlAttrs: { lang: 'fr' } })

useHead({ htmlAttrs: { lang: 'fr' } })

in my

./app/app.vue

./app/app.vue

, but I still get

lang="en"

lang="en"

{
  "dependencies": {
    "@floating-ui/vue": "^1.1.6",
    "@internationalized/date": "^3.7.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/scripts": "^0.11.7",
    "@nuxt/ui": "^3.0.1",
    "@nuxtjs/critters": "^0.9.0",
    "@nuxtjs/seo": "^3.0.3",
    "@vueuse/core": "^13.2.0",
    "@vueuse/nuxt": "^13.2.0",
    "chart.js": "^4.4.9",
    "chartjs-plugin-datalabels": "^2.2.0",
    "ipx": "3.0.1",
    "nuxt": "~3.17.4",
    "nuxt-auth-utils": "^0.5.17",
    "nuxt-seo-utils": "^7.0.12",
    "quill": "^2.0.3",
    "quill-auto-detect-url": "1.0.0-alpha.1",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.16",
    "vite-plugin-vue-tracer": "0.1.2",
    "vue": "^3.5.13"
  }
}

{
  "dependencies": {
    "@floating-ui/vue": "^1.1.6",
    "@internationalized/date": "^3.7.0",
    "@nuxt/image": "1.10.0",
    "@nuxt/scripts": "^0.11.7",
    "@nuxt/ui": "^3.0.1",
    "@nuxtjs/critters": "^0.9.0",
    "@nuxtjs/seo": "^3.0.3",
    "@vueuse/core": "^13.2.0",
    "@vueuse/nuxt": "^13.2.0",
    "chart.js": "^4.4.9",
    "chartjs-plugin-datalabels": "^2.2.0",
    "ipx": "3.0.1",
    "nuxt": "~3.17.4",
    "nuxt-auth-utils": "^0.5.17",
    "nuxt-seo-utils": "^7.0.12",
    "quill": "^2.0.3",
    "quill-auto-detect-url": "1.0.0-alpha.1",
    "tailwind-merge": "^3.0.2",
    "tailwindcss": "^4.0.16",
    "vite-plugin-vue-tracer": "0.1.2",
    "vue": "^3.5.13"
  }
}

htmlAttrs.lang not working

htmlAttrs.lang not working

Similar Threads

Similar Threads

Similar Threads