How to Use Bootstrap Modals with Vue JS

You'll make more money and earn more respect when you deliver quality code faster. Laranerds.dev helps you do just that. Sign up to be notified when new resources are published.

Modals are popular for a reason -- they're a great way to allow a User to do something without interrupting the context of the current page.

You'll almost certainly have to wire up more than a few modals in your application, so it's worth getting pretty comfortable with them.

Keep reading if you'd like a simple explanation of how to use Bootstrap modals in your Vue3 application.

Simple Steps for Opening and Closing a Modal

All the steps below are demonstrated using the Vue3 Composition API syntax.

1. Copy / Paste the Bootstrap code for your modal in your application template.
2. In the onMounted() hook, query the dom for your modal HTML element and initialize a modal object using Bootstrap's library.
3. Call show() and hide() on your modal object as needed.

The Modal HTML

Direct from the Bootstrap documentation:

<template>

<!-- 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">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <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">Save changes</button>
      </div>
    </div>
  </div>
</div>

</template>

As you place more and more modals into your template, you'll want to come up with some consistent naming convention to make it easier to find your modals in your code. I like to rename my modal ids to suit the purpose the modal.

In my video walkthrough below I name the modal modal_demo. In other videos I name my modals like modal_client_form or modal_client_delete_confirm.

Use whatever convention makes sense to you.

Initialize your Modal in onMounted() Hook

<script setup>

import { reactive, onMounted } from 'vue'

const state = reactive({
    modal_demo: null,
})

onMounted(() => {
    state.modal_demo = new bootstrap.Modal('#modal_demo', {})
})

function openModal()
{
    state.modal_demo.show()
}

function closeModal()
{
    state.modal_demo.hide()
}



</script>

Opening and Closing your Modal

1. Change the id attribute on the modal to match the id queried for in onMounted()
2. remove the data- attribute from the two close buttons, and instead add a Vue @click directive.

<template>

<!-- Button trigger modal -->
<button 
    type="button" 
    class="btn btn-primary" 
    @click="openModal" 
>
    Launch demo modal
</button>



<!-- Modal -->
<div class="modal fade" id="modal_demo" tabindex="-1" aria-labelledby="modal_demo_label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal_demo_label">Modal title</h5>
        <button type="button" class="btn-close" aria-label="Close" @click="closeModal"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" @click="closeModal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

</template>

That's it!

If you add new modals you may want to change the openModal and closeModal functions to something more specific like modal_demo_open() and modal_demo_close(). You'll want to handle the opening and closing of each modal individually, of course.

You can see all the above in action here: