bootstrap 5 modal not working vue js 3

To use Bootstrap 5 modal in Vue.js 3, you can follow the steps below:

1. Install Bootstrap 5 and its dependencies using a package manager like npm or yarn:

npm install bootstrap@next @popperjs/core

1. Import Bootstrap CSS and JavaScript in your main.js or App.vue file:

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'

1. Create a component for your modal. For example, let's call it ModalComponent.vue:

<template>
  <div>
    <!-- Button to trigger the modal -->
    <button type="button" class="btn btn-primary" @click="toggleModal">Open Modal</button>

    <!-- Modal -->
    <div class="modal" tabindex="-1" role="dialog" v-show="showModal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal Title</h5>
            <button type="button" class="btn-close" @click="toggleModal"></button>
          </div>
          <div class="modal-body">
            <p>Modal content goes here.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" @click="toggleModal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
  methods: {
    toggleModal() {
      this.showModal = !this.showModal;
    },
  },
};
</script>

1. Use the ModalComponent in your main Vue component or any other component where you want to display the modal:

<template>
  <div>
    <ModalComponent />
  </div>
</template>

<script>
import ModalComponent from './ModalComponent.vue';

export default {
  components: {
    ModalComponent,
  },
};
</script>

Now, when you run your Vue.js 3 application, you should be able to see the Bootstrap 5 modal working when you click the "Open Modal" button.

Make sure you have Vue.js 3 and the latest version of Bootstrap 5 installed for this setup to work properly.