4
<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

Phil
  • 157,677
  • 23
  • 242
  • 245
Sir lethian
  • 43
  • 2
  • 6

1 Answers1

5

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-.

Phil
  • 157,677
  • 23
  • 242
  • 245
  • 1
    Thanks you so much! It worked. I am just confused why the id needs to be explicitly set if when I import components I just need to put the name of the component in the components section. – Sir lethian Jun 29 '20 at 03:52
  • @Sirlethian I've updated my answer with a bit of exposition. – Phil Jun 29 '20 at 03:53