N
Nuxt•3mo ago
Merite

Html attrs lang fr doesnt work

I change html attrs in nuxt.config.ts in fr but it doesnt work. app: { head: { title: "Nuxt", htmlAttrs: { lang: 'fr', }, meta: [ { charset: "utf-8", }, { name: "viewport", content: "width=device-width, initial-scale=1", }, { name: "description", content: "Nuxt", }, ],
4 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Merite. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- If you set htmlAttrs: { lang: 'fr' } in your nuxt.config.ts under app.head, it should set the <html lang="fr"> attribute for your entire Nuxt app. This method is static and works for the whole app, but it is not reactive—meaning it won’t change dynamically if you switch languages at runtime. Here’s an example from the official documentation: 
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt',
      htmlAttrs: {
        lang: 'fr',
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'Nuxt' }
      ]
    }
  }
})
export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt',
      htmlAttrs: {
        lang: 'fr',
      },
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { name: 'description', content: 'Nuxt' }
      ]
    }
  }
})
If this is not working for you, possible reasons could be: - You are using a dynamic i18n setup and the language is being set elsewhere at runtime (for example, with useHead in your app.vue or a page component), which will override the static config. - There is another part of your code (such as a module or plugin) that is modifying the <html lang> attribute after the initial render. - You are expecting the language to change dynamically when switching locales, but static config only sets the initial value. For dynamic language switching (e.g., with i18n):
You should use the useHead composable in your app.vue to set htmlAttrs reactively based on the current locale. Example: 
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'

const { locale } = useI18n()
const lang = computed(() => locale.value)
useHead({
  htmlAttrs: {
    lang
  }
})
</script>
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'

const { locale } = useI18n()
const lang = computed(() => locale.value)
useHead({
  htmlAttrs: {
    lang
  }
})
</script>
This will update the <html lang> attribute whenever the locale changes at runtime, which is the recommended approach for multilingual apps using Nuxt and i18n modules SEO and Meta Dynamic direction. Summary:
- For a static site language, set htmlAttrs in nuxt.config.ts. - For dynamic language switching, use useHead in your app or layout component. If you are still not seeing the change, double-check for any code that might override the head configuration at runtime, and ensure you are not mixing static and dynamic approaches in a way that causes conflicts. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1036964895196987452> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Merite
MeriteOP•3mo ago
useHead({ htmlAttrs: { lang: 'fr', }, link: [ { rel: 'icon', type: 'image/io', href: '/logo.ico' } ] }) @kapa.ai @kapa.ai
kapa.ai
kapa.ai•3mo ago
Let me check the knowledge base for you again. One moment! :books: Sorry @Merite, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Did you find this page helpful?