Uncaught TypeError: $(...).modal is not a function

[nongtan7898]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems
• [X] I have read the contributing guidelines

Describe the issue

I am having trouble closing the modal using jquery.

vite vue jquery bootstrap 5.3

<template>
  <!-- Button trigger modal -->
  <button
    type="button"
    class="btn btn-primary"
    data-bs-toggle="modal"
    data-bs-target="#exampleModal"
  >
    Launch demo modal
  </button>

  <!-- Modal -->
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" @click="close()">Save changes</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const close = () => {
  window.$('#exampleModal').modal('toggle')
}
</script>

<style></style>

Reduced test cases

• https://stackblitz.com/edit/vitejs-vite-lp48zk?file=src%2Fmain.js

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.3

[github-actions[bot]]

Hello @nongtan7898. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

[nongtan7898]

this Reduced test cases https://stackblitz.com/edit/vitejs-vite-lp48zk?file=src%2Fmain.js

[julien-deramond]

I'd say that you need to get access to the instance of the modal. I'm not that familiar with Vue.js, but you could try to add this to the main.js:

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

And then, in App.vue, something like:

const close = () => {
  const modalInstance = bootstrap.Modal.getOrCreateInstance('#exampleModal');
  modalInstance.hide();
};