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

Get Help
#1

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?

#2

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
})
2 Likes
#3

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:

<script>
export default {
    head () {
        return {
            htmlAttrs: { lang: 'sv' }
        }
    }
}
</script>

Im assuming it mapps to the your vue answer @LinusBorg

1 Like
#4

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?

#5

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

project
|___node_modules
|___public
|___src
|
|___views/pages
      |   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