Viridian Posts - Answer Overflow

Viridian

Explore posts from servers

•Created by Viridian on 4/21/2025 in #❓・help

Layout transitions not working between pages

I have a number of pages (index.vue, login.vue and register.vue), as well as a layout auth.vue. I have a transition between login.vue and register.vue which works:

<script lang="ts" setup>
definePageMeta({
  layout: 'auth',

  layoutTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },

  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  }
})
</script>

<template>
  <div>
    <Login/>
  </div>
</template>

<style scoped>
.slide-right-enter-active {
  transition: all 0.6s;
}
.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(-150%);
  opacity: 0;
}

.slide-right-leave-active {
  transition: all 0.6s;
}
</style>

<script lang="ts" setup>
definePageMeta({
  layout: 'auth',

  layoutTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },

  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  }
})
</script>

<template>
  <div>
    <Login/>
  </div>
</template>

<style scoped>
.slide-right-enter-active {
  transition: all 0.6s;
}
.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(-150%);
  opacity: 0;
}

.slide-right-leave-active {
  transition: all 0.6s;
}
</style>

and

<script lang="ts" setup>
definePageMeta({
  layout: 'auth',

  layoutTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },
  
  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  }
})
</script>

<template>
  <div>
    <SignUp />
  </div>
</template>

<style scoped>
.slide-right-enter-active {
  transition: all 0.6s;
}
.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(-150%);
  opacity: 0;
}

.slide-right-leave-active {
  transition: all 0.6s;
}
</style>

<script lang="ts" setup>
definePageMeta({
  layout: 'auth',

  layoutTransition: {
    name: 'slide-right',
    mode: 'out-in'
  },
  
  pageTransition: {
    name: 'slide-right',
    mode: 'out-in'
  }
})
</script>

<template>
  <div>
    <SignUp />
  </div>
</template>

<style scoped>
.slide-right-enter-active {
  transition: all 0.6s;
}
.slide-right-enter-from,
.slide-right-leave-to {
  transform: translateX(-150%);
  opacity: 0;
}

.slide-right-leave-active {
  transition: all 0.6s;
}
</style>

I'm trying to implement a similar transition between index.vue and either register.vue or login.vue. However, it doesn't seem to be working:

<script setup lang="ts">
definePageMeta({

  layoutTransition: {
    name: 'slide-left',
    mode: 'out-in'
  },

  pageTransition: {
    name: 'slide-left',
    mode: 'out-in'
  }
})
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease-in-out;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
</style>

<script setup lang="ts">
definePageMeta({

  layoutTransition: {
    name: 'slide-left',
    mode: 'out-in'
  },

  pageTransition: {
    name: 'slide-left',
    mode: 'out-in'
  }
})
</script>

<style>
.slide-left-enter-active,
.slide-left-leave-active {
  transition: all 0.3s ease-in-out;
}

.slide-left-enter-from,
.slide-left-leave-to {
  transform: translateX(-100%);
}
</style>

Why is this? I thought I needed a layout transition since index.vue uses the default layout, and login.vue and register.vue use the auth layout.

36 replies

NNuxt

•Created by Viridian on 4/20/2025 in #❓・help

Tailwind classes not applying while using Nuxt UI v3

I'm running into some strange behaviors with Nuxt, using NuxtUI v3. I followed the installation guide on the Nuxt site (including wrapping <NuxtPage> in <UApp>). Using components like <UCard> works and displays, but trying to apply classes like class="font-bold" doesn't do anything. I also tried adding a font in my theme, but trying to apply those doesn't result in anything either.

export default defineNuxtConfig({
  // https://nuxt.com/modules
  modules: [
    '@nuxthub/core',
    '@nuxt/eslint',
    '@nuxt/content',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
    'nuxt-auth-utils',
  ],

  css: ['~/assets/css/main.css'],

export default defineNuxtConfig({
  // https://nuxt.com/modules
  modules: [
    '@nuxthub/core',
    '@nuxt/eslint',
    '@nuxt/content',
    '@nuxt/fonts',
    '@nuxt/icon',
    '@nuxt/image',
    '@nuxt/scripts',
    '@nuxt/test-utils',
    '@nuxt/ui',
    'nuxt-auth-utils',
  ],

  css: ['~/assets/css/main.css'],

/* app/assets/css/main.css */

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
    --font-site: 'Outfit', sans-serif;
}

/* app/assets/css/main.css */

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
    --font-site: 'Outfit', sans-serif;
}

I'm not sure what I'm doing wrong, haha

13 replies

NNuxt

•Created by Viridian on 4/11/2025 in #❓・help

Nuxt errors after refreshing package-lock.json (A composable that requires access...)

I'm getting the following errors after refreshing my package-lock.json/updating some packages: Error: [nuxt] A composable that requires access to the Nuxt instance was called outside of a plugin, Nuxt hook, Nuxt middleware, or Vue setup function. This is probably not a Nuxt bug. Find out more at https://nuxt.com/docs/guide/concepts/auto-imports#vue-and-nuxt-composables. ⁃ at useNuxtApp (C:/Users/.../Documents/GitHub/es-nuxt/nodemodules/.pnpm/[email protected]@[email protected]_@[email protected][email protected][email protected][email protected]tgdyf4tahfh2p7d7ptjabx7uva/node_modules/nuxt/dist/app/nuxt.js:248:13) ⁃ at useRuntimeConfig (C:/Users/.../Documents/GitHub/es-nuxt/nodemodules/.pnpm/[email protected]@[email protected]_@[email protected][email protected][email protected][email protected]tgdyf4tahfh2p7d7ptjabx7uva/node_modules/nuxt/dist/app/nuxt.js:258:10) ⁃ at useLocalMarket (C:/Users/.../Documents/GitHub/es-nuxt/utils/localMarket.ts:3:60) 1 ┃ export default function useLocalMarket() { 2 ┃ const config = useRuntimeConfig().public ❯ 3 ┃ 4 ┃ const localMarket = config.localMarket 5 ┃ 6 ┃ const isLocalMarket = (country: string) => { 7 ┃ return localMarket.toLowerCase() === country.toLowerCase() 8 ┃ } 9 ┃ 10 ┃ const titlePostfix = () => { 11 ┃ let postfixMapping = new Map<string, string>() useLocalMarket is a composable: export default function useLocalMarket() { const config = useRuntimeConfig().public const localMarket = config.localMarket const isLocalMarket = (country: string) => { return localMarket.toLowerCase() === country.toLowerCase() } const titlePostfix = () => { let postfixMapping = new Map<string, string>() postfixMapping.set('be', 'België') postfixMapping.set('nl', 'Nederland') postfixMapping.set('flags', '') return postfixMapping.get(localMarket.toLowerCase()) } return { localMarket, isLocalMarket, titlePostfix } }

5 replies

NNuxt

•Created by Viridian on 4/9/2025 in #❓・help

Cannot find 'nuxt.mjs' during build in Dockerfile

Hey all, I'm trying to build my Nuxt application via Docker, but my Dockerfile is giving me the following error:

0.472 > nuxt-app@ build /app
0.472 > nuxt build
0.472
0.489 node:internal/modules/cjs/loader:1228
0.489   throw err;
0.489   ^
0.489
0.489 Error: Cannot find module '/app/node_modules/nuxt/bin/nuxt.mjs'
0.489     at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)
0.489     at Function._load (node:internal/modules/cjs/loader:1055:27)
0.489     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
0.489     at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
0.489     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
0.489     at node:internal/main/run_main_module:36:49 {
0.489   code: 'MODULE_NOT_FOUND',
0.489   requireStack: []
0.489 }
0.489
0.489 Node.js v22.14.0
0.499  ELIFECYCLE  Command failed with exit code 1.

0.472 > nuxt-app@ build /app
0.472 > nuxt build
0.472
0.489 node:internal/modules/cjs/loader:1228
0.489   throw err;
0.489   ^
0.489
0.489 Error: Cannot find module '/app/node_modules/nuxt/bin/nuxt.mjs'
0.489     at Function._resolveFilename (node:internal/modules/cjs/loader:1225:15)
0.489     at Function._load (node:internal/modules/cjs/loader:1055:27)
0.489     at TracingChannel.traceSync (node:diagnostics_channel:322:14)
0.489     at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
0.489     at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5)
0.489     at node:internal/main/run_main_module:36:49 {
0.489   code: 'MODULE_NOT_FOUND',
0.489   requireStack: []
0.489 }
0.489
0.489 Node.js v22.14.0
0.499  ELIFECYCLE  Command failed with exit code 1.

