[Vuejs]-Vue.js, how to load directive before page is loaded

The way you have created this I think means that this will always happen – your directive is removing the HTML only after it has been created. For the element not to have been created in the first place you need instead to use a v-if or similar. I can see two ways to fix this, one a work-around as a minimal change to what you have, the other I would consider a better solution (but it is of course up to you).

To work around your problem have all of your buttons with a style of display:none and then in your directive either delete the elemet or clear the style (or change the class – however you choose to implement it). That way at least the button won’t appear.

However, a better fix, I think, is to create your own component with a userRole property. That component will then do the check you have above (for example through a computed property) and then show or hide the component as required.

EDIT

I ran a quick fiddle to test the principals behind what you were doing – just changing the hook from update to inserted may fix it. Obviously your code will be more complex so your milage may vary ;).

I would focus on Vue instance – https://v2.vuejs.org/v2/guide/instance.html – I think you might use beforeCreate.

Also another idea as Euan Smith wrote, use v-if and put in your data true/false information of loading rights (set it false, and when the role is known set it to true).