[Vue warn]: Failed to resolve directive: b-popover

Question

<template>
  <div>
    <div class="text-center my-3">
      <b-button
        v-b-popover.hover="'I am popover content!'"
        title="Popover Title"
        >Hover Me</b-button
      >
    </div>
  </div>
</template>

<script>
import { VBPopover } from "bootstrap-vue";
export default{
  directives: {
    VBPopover
  },
}
<script>

So I am not sure why I am getting this warning. If I replace v-b-popover.hover with b-popover.hover this warning goes away but the functionality is not there.

Basically trying to implement the popover directive from the docs: https://bootstrap-vue.org/docs/directives/popover

Answer 1

Directive IDs are automatically prefixed with v-. You should probably explicitly set the directive ID as indicated here

directives: {
  'b-popover': VBPopover
}

---

What was happening is that

directives: {
  VBPopover 
}

is the same as

directives: {
  VBPopover: VBPopover
}

and the name VBPopover was transformed to v-b-popover and then had the automatic prefix applied to become v-v-b-popover. So you could use that in your template but to me, it looks pretty silly.

Directives don't behave like components when it comes to their names. Directive names are always transformed to kebab-case and prefix with v-.