Nuxt-link delay transition to new page?

Question

This is a follow up to #1458. I'm looking for some direction on how Nuxt expects this to be handled.

I have a menu. When I click on a nuxt-link in the menu, I want to have time to close the menu before the page transition happens. The thing is, I only want that to happen when you click on the nuxt-link in the menu, not every time I go to a certain route (as the previous issue described using a middlewear on the route).

So there are a few different ways to do this, and I'm curious what the "Nuxt" way is?

The way we currently do this, disable the nuxt-link and capture the click, then do a router.push().

<nuxt-link :to="path" event="disabled" @click.native="delayLoad"/>

// Methods
delayLoad(event) {
     this.$store.commit("CLOSE_MENU")

     setTimeout(()=>{
        this.$router.push(event.target.pathname)
    }, 2000)
}

Is this a good idea? I just always have an aversion to hijacking nuxt-link and browser navigation like this. It seems janky.

The other ideas we played with were using a query param on the nuxt-link, and then using that in a middlewear to delay the page transition. That seemed worse to me, because now my URL's have a query param in them that is used for an animation, seems like that is abusing query params. This also triggers the page loading progress bar, which isn't really the intent, it's to have a sequenced animation happen, then page load.

It seems to me that perhaps nuxt-link should have a delay prop, or perhaps the page transition config should allow for a delay (like it does with duration)?

Answer 1

I wanted to do this as well and came up with the following solution. Using the new slots api you can more elegantly customise the nuxt-link behaviour:

<nuxt-link v-slot="{ route, href }" :to="path" custom>
  <a :href="href" @click.prevent="$emit('navigate', route)">
    <slot></slot>
  </a>
</nuxt-link>

This will make the link emit a navigate event with the route as a param. You then listen for this event wherever you include your menu component, like this:

<template>
  <transition
    name="fade"
    @after-leave="maybeNavigate"
  >
    <MainMenu
      v-if="menuIsVisible"
      @navigate="navigate"
    />
  </transition>
</template>

<script>
export default {
  data: () => ({
    menuIsVisible: false,
    navigateToOnMainMenuClose: null,
  }),
  methods: {
    navigate(route) {
      this.navigateToOnMainMenuClose = route
      this.menuIsVisible = false
    },
    maybeNavigate() {
      if (this.navigateToOnMainMenuClose) {
        this.$router.push(this.navigateToOnMainMenuClose)
        this.navigateToOnMainMenuClose = null
      }
    },
  },
}
</script>

Whenever you click a nav link in the menu, the route will be stored and the menu will close. After the menu out animation has finished, maybeNavigate() will push the stored route, if there is one. This removes the need for a setTimeout and if you manage to click multiple links in quick succession only the last one will be stored and navigated to.