ap
ap
PostsComments
NNuxt
Created by ap on 12/5/2024 in #❓・help
Page transitions occur after content has loaded between pages that re-use components
useLazyAsyncData did the trick ! Thanks for helping me through that !
11 replies
NNuxt
Created by ap on 12/5/2024 in #❓・help
Page transitions occur after content has loaded between pages that re-use components
Hey @brick the data is being fetched from Sanity. This is how my page is structured: 
<template>
    <div id="work-page">
        <div>
            <template v-if="!pending && videoData">
                <div>
                    <div class="video-area">
                        <VideoComponent 
                            :videoURL="videoData?.asset?.videoURL" 
                            :videoPoster="videoData?.asset?.image" 
                            :showControls="true"
                        />
                    </div>
                    <VideoGrid :videos="videoData.editor?.work"/>
                </div>
            </template>
        </div>
    </div>
</template>
  
<script setup>
    import videoQuery from '../lib/sanity/queries/video';
  
    const sanity = useSanity ();
    const route = useRoute ();
  
    const { pending, data: videoData } = await useAsyncData('videoData', async () => {
        try {
            const data = await sanity.fetch(videoQuery(route.params.handle));
            return data;
        } catch (error) {
            console.log(error);
            return {
                isError: true
            }
        }
    });

    onBeforeRouteUpdate ((to, from) => {
        if (to.name === from.name){
            console.log('SAME ROUTE!!!')
        }
    });
</script>
<template>
    <div id="work-page">
        <div>
            <template v-if="!pending && videoData">
                <div>
                    <div class="video-area">
                        <VideoComponent 
                            :videoURL="videoData?.asset?.videoURL" 
                            :videoPoster="videoData?.asset?.image" 
                            :showControls="true"
                        />
                    </div>
                    <VideoGrid :videos="videoData.editor?.work"/>
                </div>
            </template>
        </div>
    </div>
</template>
  
<script setup>
    import videoQuery from '../lib/sanity/queries/video';
  
    const sanity = useSanity ();
    const route = useRoute ();
  
    const { pending, data: videoData } = await useAsyncData('videoData', async () => {
        try {
            const data = await sanity.fetch(videoQuery(route.params.handle));
            return data;
        } catch (error) {
            console.log(error);
            return {
                isError: true
            }
        }
    });

    onBeforeRouteUpdate ((to, from) => {
        if (to.name === from.name){
            console.log('SAME ROUTE!!!')
        }
    });
</script>
I have tried playing around a bit with onBeforeRouteUpdate to really pinpoint when I need this more custom action to happen as navigating from this page to a page without the <VideoComponent/> works great and as expected. Any help is much appreciated !
11 replies