How to Use Bootstrap Modals with Vue JS
Tags: vue, php, bootstrap, laravel
Published: 2022-08-11 10:57:35

---
title: How to Use Bootstrap Modals with Vue JS
published: true
series: Byte-Sized Examples
description: A short explanation on how to use Bootstrap modals with Vue3
tags: vue, php, bootstrap, laravel
cover_image: http://laranerds.dev/wp-content/uploads/2022/08/Byte-Sized-Examples-Bootstrap-Modals-1.png
# Use a ratio of 100:42 for best results.
---

> **You'll make more money and earn more respect when you deliver quality code faster.** [Laranerds.dev](https://laranerds.dev) helps you do just that. [Sign up](https://laranerds.dev) 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:

```html

<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

```js
<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.


```html

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

{% youtube fMwN2EhjJnQ %}