How to add Dialog Component to Vuejs App

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



Create Dialog component

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


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.


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

Source code

Run commands:
npm install
npm run dev


By grokonez | June 7, 2019.

Related Posts

2 thoughts on “How to add Dialog Component to Vuejs App”

Got Something To Say:

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