title: Create a custom conditional render directive in Vue.js
body: <p>I'm trying to work out how I can make a custom Vue conditional directive. I know I could just write a global method and call it inside a v-if, but for code clarity I'd like to have a custom directive.</p>
  
  <p>The aim is to decorate an element with the directive and pass a Guid to it (it's all for handling conditional rednering depending on user permissions):
  <code>v-permission="'4ECE1FD4-4019-4CA2-AB9E-0A555CCBDB5B'"</code></p>
  
  <p>At the moment, I just add  <code>display: none</code> to the element in the directive's <code>bind</code> method and this is fine for hiding the content but it would be better performance wise if the element was never rendered.</p>
  
  <p>Any ideas how I can achieve this?</p>
  
  <p>Current directive code is as follows:
  </p>
  
  <pre><code>import Vue from 'vue'
  
  Vue.directive('permission', {
    bind: function (el, binding, vnode) {
      if (binding.value) {
        let hasPermission = 
  vnode.context.$store.getters.hasApiPermission(binding.value)
        if (!hasPermission) {
          el.style.display = 'none'
        }
      } else {
        console.error('You must specify a permission ID')
      }
    }
  })
  </code></pre>