How to add Dialog Component to Vuejs App

In this tutorial, grokonez.com shows you way to add a Dialog Component to Vuejs App.

Demo

vue-dialog-component-example

Create Dialog component

In src folder, create components, then add GkzDialog.vue file:

src/components/GkzDialog.vue


<template>
  <div class="modal" v-show="show">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title mx-auto">{{title}}</h5>
        </div>
        <div class="modal-body" v-if="announcement">
          <p>{{announcement}}</p>
        </div>
        <div class="modal-footer">
          <button @click="dismiss" type="button" class="btn btn-primary mx-auto">OK</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    announcement: {
      type: String,
      required: false
    }
  },
  methods: {
    dismiss() {
      this.$emit("close");
    }
  },
  created() {
    const escHandler = e => {
      if (e.key === "Escape" && this.show) {
        this.dismiss();
      }
    };

    document.addEventListener("keydown", escHandler);
    this.$once("hook:destroyed", () => {
      document.removeEventListener("keydown", escHandler);
    });
  }
};
</script>

<style>
.modal {
  background: #aaa;
  display: flex;
}
</style>
</script>

<style>
.modal {
  background: #aaa;
  display: flex;
}
</style>

Our dialog component has props that accepts parent component to pass title, announcement and show status to it.

There is dismiss() method that emits close event to parent for closing the dialog.
We have 2 ways to close the dialog:
– click on the button
– press Escape keyboard button: use global EventListener for “keydown” event and escHandler that also calls code>dismiss() method.

Remember that we need to set CSS display: flex; to display the dialog.

Create component that contains Dialog component

Now we’re gonna create the parent component that contains Dialog component.
This component should pass title, announcement and show status as props to Dialog child component.

src/App.vue


<template>
  <div class="mx-auto" style="width: 200px;">
    <h2>grokonez.com</h2>
    <button type="button" class="btn btn-primary mt-3" @click="isDialogOpened = true">Open Dialog</button>

    <gkz-dialog 
    :show="isDialogOpened"
    title="grokonez.com"
    announcement="At this website, you will find many Simple, feasible, practical, integrative Programming Tutorials."
    @close="isDialogOpened = false"/>
  </div>
</template>

<script>
import GkzDialog from "./components/GkzDialog.vue";

export default {
  components: {
    GkzDialog
  },
  data() {
    return {
      isDialogOpened: false
    };
  }
};
</script>

The button controls whether Dialog shows or not by changing isDialogOpened status.

Source code

Run commands:
npm install
npm run dev

vue-dialog-component-example

One thought on “How to add Dialog Component to Vuejs App”

Leave a Reply

Your email address will not be published. Required fields are marked *