Failed to resolve directive. Why is the local directive not being set?

Question

JavaScript

<template lang="pug">
  button.btn
    slot
</template>

<script>
  export default {
    directives: {
      light: { bind () { console.log('test') } }
    }
  }
</script>

I use it like this

<template lang="pug">
  ui-button(v-light) Button
</template>

<script>
  import UiButton from '~components/ui/button.vue'

  export default {
    components: { UiButton }
  }
</script>

Answer 1

Everything is correct. It doesn't work because the directive must be specified in the second piece of the block, where you use the directive itself.
To solve the problem, either put the directive in a separate file and include it in the entry file, or use it in the button component.