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

<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/docs/directives/popover

• javascript
• vue.js
• vue-directives

1 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 bee v-v-b-popover. So you could use that in your template but to me, it looks pretty silly.

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