Looney Posts - Answer Overflow

Looney

•Created by Looney on 3/18/2024 in #❓・help

NuxtImage with IPX Provider Returns 404 for Images on Firebase Hosting

I've deployed a Nuxt 3 application with Server-Side Rendering (SSR) on Firebase, utilizing Firebase Hosting and Cloud Functions. My app uses the Nuxt Image module with the default IPX provider for image optimization. While everything functions as expected in the local development environment, I encounter a persistent issue in production: all optimized images return a 404 Not Found error. Example Issue: In production, attempting to access optimized images via URLs structured like /_ipx/f_webp&s_1460x722/images/hero.png results in a 404 error. These URLs are generated by the Nuxt Image module and work without issue locally. Does anyone know how to fix this?

1 replies

NNuxt

•Created by Looney on 1/21/2024 in #❓・help

Showing A Loading Component In Nuxt SPA While Router Middleware Is Resolving

Hi, I have a Nuxt 3 SPA app (ssr: false), where I'm trying to show a loading component while my authentication router middleware is being resolved/awaiting. Here's my code:

// composables/useAppState.ts
const isLoaded = ref(false);

export default function useAppState() {
    return {
        isLoaded
    }
}

// middleware/auth.global.ts
export default defineNuxtRouteMiddleware(async () => {
    const { isLoaded } = useAppState()
    
    // An empty promise for testing purposes
    await new Promise((resolve) => {
        setTimeout(() => {
            resolve()
        }, 1000)
    })

    isLoaded.value = true
})

// app.vue
<script setup lang="ts">
const { isLoaded } = useAppState()
</script>

<template>
    <LoadingComponent v-if="!isLoaded" />
    <NuxtPage />
</template>

// composables/useAppState.ts
const isLoaded = ref(false);

export default function useAppState() {
    return {
        isLoaded
    }
}

// middleware/auth.global.ts
export default defineNuxtRouteMiddleware(async () => {
    const { isLoaded } = useAppState()
    
    // An empty promise for testing purposes
    await new Promise((resolve) => {
        setTimeout(() => {
            resolve()
        }, 1000)
    })

    isLoaded.value = true
})

// app.vue
<script setup lang="ts">
const { isLoaded } = useAppState()
</script>

<template>
    <LoadingComponent v-if="!isLoaded" />
    <NuxtPage />
</template>

The problem is that the <LoadingComponent> doesn't seem to be mounted before the router middleware is resolved. I thought it was only the pages rendered by <NuxtPage> that was blocked from rendered before any middlewares was resolved. Does anyone know how to achieve this? Any help is really appreciated 🙂

5 replies

Gaming

Programming