How to Create Modal Popup in Vue JS

Hey there! Have you ever visited a website and seen those little pop-up windows that grab your attention? Those are called modal popups, and they're pretty handy for displaying important information or interacting with users without taking them away from the current page.

In this guide, I'll walk you through creating your modal popup in Vue JS.

So, let's see how to create a modal popup in vue js, vue.js create a modal popup, vue 3 modal example, vue js modal bootstrap, bootstrap vue 3 modal, modal popup vuejs.

By the end of this tutorial, you'll have a functional modal popup that you can customize and use in your Vue projects.

First things first, make sure you have Vue.js installed in your project. If not, you can easily set it up using Vue CLI or include it directly in your HTML file.

npm install vue

Now, let's create a Vue component for our modal. This component will contain the HTML structure and functionality for our modal popup.

<template>
  <div class="modal">
    <div class="modal-content">
      <span class="close" @click="closeModal">&times;</span>
      <p>This is my modal content!</p>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    closeModal() {
      // Close modal logic here
    }
  }
}
</script>

<style scoped>
.modal {
  /* Modal styles here */
}

.modal-content {
  /* Modal content styles here */
}

.close {
  /* Close button styles here */
}
</style>

Now, let's add a button or any element to trigger the modal when clicked.

<template>
  <div>
    <button @click="openModal">Open Modal</button>
    <!-- Modal component -->
    <Modal v-if="isModalOpen" @close="isModalOpen = false" />
  </div>
</template>

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

export default {
  components: {
    Modal
  },
  data() {
    return {
      isModalOpen: false
    }
  },
  methods: {
    openModal() {
      this.isModalOpen = true;
    }
  }
}
</script>

Now it's time to style your modal! You can add CSS to your component's scoped styles to customize the appearance of your modal and its content.

Feel free to customize the content of your modal by editing the HTML inside the modal component. You can add forms, images, text, or any other elements as needed.

Example:

<div>
  <b-button v-b-modal.modal-1>Launch demo modal</b-button>

  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Hello from modal!</p>
  </b-modal>
</div>

<b-modal>, by default, has an OK and Cancel buttons in the footer. These buttons can be customized by setting various props on the component.

<b-modal> supports close on ESC (enabled by default), close on backdrop click (enabled by default), and the X close button in the header (enabled by default). These features may be disabled by setting the props no-close-on-esc, no-close-on-backdrop, and hide-header-close respectively.

Other elements can easily show modals using the v-b-modal directive. 

<div>
  <!-- Using modifiers -->
  <b-button v-b-modal.my-modal>Show Modal</b-button>

  <!-- Using value -->
  <b-button v-b-modal="'my-modal'">Show Modal</b-button>

  <!-- The modal -->
  <b-modal id="my-modal">Hello From My Modal!</b-modal>
</div>

You can access modal using ref attribute and then call the show(), hide() or toggle() methods.

<template>
  <div>
    <b-button id="show-btn" @click="showModal">Open Modal</b-button>
    <b-button id="toggle-btn" @click="toggleModal">Toggle Modal</b-button>

    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
      <div class="d-block text-center">
        <h3>Hello From My Modal!</h3>
      </div>
      <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
      <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
    </b-modal>
  </div>
</template>

<script>
  export default {
    methods: {
      showModal() {
        this.$refs['my-modal'].show()
      },
      hideModal() {
        this.$refs['my-modal'].hide()
      },
      toggleModal() {
        // We pass the ID of the button that we want to return focus to
        // when the modal has hidden
        this.$refs['my-modal'].toggle('#toggle-btn')
      }
    }
  }
</script>

v-model property is always automatically synced with <b-modal> visible state and you can show/hide using v-model.

<template>
  <div>
    <b-button @click="modalShow = !modalShow">Open Modal</b-button>

    <b-modal v-model="modalShow">Hello From Modal!</b-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        modalShow: false
      }
    }
  }
</script>

And there you have it! You've successfully created a modal popup in Vue JS.

Output:

You might also like:

• Read Also: How to Create Modal in Laravel 10 Livewire
• Read Also: How to Create Laravel 10 Vue 3 Authentication
• Read Also: How to Create Autocomplete Search in Vue JS
• Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal