Здравствуйте, делаю сайт на nuxt.js
встала задача сделать модальные окна
верстка использует bootstrap5 (import scss)
чтобы подключить js от bootstrap5
нагуглил что нужно создать в папке plugins файл bootstrap.js
туда поместить import * as bootstrap from 'bootstrap/dist/js/bootstrap.esm.min'
если делать модалку или выпадающий список через data-атрбуты bs-....
все работает как надо
но я пишу свой компонент модального окна
там у меня в версте будет кнопка
и сама модалка - все как в доке bootstrap
при клике на кнопку "открыть окно" я хочу ПРОГРАММНО вызвать модалку
ну еще и навесить все колбеки и куча запросов должна произойти и тп - не суть
я не могу воспользоваться Modal api от bootstrap
у меня такой код
<script>
import {Modal} from 'bootstrap/dist/js/bootstrap.esm.min';
export default {
name: "OrderStatus",
data() {
return {}
},
methods: {
click() {
let myModal = new Modal(document.getElementById('exampleModal'))
console.log(myModal)
}
}
}
</script>
открывая страницу в браузере я вижу
render function or template not defined in component: ...
все ломает строка
import {Modal} from 'bootstrap/dist/js/bootstrap.esm.min';
но если убрать страница открывается, но не работает метод
new Modal(document.getElementById('exampleModal'))
я получаю ошибку
ReferenceError: Modal is not defined (она логичная тк нет импорта и что за MODAL неизветсно)
но почему не работает первый вариант я не могу понять и как сделать чтобы работел
у меня в package.json именно чистый bootstrap
