Incorporating Popper into a Vue/Bootstrap project

Question

I'm trying to get Popover to work with my Bootstrap 5 theme that I've split into Vue components. The Bootstrap css is working fine, but I'm not sure the js is, and I can't seem to get the Popover components to work so I'm pretty sure I'm not importing or enabling something properly.

This is as close as I think I've gotten in my main.js , but this code doesn't work:

import { createApp } from 'vue'
import App from './App.vue'

import { Popover } from 'bootstrap';
import 'bootstrap/scss/bootstrap.scss';

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
popoverTriggerList.map(function (popoverTriggerEl) {
    return new Popover(popoverTriggerEl)
})

createApp(App).use(store).use(router).mount('#app')

I get why this wouldn't work with Vue, but I'm not sure what else to try.

I installed Popper via npm install @popperjs/core , and I tried importing that as well but I couldn't get that to work either.

I'm using Bootstrap 5 and Vue 3, and I'm not sure what to try next so any help would be appreciated.

Answer 1

Turns out I was having a different problem, this is sufficient

import 'bootstrap';
import 'bootstrap/scss/bootstrap.scss';