This is my Dockerfile:

ARG NODE_VERSION=22.14.0

FROM node:${NODE_VERSION}-slim AS build

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

WORKDIR /app

COPY ./package.json /app/
COPY ./pnpm-lock.yaml /app/

RUN pnpm install --shamefully-hoist

COPY . ./

RUN pnpm run build

FROM node:${NODE_VERSION}-slim

WORKDIR /app

COPY --from=build /app/.output ./

ENV HOST=0.0.0.0 NODE_ENV=production
ENV NODE_ENV=production

EXPOSE 3000

CMD ["node", "/app/server/index.mjs"]

ARG NODE_VERSION=22.14.0

FROM node:${NODE_VERSION}-slim AS build

ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable

WORKDIR /app

COPY ./package.json /app/
COPY ./pnpm-lock.yaml /app/

RUN pnpm install --shamefully-hoist

COPY . ./

RUN pnpm run build

FROM node:${NODE_VERSION}-slim

WORKDIR /app

COPY --from=build /app/.output ./

ENV HOST=0.0.0.0 NODE_ENV=production
ENV NODE_ENV=production

EXPOSE 3000

CMD ["node", "/app/server/index.mjs"]

Building locally seems to work just fine, so I'm not sure what's causing this issue. Any help would be appreciated!

5 replies

NNuxt

•Created by Viridian on 1/29/2025 in #❓・help

<USelect> in #trailing slot in <UInput> does not appear clickable

I'm trying to make this work:

<UFormGroup :label="labels.daily" size="lg" :ui="{ label: { base: 'font-semibold text-md' } }">
      <UInput
        type="number"
        step="0.01"
        placeholder="3.14"
        input-class="no-spinner"
        :model-value="rateValue"
        @update:model-value="updateRateValue"
        icon="i-material-symbols-electric-bolt"
      >
        <template #trailing>
          <USelect
            v-model="selectedPeriod"
            :options="periodOptions"
            size="xs"
            :ui="{ base: 'w-28' }"
          />
        </template>
      </UInput>
    </UFormGroup>

<UFormGroup :label="labels.daily" size="lg" :ui="{ label: { base: 'font-semibold text-md' } }">
      <UInput
        type="number"
        step="0.01"
        placeholder="3.14"
        input-class="no-spinner"
        :model-value="rateValue"
        @update:model-value="updateRateValue"
        icon="i-material-symbols-electric-bolt"
      >
        <template #trailing>
          <USelect
            v-model="selectedPeriod"
            :options="periodOptions"
            size="xs"
            :ui="{ base: 'w-28' }"
          />
        </template>
      </UInput>
    </UFormGroup>

However, the <USelect> inside the UInput's trailing slot doesn't seem to be clickable and doesn't activate a dropdown when clicked. Instead, the click seems to propagate through to the button. I tried @click.prevent and @click.stop, but they didn't seem to work. What else am I missing?

16 replies

NNuxt

•Created by Viridian on 12/4/2024 in #❓・help

Strange error when trying to run dev mode on a fresh install

