Viridian Posts - Answer Overflow

Viridian

Explore posts from servers

•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