Yazılım Panteri Posts - Answer Overflow

Yazılım Panteri

•Created by Yazılım Panteri on 11/28/2024 in #❓・help

Nuxt 3 GSAP custom page transitions

i'm having a little problem about nuxt 3 page transition hooks. onBeforeLeave doesn't fire until redirected page loads. problem is i'm using useAsyncData for my profile page. And page transition doesnt start until that function completed, so user still wait in the same page. here is the source codes: app.vue

<template>
  <NuxtLayout>
    <NuxtPage :transition="pageTransition"></NuxtPage>
  </NuxtLayout>
  <div id="transitionLayer" class="w-full h-0 overflow-hidden fixed top-0 left-0 bg-black z-[100] flex items-center justify-center">
    <div class="text-white text-6xl font-bold"><span id="transitionProgress">0</span>%</div>
  </div>
</template>

<script setup>
import pageTransition from './utils/transitionConfig.js';
</script>

<template>
  <NuxtLayout>
    <NuxtPage :transition="pageTransition"></NuxtPage>
  </NuxtLayout>
  <div id="transitionLayer" class="w-full h-0 overflow-hidden fixed top-0 left-0 bg-black z-[100] flex items-center justify-center">
    <div class="text-white text-6xl font-bold"><span id="transitionProgress">0</span>%</div>
  </div>
</template>

<script setup>
import pageTransition from './utils/transitionConfig.js';
</script>

transitionConfig.vue

import gsap from 'gsap';

export default {
  name: 'page-transition',
  mode: 'out-in',
  onEnter: (el, done) => {
    console.log('enter');
    done();
  },
  onBeforeLeave: el => {
    console.log(el);
    console.log('before leave');
    const transitionLayer = document.getElementById('transitionLayer');
    gsap.set(transitionLayer, {
      height: 0,
      top: 'auto',
      bottom: 0
    });
    gsap.to(transitionLayer, {
      height: '100%',
      duration: 1,
      ease: 'power2.out'
    });
  },
  onLeave: (el, done) => {
    console.log('leave');
    const transitionLayer = document.getElementById('transitionLayer');

    gsap
      .timeline({
        delay: 1,
        onStart: () => {
          done();
          gsap.set(transitionLayer, {
            top: 0,
            bottom: 'auto'
          });
        }
      })
      .to(transitionLayer, {
        height: 0,
        duration: 0.5,
        ease: 'power2.inOut'
      });
  }
};

import gsap from 'gsap';

export default {
  name: 'page-transition',
  mode: 'out-in',
  onEnter: (el, done) => {
    console.log('enter');
    done();
  },
  onBeforeLeave: el => {
    console.log(el);
    console.log('before leave');
    const transitionLayer = document.getElementById('transitionLayer');
    gsap.set(transitionLayer, {
      height: 0,
      top: 'auto',
      bottom: 0
    });
    gsap.to(transitionLayer, {
      height: '100%',
      duration: 1,
      ease: 'power2.out'
    });
  },
  onLeave: (el, done) => {
    console.log('leave');
    const transitionLayer = document.getElementById('transitionLayer');

    gsap
      .timeline({
        delay: 1,
        onStart: () => {
          done();
          gsap.set(transitionLayer, {
            top: 0,
            bottom: 'auto'
          });
        }
      })
      .to(transitionLayer, {
        height: 0,
        duration: 0.5,
        ease: 'power2.inOut'
      });
  }
};

15 replies

NNuxt

•Created by Yazılım Panteri on 11/26/2024 in #❓・help

Client side caching problem on srr

Hello guys. I need some help for a project. Problem is caching. Server doesn't aware client's localStorage so it's fetching data again and again even there is valid data in my client.

<script setup>

const cachedData = useLocalStorage('deneme', {
  data: null,
  timestamp: null
});

console.log(Date.now() - cachedData.value.timestamp);
const { data, refresh } = useAsyncData('deneme', () => {
  const currentTime = Date.now();
  if (cachedData.value.data && currentTime - cachedData.value.timestamp < 30000) {
    console.log(currentTime - cachedData.value.timestamp);
    return cachedData.value.data;
  }
  try {
    const freshData = Date.now();

    // Update local storage cache
    cachedData.value = {
      data: freshData,
      timestamp: currentTime
    };

    return freshData;
  } catch (error) {
    // Fallback to cached data if fetch fails
    return cachedData.value.data;
  }
});

const clearCache = () => {
  cachedData.value = {
    data: null,
    timestamp: null
  };
};
</script>

<script setup>

const cachedData = useLocalStorage('deneme', {
  data: null,
  timestamp: null
});

console.log(Date.now() - cachedData.value.timestamp);
const { data, refresh } = useAsyncData('deneme', () => {
  const currentTime = Date.now();
  if (cachedData.value.data && currentTime - cachedData.value.timestamp < 30000) {
    console.log(currentTime - cachedData.value.timestamp);
    return cachedData.value.data;
  }
  try {
    const freshData = Date.now();

    // Update local storage cache
    cachedData.value = {
      data: freshData,
      timestamp: currentTime
    };

    return freshData;
  } catch (error) {
    // Fallback to cached data if fetch fails
    return cachedData.value.data;
  }
});

const clearCache = () => {
  cachedData.value = {
    data: null,
    timestamp: null
  };
};
</script>

5 replies

NNuxt

•Created by Yazılım Panteri on 10/8/2024 in #❓・help

Need help for component library with vue 3

Hello guys! I need some advices and help about my Project. I'm currently working on a aceternity ui and shadcn ui like component library for vue and nuxt 3. I have prepared some examples and skeleton about it but i feel something is missing but i don't know how to fix it. I'm not a 10 year experienced guy worked on a Google or apple so i need some guidance. Here is a demo version of the Project https://nuxt3-component-library.pages.dev/docs/components/3d-card And of course github repo https://github.com/safakdinc/nuxt3-component-library If you are interested, feel free to contact via dm. Important reminder! Since this is an independent project, I cannot give you earnings references or promises of success. we'll wait and see what happens

4 replies

NNuxt

•Created by Yazılım Panteri on 6/18/2024 in #❓・help

index.html cannot load js files when i generate page with nuxi generate

question is clear. I'm trying to generate my app as a static page but js files cannot load properly. i'm trying to serve it with xampp. i can see the page when i visit localhost/dist/ but js files inside the /localhost/dist/_nuxt folder and index.html try to fetch these files from localhost/_nuxt. i would really appreciate it if you could help me.

8 replies

NNuxt

•Created by Yazılım Panteri on 5/30/2023 in #❓・help

skeleton loader in nuxt 3

i want to use suspense in nuxt 3 but it's not working. it's works fine in vue 3 but i can't figured out for nuxt. do not share the video below, it doesn't work https://www.youtube.com/watch?v=Wyrma2HkvA4

1 replies

Gaming

Programming