For some reason, I seem to be getting this error when trying to run dev mode on my fresh Nuxt installation. I only installed nuxthub:

 ERROR  The requested module './dev2.mjs' does not provide an export named 'createNuxtDevServer'              17:35:40

  import { createNuxtDevServer } from './dev2.mjs';
  ^^^^^^^^^^^^^^^^^^^
  SyntaxError: The requested module './dev2.mjs' does not provide an export named 'createNuxtDevServer'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:254:5)
  at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:482:26)
  at async runCommand$1 (/C:/Users/Moos/Documents/GitHub/portfolio/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.f8a4d1b7.mjs:1637:28)
  at async runMain$1 (/C:/Users/Moos/Documents/GitHub/portfolio/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.f8a4d1b7.mjs:1777:7)



 ERROR  The requested module './dev2.mjs' does not provide an export named 'createNuxtDevServer'

 ERROR  The requested module './dev2.mjs' does not provide an export named 'createNuxtDevServer'              17:35:40

  import { createNuxtDevServer } from './dev2.mjs';
  ^^^^^^^^^^^^^^^^^^^
  SyntaxError: The requested module './dev2.mjs' does not provide an export named 'createNuxtDevServer'
  at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21)
  at async ModuleJob.run (node:internal/modules/esm/module_job:254:5)
  at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:482:26)
  at async runCommand$1 (/C:/Users/Moos/Documents/GitHub/portfolio/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.f8a4d1b7.mjs:1637:28)
  at async runMain$1 (/C:/Users/Moos/Documents/GitHub/portfolio/node_modules/.pnpm/[email protected]/node_modules/nuxi/dist/shared/nuxi.f8a4d1b7.mjs:1777:7)



 ERROR  The requested module './dev2.mjs' does not provide an export named 'createNuxtDevServer'

Any idea what is going wrong here? It seems strange.

22 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

NuxtUI Tooltip/Popover not rendering on live website

10 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

I'm using a <USelect> with the following options:

const businessTypes = [{
  name: 'Particulier',
  value: 0,
}, {
  name: 'Zakelijk',
  value: 1,
}]

<UFormGroup label="Koop je particulier of zakelijk?" name="business" size="lg">
          <USelect v-model="form.business" :options="businessTypes" option-attribute="name" />
        </UFormGroup>

const businessTypes = [{
  name: 'Particulier',
  value: 0,
}, {
  name: 'Zakelijk',
  value: 1,
}]

<UFormGroup label="Koop je particulier of zakelijk?" name="business" size="lg">
          <USelect v-model="form.business" :options="businessTypes" option-attribute="name" />
        </UFormGroup>

However, it seems that modelValue turns into a string "0" or "1" instead of numbers as I expect them to be. Is there a way to solve this?

66 replies

NNuxt

•Created by Viridian on 11/5/2024 in #❓・help

Label templates for <UInput> elements

Hey all, I'm trying to add a <UTooltip> to one of my <UInput> elements. However, I'm not sure how to approach this. Is there a way to, for example, override the label using a template to add my own elements, or is this not possible? Is there another approach? Thanks in advance!

19 replies

NNuxt

•Created by Viridian on 9/2/2024 in #❓・help

Retrieve error status code and display error on page

I'm trying to get some error handling logic to work. I have this pipeline:

export default defineEventHandler((event) => pipe(
  parseEvent(event),
  Effect.flatMap(body => pipe(
    handlePlayerSearchEvent(body),
    Effect.provide(playerSearchLive),
    Effect.provideService(RegionService, RegionService.Live(body.region)),
  )),
  Effect.tapError(e => Effect.logDebug('Error', e._tag === 'ResponseError' ? e.response.status : e)),
  Effect.catchTags({
    ResponseError: (e) => Effect.fail(createError({
      statusCode: e.response.status,
      statusText: "Something went wrong, please try again later."
    }))
  }),
  Logger.withMinimumLogLevel(LogLevel.Debug),
  Effect.runPromise,
))

export default defineEventHandler((event) => pipe(
  parseEvent(event),
  Effect.flatMap(body => pipe(
    handlePlayerSearchEvent(body),
    Effect.provide(playerSearchLive),
    Effect.provideService(RegionService, RegionService.Live(body.region)),
  )),
  Effect.tapError(e => Effect.logDebug('Error', e._tag === 'ResponseError' ? e.response.status : e)),
  Effect.catchTags({
    ResponseError: (e) => Effect.fail(createError({
      statusCode: e.response.status,
      statusText: "Something went wrong, please try again later."
    }))
  }),
  Logger.withMinimumLogLevel(LogLevel.Debug),
  Effect.runPromise,
))

Which logs the following:

