Using modals in Vue

Author: Dawid Adach

-

In this lesson, we will learn how to use modals in our projects.

Note:
Modals are small pop up windows which are really handy when you want to display to user extra content, configuration or consent request.

To use modals, follow the steps below.

  1. 1. Import the modal elements in App.vue
  2. 
    import {
      ...
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter
    } from "mdbvue";
    
    [...]
    export default {
      name: "App",
    	components: {
    	...
    	mdbModal,
    	mdbModalHeader,
    	mdbModalTitle,
    	mdbModalBody,
    	mdbModalFooter,
    	...
    	},
      
  3. Add the new variable modal: false within data() function:
  4. 
       data() {
        return {
          events: [
    		...
          ],
          modal: false,
        };
      },	
      
  5. Add the modal body to the template before </mdb-container>
  6. 
    <mdb-modal v-if="modal" @close="modal = false">
      <mdb-modal-header>
        <mdb-modal-title tag="h4" class="w-100 text-center font-weight-bold">Add new event</mdb-modal-title>
      </mdb-modal-header>
      <mdb-modal-body>Modal body</mdb-modal-body>
      <mdb-modal-footer class="justify-content-center">
        <mdb-btn color="info">Add</mdb-btn>
      </mdb-modal-footer>
    </mdb-modal>
      
  7. Update the Add Event button to display modal on click (update modal value to true)
  8. 
    <mdb-btn color="info" @click.native="modal = true">Add Event</mdb-btn>
      

    The final content of the file will be:

    
    <template>
      <mdb-container>
        <mdb-row>
          <mdb-col col="9">
            <h2 class="text-uppercase my-3">Today:</h2>
            <Event
              v-for="(event, index) in events"
              :index="index"
              :time="event.time"
              :title="event.title"
              :location="event.location"
              :description="event.description"
              :key="index"
              @delete="handleDelete"
            />
            <mdb-row>
              <mdb-col xl="3" md="6" class="mx-auto text-center">
                <mdb-btn color="info" @click.native="modal = true">Add Event</mdb-btn>
              </mdb-col>
            </mdb-row>
          </mdb-col>
          <mdb-col col="3">
            <h3 class="text-uppercase my-3">Schedule</h3>
            <h6 class="my-3">
              It's going to be busy that today. You have
              <b>{{events.length}} events</b> today.
            </h6>
            <h1 class="my-3">
              <mdb-row>
                <mdb-col col="3" class="text-center">
                  <mdb-icon far icon="sun"/>
                </mdb-col>
                <mdb-col col="9">Sunny</mdb-col>
              </mdb-row>
              <mdb-row>
                <mdb-col col="3" class="text-center">
                  <mdb-icon icon="thermometer-three-quarters"/>
                </mdb-col>
                <mdb-col col="9">23°C</mdb-col>
              </mdb-row>
            </h1>
            <p>
              Don't forget your sunglasses. Today will dry and sunny, becoming
              warm in the afternoon with temperatures of between 20 and 25
              degrees.
            </p>
          </mdb-col>
        </mdb-row>
    
        <mdb-modal v-if="modal" @close="modal = false">
          <mdb-modal-header>
            <mdb-modal-title tag="h4" class="w-100 text-center font-weight-bold">Add new event</mdb-modal-title>
          </mdb-modal-header>
          <mdb-modal-body>Modal body</mdb-modal-body>
          <mdb-modal-footer class="justify-content-center">
            <mdb-btn color="info">Add</mdb-btn>
          </mdb-modal-footer>
        </mdb-modal>
      </mdb-container>
    </template>
    
    <script>
    import {
      mdbContainer,
      mdbRow,
      mdbCol,
      mdbIcon,
      mdbBtn,
      mdbModal,
      mdbModalHeader,
      mdbModalTitle,
      mdbModalBody,
      mdbModalFooter
    } from "mdbvue";
    import Event from "@/components/Event";
    export default {
      name: "App",
      components: {
        mdbContainer,
        mdbRow,
        mdbCol,
        mdbIcon,
        mdbBtn,
        mdbModal,
        mdbModalHeader,
        mdbModalTitle,
        mdbModalBody,
        mdbModalFooter,
        Event
      },
      data() {
        return {
          events: [
            {
              time: "10:00",
              title: "Breakfast with Simon",
              location: "Lounge Caffe",
              description: "Discuss Q3 targets"
            },
            {
              time: "10:30",
              title: "Daily Standup Meeting (recurring)",
              location: "Warsaw Spire Office"
            },
            {
              time: "11:00",
              title: "Call with HRs"
            },
            {
              time: "12:00",
              title: "Lunch with Timmoty",
              location: "Canteen",
              description: "Project evalutation "
            }
          ],
          modal: false
        };
      },
      methods: {
        handleDelete(eventIndex) {
          this.events.splice(eventIndex, 1);
        }
      }
    };
    </script>
    
    <style>
    </style>
      
  9. Save the file and run the app:
  10. Modal Demo

    As you can see we can close that modal either by clicking on the X sign in the top right corner or by simply clicking anywhere outside the modal.

    Note:
    Modals are great tools and they can be customized in various ways. Most probably you will use them to get user consent for using cookies or to accept a privacy policy on a website, display a registration/login form or some extra details like map and/or contact form.

    You can find dozens of predefined modal templates in our docs.
    You may also wish to check out our modal generator.


Rate this lesson

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...