brick Comments - Answer Overflow

brick

Posts Comments

NNuxt

•Created by ap on 12/5/2024 in #❓・help

Page transitions occur after content has loaded between pages that re-use components

Great! Good luck with the rest of your project!

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

Also try using useLazyAsyncData instead of useAsyncData and see if that changes anything

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

Can you try putting the videoData into a local ref and loading from that in your template?

<template>
  <div id="work-page">
    <div>
      <template v-if="!pending && localVideoData"> // ALSO UPDATE THIS TO LOCAL
        <div>
          <div class="video-area">
            <VideoComponent
              :videoURL="localVideoData?.asset?.videoURL" // ALSO UPDATE THIS TO LOCAL
              :videoPoster="localVideoData?.asset?.image" // ALSO UPDATE THIS TO LOCAL
              :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 localVideoData = ref() // <-- ADD THIS

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,
      };
    }
  }
);

// DIRECTLY ASSIGN
localVideoData.value = videoData

// OR TRY WATCHING?
watch(videoData, (newValue) => {
  localVideoData.value = newValue
})

onBeforeRouteUpdate((to, from) => {
  if (to.name === from.name) {
    console.log("SAME ROUTE!!!");
  }
});
</script>

<template>
  <div id="work-page">
    <div>
      <template v-if="!pending && localVideoData"> // ALSO UPDATE THIS TO LOCAL
        <div>
          <div class="video-area">
            <VideoComponent
              :videoURL="localVideoData?.asset?.videoURL" // ALSO UPDATE THIS TO LOCAL
              :videoPoster="localVideoData?.asset?.image" // ALSO UPDATE THIS TO LOCAL
              :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 localVideoData = ref() // <-- ADD THIS

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,
      };
    }
  }
);

// DIRECTLY ASSIGN
localVideoData.value = videoData

// OR TRY WATCHING?
watch(videoData, (newValue) => {
  localVideoData.value = newValue
})

onBeforeRouteUpdate((to, from) => {
  if (to.name === from.name) {
    console.log("SAME ROUTE!!!");
  }
});
</script>

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

@ap how are you loading the data for these components? I am loading my data through Pinia, and in order to fix the issue I previously had I used LazyAsyncData and a fallback template. This combination of things fixed the issue I had. I'm happy to look at your code more if you can provide any more information about it. Here is a quick example of what my component looks like (using posts as an example)

<script setup lang="ts">
  // define props
  const props = defineProps(["tag"]);

  // local state for posts (to help with component swapping)
  const posts = ref();

  // init stores
  const postsStore = usePosts();

  // fetch data
  await useLazyAsyncData(async () => {
    await postsStore.getPosts(props.tag);
    posts.value = postsStore.posts;
  });
</script>

<template>
  <div>
    <template #fallback>
      <LoadingBlock />
    </template>
    <div v-for"post in posts">
      {{ post }}
    </div>
  </div>
</template>

<script setup lang="ts">
  // define props
  const props = defineProps(["tag"]);

  // local state for posts (to help with component swapping)
  const posts = ref();

  // init stores
  const postsStore = usePosts();

  // fetch data
  await useLazyAsyncData(async () => {
    await postsStore.getPosts(props.tag);
    posts.value = postsStore.posts;
  });
</script>

<template>
  <div>
    <template #fallback>
      <LoadingBlock />
    </template>
    <div v-for"post in posts">
      {{ post }}
    </div>
  </div>
</template>

11 replies

NNuxt

•Created by brick on 9/17/2024 in #❓・help

Adding Types To Nuxt Module

Hello! Sorry for the delayed reply - I was away from my computer for a bit. I couldn't remember what I ended up doing but just looked back at my code and I put all of the interfaces in each component. Ended up working pretty well for my needs but not necessarily a fix to the issue. Hope you get it figured out!

14 replies

Gaming

Programming