Page transitions when changing store property.

[martinsnajdr]

Hello,

I'm new to Pinia & Nuxt and so I'm trying to sort out in my head some basic ways to structure stores and use them when navigation through a simple website.

Let's say I have posts. Those posts share the same view and are loaded through Nuxt's pages/posts/[id].vue.

<template>
    <div>
        <h1>{{ postStore.post.title }}</h1>
    </div>
</template>

<script lang="ts" setup>
    import { useRoute } from 'vue-router';

    const route = useRoute();
    const postStore = usePostStore();

    const id = route.params.id;
    postStore.fetchPost(id); //fetches post by ID and stores it in postStore.post (which is Post or null)
</script>

I want to use Page Transitions (simple fadeout/fadein) when navigating through my Nuxt app. The problem is when I navigate from /posts/1 to /posts/2, the postStore.post changes immediately and causes premature hydratation of the view. So it changes from post 1 to post 2 in a few miliseconds (which is visible) and then runs the fadeout/fadein transition. It should fadeout, hydrate, fadein.

Is my approach with storing the post in store like that a bad practice? Of course I was thinking about adding some timeout to the fetchPost when postStore.post is not null, but I don't feel it's a good practice.

Thank you!

[kevinramharak]

The first thing that comes to mind is that you are not using a key or pageKey.
Vue is smart when rendering updates, and tries to reuse the DOM as much as possible.
By using a key you tell vue to treat the component as different and to render it completely new:

Without keys, Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible. With keys, it will reorder elements based on the order change of keys, and elements with keys that are no longer present will always be removed / destroyed.

[martinsnajdr]

Well I was playing with the key attribute at different locations, but it seems Vue keeps reusing the component that displays my data no matter where I put the key. I have tried to add key to the component, to the parent of the component and also via definePageMeta. Still the same result, the component gets hydrated before transition. But navigation between two different pages (different views/components) works ok.