Failed to resolve directive. Почему не устанавливается локальная директива?

Question

[thorii]

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

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

Использую так

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

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

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

Answer 1

[lavezzi1]

Все правильно. Не работает потому что директива должна быть задана во втором куске блока, где и используете саму директиву.

Для решения проблемы, либо выносите директиву в отдельный файл и подключайте в entry файле, либо используйте ее в компоненте кнопки.