Settings lang="sv" to the <html>-tag?

Hard subject to google, but I’m also not able to find anything useful in the documentation to either vuejs or nuxt (I’m running a multi page nuxt site).

What I want to do is set the lang attribute to the html tag, but is it possible to edit either the html or body tag?

in the component that you want to do that from (probably your main Vue instance?), do that with plain Javascript in the created() hook:

new Vue({
  created() {
    const html = document.documentElement // returns the html tag
    html.setAttribute('lang', 'sv')
  // other options

Thanks for the help Linus, how you structure things in nuxt is a bit different from vue :slight_smile: but I found a way to do it:

For anyone looking for a nuxt answer you set this in the layout files like this:

export default {
    head () {
        return {
            htmlAttrs: { lang: 'sv' }

Im assuming it mapps to the your vue answer @LinusBorg

1 Like

Sorry to bother. Though I solved this problem with your solution here, is there any relative configuration in maybe vue.config.js to set this attribute?

The lang attribute can be set in the App.vue, the root component, of your app using the created Hook.

      |   App.vue

In the created Hook (create one if you don’t have there in App.vue) do the following.

  created() {
		// Setting Language in the HTML document
		document.documentElement.setAttribute('lang', '<language_code>')

Replace the <language_code> with your language locale code like sv in the asked question.

1 Like