Defining page direction dynamically - Vue Js

Question

I'm trying to set the page direction (RTL or LTR) dynamically on my Vue js project.

However, if I try to set dynamically, e.g using a variable called direction, nothing happens (it keeps the standard value, LTR value):

  
    
     Page Title
    
    
      
        Write this text right-to-left!          
      
   
   
   
 

var test=new Vue({
el: '#example-1',
data: {
    counter: 0,       
    direction:'rtl'
  },
  methods: {
    greet: function (event) {
        this.direction='rtl';
    }
}
});

Shows the following error, [Vue warn]: Do not mount Vue to or - mount to normal elements instead. How can I do that?

user_5093961 · Answer

Try mounting in the div instead of the html element. And use CSS direction

  
    
     Page Title
    
    
      
        Write this text right-to-left!

Admin · Answer

Like @Steven Spungin pointed out, you should mount your Vue app in div instead of the html element.

Then you can handle your page direction dynamically in a function like this :

...
methods:{
    ...
    setPageDirection(dir){
        document.body.style.direction = dir
    }
    ...
}
...

You can find more ways to set page direction on this thread : Direction rtl to all page

Defining page direction dynamically - Vue Js

2 Answers