NightFuries Comments - Answer Overflow

Topics

NightFuries

Explore posts from servers

•Created by NightFuries on 3/20/2025 in #❓・help

Cloudflare automatic deployment fails

I would have to override that since that's not a direct dependency. Regardless, the issue was cloudflare uses npm install while I use bun. So npm doesn't read the bun lockfile and installed incompatible versions.. Cloudflare doesn't support bun so I'm having to use ci to upload it manually. Ehh, it works.

7 replies

•Created by NightFuries on 1/20/2025 in #❓・help

Attach data to the inline-middleware

@kapa.ai this pr https://github.com/nuxt/nuxt/pull/18460 seems to fix the issue

18 replies

•Created by NightFuries on 1/20/2025 in #❓・help

Attach data to the inline-middleware

@kapa.ai I have a await useAsyncData inside my middleware but I am receiving the error "Await expressions are not supported in definePageMeta"

const validTokenMiddleware = defineNuxtRouteMiddleware(async (to, _from) => {
  const token = to.query.token;
  if (!token || typeof token !== 'string') {
    throw createError({
      statusCode: 404,
      statusMessage: 'Not Found',
      fatal: true
    });
  }

  const { data, error } = await useFetch('/api/auth');
});

definePageMeta({
  middleware: validTokenMiddleware
})

const validTokenMiddleware = defineNuxtRouteMiddleware(async (to, _from) => {
  const token = to.query.token;
  if (!token || typeof token !== 'string') {
    throw createError({
      statusCode: 404,
      statusMessage: 'Not Found',
      fatal: true
    });
  }

  const { data, error } = await useFetch('/api/auth');
});

definePageMeta({
  middleware: validTokenMiddleware
})

18 replies

•Created by David on 1/20/2025 in #❓・help

Could not load @nuxtjs/sitemap. Is it installed?

I believe this was the source of the error.

9 replies

•Created by NightFuries on 1/20/2025 in #❓・help

Attach data to the inline-middleware

@kapa.ai

<script setup>
const { data: userData, error } = await useFetch(`/api/person/${route.params.id}`)
watch(error, (e) => {
  console.log(e)
})
</script>

<script setup>
const { data: userData, error } = await useFetch(`/api/person/${route.params.id}`)
watch(error, (e) => {
  console.log(e)
})
</script>

The above snippet does not read error if it is thrown.

18 replies

•Created by NightFuries on 1/19/2025 in #❓・help

set API_BASE_URL in static site

@kapa.ai I decided to use process.env.API_BASE but this was generated to const A = {}; A.API_BASE. what can i do to fix this?

14 replies

•Created by NightFuries on 1/19/2025 in #❓・help

set API_BASE_URL in static site

@kapa.ai I have a common layer that requires the base url. One static app and another SSR app uses this common module. How can I use env variables such that both apps work

14 replies

•Created by NightFuries on 1/11/2025 in #❓・help

Choose a local file if data fetching failed

i won't use pinia, a simple useState will do since i won't need pinia anywhere else in my app.

17 replies

•Created by NightFuries on 1/11/2025 in #❓・help

Choose a local file if data fetching failed

i am sorry i am being a pain

17 replies

•Created by NightFuries on 1/11/2025 in #❓・help

Choose a local file if data fetching failed

how should the code skeleton look like?

17 replies

•Created by NightFuries on 1/10/2025 in #❓・help

How to use NuxtErrorBoundary properly??

Ohh that's a good idea, i didn't know about this. I'll check it out asap.

12 replies

•Created by NightFuries on 1/11/2025 in #❓・help

Choose a local file if data fetching failed

@kapa.ai But this is the reverse of the problem I'm trying to solve. If the API fetch fails, then use the local file instead.

17 replies

•Created by NightFuries on 1/11/2025 in #❓・help

Choose a local file if data fetching failed

@kapa.ai I think this is incorrect. the correct answer is if a null value was returned from getCachedData, then useAsyncData is called.

17 replies

•Created by NightFuries on 1/10/2025 in #❓・help

How to use NuxtErrorBoundary properly??

I did the following in app.vue and it worked:

<template>
  <NuxtLayout>
    <NuxtErrorBoundary>
      <NuxtPage />
      <template #error>
        ...
      </template>
    </NuxtErrorBoundary>
  </NuxtLayout>
