Add/remove classes on element/component during page transitions in layout/default.vue

Question

I am looking for a solution to add and remove classes on components/elements outside of the <nuxt/> element in layouts/default.vue during page transitions in a Nuxt project.

As an example, I would like to animate a div in and then out before every page transition. Pseudo code below:

<!-- layouts/default.vue -->

<template>
  <site-curtain :class="{ 'is-active': isTransitioning == true }" /> // I would to apply this class during a page transition
  <nuxt />
</template>

Is there an obvious way in Nuxt to listen to the page transitions that I am missing? I have looked at vue-router's beforeRouteUpdate navigation guard but not sure if it's suitable?

Any help will be greatly appreciated!

Answer 1

try this (I used this approach in one of my projects and it works fine):

first I defined a mixin as follows:

mixin/transition.js:

export default {
  beforeEnter() {
    this.$emit('transition', true);
  },
  afterEnter() {
    this.$emit('transition', false);
  },
}

then imported it in every page that I wanted to use the effect:

pages/about-us.vue

import transition from '@/mixin/transition';

export default {
  mixins: [transition],
  ...
}

then in the layout page I could listen to the transition event emited before and after the transition is done and get the payload sent with the event:

<template>
  <site-curtaion :class="{ 'is-active': isTransition }" />
  <nuxt @transition="isTransition = $event" />
</template>

and this is the data object of the layout component:

data() {
  return {
    isTransition: false,
  };
}

here is the resources I used to put together this solution:

Nuxt transition properties

Vue's javascript transition hooks