timestamp=2024-09-02T13:56:45.395Z level=DEBUG fiber=#1 message=Error message=404

 ERROR  [nuxt] [request error] [unhandled] [500] An error has occurred
  at createError (/C:/Users/Moos/Documents/GitHub/league-checker/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:78:15)
  at Object.ResponseError (C:\Users\Moos\Documents\GitHub\league-checker\server\api\account.post.ts:73:1)
  at e (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core-effect.ts:312:28)
  at cause (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core.ts:632:41)

timestamp=2024-09-02T13:56:45.395Z level=DEBUG fiber=#1 message=Error message=404

 ERROR  [nuxt] [request error] [unhandled] [500] An error has occurred
  at createError (/C:/Users/Moos/Documents/GitHub/league-checker/node_modules/.pnpm/[email protected]/node_modules/h3/dist/index.mjs:78:15)
  at Object.ResponseError (C:\Users\Moos\Documents\GitHub\league-checker\server\api\account.post.ts:73:1)
  at e (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core-effect.ts:312:28)
  at cause (C:\Users\Moos\Documents\GitHub\league-checker\node_modules\.pnpm\[email protected]\node_modules\effect\src\internal\core.ts:632:41)

So it's seemingly creating the Nuxt error, but the message or status code doesn't seem to match. This is the fetch function in my page that calls this event handler:

const fetchData = async () => {
  loading.value = true;
  if (search.value !== "") {
    const data = await $fetch<PlayerSearchResult>("/api/account", {
      method: "post",
      body: { player: search.value, region: region.value },
    });

    smnr.value = data;

    search.value = "";

    loading.value = false;
  }
};

const fetchData = async () => {
  loading.value = true;
  if (search.value !== "") {
    const data = await $fetch<PlayerSearchResult>("/api/account", {
      method: "post",
      body: { player: search.value, region: region.value },
    });

    smnr.value = data;

    search.value = "";

    loading.value = false;
  }
};

Ideally I want to be able to know when the error was created and display a custom error message to handle it on the front-end. This might have a pretty simple answer, but I'm not really sure how to approach this

3 replies

NNuxt

•Created by Viridian on 9/1/2024 in #❓・help

Expand tooltip content (NuxtUI)

4 replies

NNuxt

•Created by Viridian on 8/23/2024 in #❓・help

Unable to get logs from Event pipe in defineEventHandler

Hey y'all, interesting question. I'm using Effect in order to build my pipelines for events that are handled by Nuxt's server, like this:

const parseBody = (event: H3Event<EventHandlerRequest>) => pipe(
  Effect.tryPromise({
    try: (): Promise<unknown> => readBody(event, { strict: true }),
    catch: () => new InvalidBodyError("Invalid body format"),
  }),
)

const handlePlayerSearchEvent = (event: H3Event<EventHandlerRequest>): Effect.Effect<PlayerSearchResult, ParseError | HttpClientError, never> => {
  return Effect.Do.pipe(
    Effect.bind('body', () => parseBody(event).pipe(Effect.tap(Console.log), S.decodeUnknown(SearchPlayerEvent))),
    Effect.let('region', ({ body }) => matchRegion(body.region)),
    Effect.let('name', ({ body }) => pipe(splitByHash(body), Array.headNonEmpty)),
    Effect.let('tagLine', ({ body, region }) => pipe(
      splitByHash(body),
      Array.get(1),
      Option.getOrElse(() => region)
    )),

    Effect.bind('account', ({ region, name, tagLine }) =>
      fetchEffect(RiotAccountResponseSchema)
        (`https://${region}.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${name}/${tagLine}`)),

    Effect.bind('summoner', ({ account, region }) =>
      fetchEffect(SummonerDataSchema)
        (`https://${region}.api.riotgames.com/lol/summoner/v4/summoners/by-puuid/${account.puuid}`)),

    Effect.bind('matchIds', ({ account, region }) =>
      fetchEffect(S.Array(S.String))
        (`https://${region}.api.riotgames.com/lol/match/v5/matches/by-puuid/${account.puuid}/ids?start=0&count=20`)),

    Effect.bind('matches', ({ matchIds, region }) => pipe(
      matchIds,
      Array.map(matchId => fetchEffect(RiotMatchSchema)(`https://${region}.api.riotgames.com/lol/match/v5/matches/${matchId}`)),
      (a) => Effect.all(a, { concurrency: 5, batching: true })
    )
    ),

    Effect.map(({ summoner, account, matches }) => ({ summoner, account, matches }))
  );
}

