Nuxt•4mo ago

Components changing as page transition starts instead of after leave

Hello! I have a component that renders different content based on a prop that I am passing into it from different pages. When I navigate from one page to another that both have the component (but different content because it's a different prop) the content changes before the page transition fadeout finishes, causing an undesirable jump of content on the page. Any ideas on how to solve this? I am using global page transitions as noted below

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    pageTransition: { name: "page", mode: "out-in" }
  }
});

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    pageTransition: { name: "page", mode: "out-in" }
  }
});

/* app.vue */

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.5s ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>

/* app.vue */

<style>
.page-enter-active,
.page-leave-active {
  transition: all 0.5s ease;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
}
</style>

// component.vue

<script setup lang="ts">
  const props = defineProps(["tag"])
  const data = fetchSomething(props.tag)
</script>

<template>
  <div v-for="thing in data">
    {{ thing }}
  </div>
</template>

// component.vue

<script setup lang="ts">
  const props = defineProps(["tag"])
  const data = fetchSomething(props.tag)
</script>

<template>
  <div v-for="thing in data">
    {{ thing }}
  </div>
</template>

// page.vue

<template>
  <div>
    <component tag="something" />
  </div>
</template>

// page.vue

<template>
  <div>
    <component tag="something" />
  </div>
</template>

1 Reply

Omnislash•4mo ago

Hello Fully random thought : You can't play with the Transition hook to update/print your new contant after the transition ? https://nuxt.com/docs/getting-started/transitions (JavaScript Hooks) Never faced this use case sorry, my next best idea would be to have a look at the lifecycle with the same general idea : a way to deal with my data at the end at the transition Now that I'm thinking about what I'm writing, might be breaking the SSR if you need it ^^" ? I don't use it for my project so..... no other idea sorry

Gaming

Programming

Components changing as page transition starts instead of after leave