Dialog Modal Default Layout

index.vue

<template>
	<div>
		<button class="button button--confirm" @click="openDialog">Open Dialog</button>
		<DialogModal />
	</div>
</template>

<script>
export default {
  methods: {
    openDialog() {
      this.$dialog.open({
        message: 'Are you sure you want to do this?',
        resolver: (async (result) => {
          try {
            const res = await result;
            /* eslint-disable no-console */
            console.log(res);
          } catch (error) {
            console.warn(error);
          }
        }),
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.button {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	cursor: pointer;
}
</style>