Yazılım Panteri
nuxt-vuefire http://localhost:3000/api/__session 401 (Unauthorized) on production
@kapa.ai i'm sure i have correctly set env variables. as i said app works fine on development mode. problems start after i build project. also there is FirebaseError: Firebase: Error (auth/login-blocked) error when i try to login
12 replies
Nuxt 3 Firebase error on SSR
thanks for your help guys. i opened an issue for vuefire. if you want to add something here is the issue
https://github.com/vuejs/vuefire/issues/1599#issuecomment-2614328432
28 replies
Nuxt 3 Firebase error on SSR
i don't know. there is too much discussions about these type of errors
https://www.reddit.com/r/Nuxt/comments/14b191s/vuefire_cannot_find_module_websocketapi/
28 replies
Nuxt 3 GSAP custom page transitions
@kapa.ai
CustomLoader.vue
<template>
<div
class="indicator fixed top-0 left-0"
:style="{
pointerEvents: 'none',
width: '100%',
height:
${props.height}px,
opacity: isLoading ? 1 : 0,
background: error ? props.errorColor : props.color || undefined,
backgroundSize: '100% auto', // Always full size
transform: scaleX(${Math.max(progress, 10)}%), // Ensure minimum width
transformOrigin: 'left',
transition: 'transform 0.1s, height 0.4s, opacity 0.4s',
zIndex: 999999
}"></div>
<div
id="transitionLayer"
class="fixed left-0 w-full bg-black z-[10000] flex flex-col items-center justify-start h-0 bottom-0 overflow-hidden"
ref="transitionLayer"></div>
</template>
<script setup>
import { ref, watch, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import gsap from 'gsap';
// Props
const props = defineProps({
throttle: {
type: Number,
default: 200
},
duration: {
type: Number,
default: 2000
},
height: {
type: Number,
default: 3 // Adjust height for thicker loader
},
color: {
type: String,
default: 'repeating-linear-gradient(to right,#00dc82 0%,#34cdfe 50%,#0047e1 100%)'
},
errorColor: {
type: String,
default: 'repeating-linear-gradient(to right,#f87171 0%,#ef4444 100%)'
},
estimatedProgress: {
type: Function,
default: (duration, elapsed) => (2 / Math.PI) * 100 * Math.atan(((elapsed / duration) * 100) / 50)
}
});
// Refs
const transitionLayer = ref(null);
const animationComplete = ref(false); // Tracks animation state
// Loading Indicator
const { progress, isLoading, error, start, finish, clear } = useLoadingIndicator({
duration: props.duration,
throttle: props.throttle,
estimatedProgress: props.estimatedProgress
});
// Router instance
const router = useRouter();
// Watch for loading state
watch(progress, newVal => {
if (newVal === 100) {
startAnimation();
}
});
// Start Animation
function startAnimation() {
gsap.set(transitionLayer.value, { height: 0, top: 'auto', bottom: 0 });
gsap.to(transitionLayer.value, {
height: '100%',
duration: 1,
ease: 'power2.out',
onComplete: () => {
finishAnimation();
}
});
}
// Finish Animation
function finishAnimation() {
const appContainer = document.getElementById('app');
const navbar = document.getElementById('navbar');
const tl = gsap.timeline({
onComplete: () => {
// Remove GSAP-applied styles
gsap.set(appContainer, { clearProps: 'all' });
}
});
animationComplete.value = false;
gsap.set(transitionLayer.value, { height: '100%', top: 0, bottom: 'auto' });
tl.to(transitionLayer.value, {
height: 0,
top: '-100%',
duration: 1,
ease: 'power2.out'
});
tl.fromTo(
appContainer,
{
yPercent: 100
},
{
yPercent: 0,
duration: 0.8,
ease: 'power2.out'
},
'<+=0.1'
);
tl.play();
}
// Mount hook to ensure transition layer is set up
onMounted(() => {
animationComplete.value = false;
});
</script>
<style scoped>
#transitionLayer {
will-change: height;
}
.counter-enter-active,
.counter-leave-active {
transition: all 0.15s ease-out;
}
.counter-leave-active {
position: absolute;
}
.counter-enter-from {
transform: translateY(-300%);
}
.counter-enter-to {
transform: translateY(0%);
}
.counter-leave-from {
transform: translateY(0%);
}
.counter-leave-to {
transform: translateY(300%);
}
</style>
app.vue
<template>
<CustomLoader></CustomLoader>
<NuxtLayout>
<NuxtPage></NuxtPage>
</NuxtLayout>
</template>
<script setup></script>
i want to make a custom page loader. new page should mount after finishAnimation starts. important point is new page should continue to it's loading progress. just not affect visually until animation complete15 replies
Nuxt 3 GSAP custom page transitions
@kapa.ai
/middleware/loading.global.js
i'm using nested pages sometimes and page:finish hook called multiple times when that happen. for exapmle i have pages/profile.vue and also have pages/profile/[name]/index.vue.
is there any prevent or fix to call page:finish hook multiple times for same request?
15 replies
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