</template>

<template>
  <NuxtLayout>
    <NuxtErrorBoundary>
      <NuxtPage />
      <template #error>
        ...
      </template>
    </NuxtErrorBoundary>
  </NuxtLayout>
</template>

But i realised it's not what I wanted. When the error is thrown, it replaces the entire page with the contents of the error-slot. My app requirements are to have a floating overlay with the error message.

12 replies

•Created by NightFuries on 1/10/2025 in #❓・help

How to use NuxtErrorBoundary properly??

NuxtErrorBoundary is kinda finicky, in all the times I've tried to use it. It seems you always have to render a component to work.

12 replies

•Created by NightFuries on 1/10/2025 in #❓・help

How to use NuxtErrorBoundary properly??

@kapa.ai

12 replies

•Created by NightFuries on 1/10/2025 in #❓・help

How to use NuxtErrorBoundary properly??

I don't want a fatal error. I want the error component to show up

12 replies

•Created by NightFuries on 1/3/2025 in #❓・help

Import a list of images from public folder

Yess this works brilliantly! Nuxt is great

14 replies

•Created by NightFuries on 1/3/2025 in #❓・help

Import a list of images from public folder

So we are feeding the images into a library, not to the image tag. The import option is

import sprite1 from '/images/1.png';
import sprite2 from '/images/2.png';
import sprite3 from '/images/3.png';
import sprite4 from '/images/4.png';
import sprite5 from '/images/5.png';
// ...

// and we also have separate sprite for mobiles (smaller versions)
import spriteXS1 from '/xs-images/1.png';
import spriteXS2 from '/xs-images/2.png';
import spriteXS3 from '/xs-images/3.png';
import spriteXS4 from '/xs-images/4.png';
import spriteXS5 from '/xs-images/5.png';
// ...

// and then gather them together:
const sprites = isMobileScreen() ? [spriteXS1, spriteXS2, /* ... */] : [sprite1, sprite2, /* ... */]

import sprite1 from '/images/1.png';
import sprite2 from '/images/2.png';
import sprite3 from '/images/3.png';
import sprite4 from '/images/4.png';
import sprite5 from '/images/5.png';
// ...

// and we also have separate sprite for mobiles (smaller versions)
import spriteXS1 from '/xs-images/1.png';
import spriteXS2 from '/xs-images/2.png';
import spriteXS3 from '/xs-images/3.png';
import spriteXS4 from '/xs-images/4.png';
import spriteXS5 from '/xs-images/5.png';
// ...

// and then gather them together:
const sprites = isMobileScreen() ? [spriteXS1, spriteXS2, /* ... */] : [sprite1, sprite2, /* ... */]

Am I making sense here? Is there a better way?

14 replies

•Created by NightFuries on 1/3/2025 in #❓・help

Import a list of images from public folder

I am using matter.js. You can find that at https://ichack.org in the right box. So we have 7 svg images in the public directory and we are executing the matter.js code in the client, i.e. inside onMounted callback. The (very horrible) code to add images looks like this:

const config = useRuntimeConfig();
const urlPrefix = config.public.URLPrefix;
const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `${urlPrefix}/images/${s}.png`);
for (const sprite of sprites) {
  Composite.add(
    engine.world,
    Bodies.rectangle(Math.min(75 + offs, width - 75), 50, 100, 100, {
      render: {
        sprite: {
          texture: sprite, // <-- added here
          xScale: 1,
          yScale: 1
        }
      }
    })
  );  
}

const config = useRuntimeConfig();
const urlPrefix = config.public.URLPrefix;
const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `${urlPrefix}/images/${s}.png`);
for (const sprite of sprites) {
  Composite.add(
    engine.world,
    Bodies.rectangle(Math.min(75 + offs, width - 75), 50, 100, 100, {
      render: {
        sprite: {
          texture: sprite, // <-- added here
          xScale: 1,
          yScale: 1
        }
      }
    })
  );  
}

The problem here is, we can't use do:

const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `/images/${s}.png`);

const sprites = ['1', '2', '3', '4', '5', '6', '7'].map(s => `/images/${s}.png`);

14 replies