Nuxt.js - Navigation Guard

index.vue

<template>
  <div>
    <div v-if="isLeavePageDialogOpened" class="page-leave-dialog">
      <p>Are you sure you want to change the page?</p>
      <div>
        <button type="button" @onClick="leavePageNext(false)">No</button>
        <button type="button" @onClick="leavePageNext(true)">Yes</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  beforeRouteLeave(to, from, next) {
    // // simple
    // const result = Window.confirm('Are you sure you want to change the page?')
    // next(result)

    // original dialog
    this.openLeavePageDialog(next)
  },
  data() {
    return {
      isLeavePageDialogOpened: false,
      leavePageNext: () => {}
    }
  },
  methods: {
    openLeavePageDialog(next) {
      this.leavePageNext = (result) => {
        next(result)
        this.isLeavePageDialogOpened = false
      }
      this.isLeavePageDialogOpened = true
    }
  }
}
</script>