export default defineEventHandler(async (event) => Effect.runPromise(handlePlayerSearchEvent(event)));

const parseBody = (event: H3Event<EventHandlerRequest>) => pipe(
  Effect.tryPromise({
    try: (): Promise<unknown> => readBody(event, { strict: true }),
    catch: () => new InvalidBodyError("Invalid body format"),
  }),
)

const handlePlayerSearchEvent = (event: H3Event<EventHandlerRequest>): Effect.Effect<PlayerSearchResult, ParseError | HttpClientError, never> => {
  return Effect.Do.pipe(
    Effect.bind('body', () => parseBody(event).pipe(Effect.tap(Console.log), S.decodeUnknown(SearchPlayerEvent))),
    Effect.let('region', ({ body }) => matchRegion(body.region)),
    Effect.let('name', ({ body }) => pipe(splitByHash(body), Array.headNonEmpty)),
    Effect.let('tagLine', ({ body, region }) => pipe(
      splitByHash(body),
      Array.get(1),
      Option.getOrElse(() => region)
    )),

    Effect.bind('account', ({ region, name, tagLine }) =>
      fetchEffect(RiotAccountResponseSchema)
        (`https://${region}.api.riotgames.com/riot/account/v1/accounts/by-riot-id/${name}/${tagLine}`)),

    Effect.bind('summoner', ({ account, region }) =>
      fetchEffect(SummonerDataSchema)
        (`https://${region}.api.riotgames.com/lol/summoner/v4/summoners/by-puuid/${account.puuid}`)),

    Effect.bind('matchIds', ({ account, region }) =>
      fetchEffect(S.Array(S.String))
        (`https://${region}.api.riotgames.com/lol/match/v5/matches/by-puuid/${account.puuid}/ids?start=0&count=20`)),

    Effect.bind('matches', ({ matchIds, region }) => pipe(
      matchIds,
      Array.map(matchId => fetchEffect(RiotMatchSchema)(`https://${region}.api.riotgames.com/lol/match/v5/matches/${matchId}`)),
      (a) => Effect.all(a, { concurrency: 5, batching: true })
    )
    ),

    Effect.map(({ summoner, account, matches }) => ({ summoner, account, matches }))
  );
}

export default defineEventHandler(async (event) => Effect.runPromise(handlePlayerSearchEvent(event)));

However, for some reason, trying to log errors from the event pipe does not result in anything being logged. I'm encountering a parse error during decoding and want to log what the result of parseBody is, but it's not printing anything. I'm not entirely sure why this is, because logging anywhere else but on the incoming itself seems to work fine.

2 replies

NNuxt

•Created by Viridian on 8/22/2024 in #❓・help

Use incoming event type in defineEventHandler

I want to run some custom logic using a function that takes the event from an event handler in a .post.ts file:

export default defineEventHandler(async (event) => {
  const handledEvent = handlePlayerSearchEvent(event);

export default defineEventHandler(async (event) => {
  const handledEvent = handlePlayerSearchEvent(event);

However, I want to use the type of the event in my function parameter so it doesn't error. What type do I use? When I hover over it, I get (parameter) event: H3Event<EventHandlerRequest> but I can't seem to import that into my own code, and I'm also not sure if that's the type I want to be using. Is there an easier type that would work for this provided by Nuxt? I basically just want to be able to get the event typed properly, passed into that function and then parsed with readValidatedBody, etc.

9 replies

NNuxt

•Created by Viridian on 6/12/2024 in #❓・help

DeprecationWarning when building with nuxt-icon

7 replies

NNuxt

•Created by Viridian on 6/11/2024 in #❓・help

Property 'body' does not exist on type '{}'

3 replies

TtRPC

•Created by Viridian on 9/13/2023 in #❓-help

TS(2742) error when trying to create client

16 replies

Gaming

Programming