Vue

by WILLIAM CORREA

HTML

<div
  id="app"
  v-cloak
>
  <div v-can="'categeory.read'">
    Pode
  </div>
  <div v-can="'categeory.create'">
    Não Pode
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

[v-cloak] {
  display:none;
}

Vue

const permissions = [
  'categeory.read'
]
Vue.directive('can', {
  inserted(el, binding, vnode, old) {
    if (permissions.includes(binding.value)) {
    	return
    }
    vnode.elm.parentElement.removeChild(vnode.elm)
  }
})

new Vue({
  el: "#app"
})