How to make modal window on nuxt.js via bootstrap api?

Question

Vue.js

Hello, I’m making a site on nuxt.js , the
task was to make modal windows
layout using bootstrap5 (import scss)

to connect js from bootstrap5
googled that you need to create a bootstrap.js file in the plugins folder
and place import * as bootstrap from 'bootstrap/dist/js/ bootstrap.esm.min'

if you make a modal or a drop-down list through data-attributes bs-....
everything works as it should,

but I write my own modal window component

there I will have a button in a verst
and the modal itself - everything is like in the bootstrap dock

with click on the "open window" button, I want to programmatically call a modal
and also hang all the callbacks and a bunch of requests should happen, etc. - not the point

I can't use Modal api from bootstrap

I have this code

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

opening the page in the browser, I see
render function or template not defined in component: ...

everything breaks the line
import {Modal} from 'bootstrap/dist/js/bootstrap.esm.min';

but if the page is removed, but the method
new Modal(document.getElementById('exampleModal')) does not work,
I get the error
ReferenceError: Modal is not defined (it is logical because there is no import and what MODAL is unknown)
but why the first option does not work I can’t figure out how to make it work

in my package.json just pure bootstrap

Answer 1

document.getElementById('exampleModal') I suspect this is the problem. I so understand you use an element from virtual DOM. Attach a ref to this element and pass it to an instance of the class.