Add dir rtl attribute to html tag in vuejs

Question

I created a vue project using vue create command . I want to add attribute dir="rtl" to my html tag. in Nuxt.js we do that:

<template>
    <div>Main View</div>
</template>
<script>
export default {
    name: 'app',
    head: {
        htmlAttrs: {
          lang: 'fa',
          dir: 'rtl'
        },
    }
</script>

but in Vuejs This does not work. how can i do this?

Answer 1

Try to put this configuration inside the created hook of Vue instance as follows :

new Vue({
    el:"#app",
     ...

    created(){
       let htmlEl=document.querySelector("html");
        htmlEl.setAttribute('dir','rtl');
        htmlEl.setAttribute('lang','fa');
      }
   })