JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button @click="value = !value">
    Toggle
  </button>
  <permission :allowed="value">
    <div>
      This is allowed
    </div>
    <template #no-access>
      <div>
        This is not allowed
      </div>
    </template>
  </permission>
</div>

JavaScript

Vue.createApp({
  components: {
    permission: {
      template: `
        <slot v-if="allowed" />
        <slot v-else name="no-access" />
      `,
      props: ['allowed']
    }
  },
  
  data () {
    return {
      value: true
    }
  }
}).mount('#app')