Nuxt open link into modal

Solution:

I have built a sandbox solution for you here: https://codesandbox.io/s/reverent-leftpad-xj81p

Explaining the solution:

The solution uses beforeRouteLeave() function from the vue-router which is available to your nuxt pages by default:

beforeRouteLeave(to, from, next) {
  if (to.name === "product-id") {
    this.displayProductModal(to);
  } else {
    next();
  }
},

This function interrupts any route changes on the featured page before they happen, and if the target route is the route of the product detail (which means someone clicked on product link), it opens the modal dialog instead.

To handle the url change on opening and closing of the modal, the window.history object is used:

displayProductModal(route) {
  this.activeModal = route.params.id
  window.history.pushState({}, null, route.path)
},
hideProductModal() {
  this.activeModal = null
  window.history.pushState({}, null, this.$route.path)
}

Try to play around a bit, it should work exactly like the youpic example you provided.

Note: There are no real “modals” used in the example, the whole example is as basic as possible for the sake of simplicity.