amazonaffected Posts - Answer Overflow

amazonaffected

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

[resolved] Why using await inside composables cause them to break?

I believe my issue is similar to this https://discord.com/channels/473401852243869706/1141010505482379265 My original use case involved combining multiple composables, in which some composables depend on a value from others which I'd like to await to make sure data is rendered server side. I narrowed the issue to this: /app.vue

<script setup lang="ts">
provide(/* key */ 'message', /* value */ 'hello!')
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<script setup lang="ts">
provide(/* key */ 'message', /* value */ 'hello!')
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

/composables/useMessage.ts

export const useMessage = async () => {
  await Promise.resolve()
  const message = inject('message', 'default-hello!')
  return computed(() => message)
}

export const useMessage = async () => {
  await Promise.resolve()
  const message = inject('message', 'default-hello!')
  return computed(() => message)
}

/pages/index.vue

<script setup lang="ts">
const message = await useMessage()
</script>

<template>
  <div>
    <pre dir="ltr">{{ JSON.stringify({ message }, null, 2) }}</pre>
  </div>
</template>

<script setup lang="ts">
const message = await useMessage()
</script>

<template>
  <div>
    <pre dir="ltr">{{ JSON.stringify({ message }, null, 2) }}</pre>
  </div>
</template>

Running the app with the above code causes: * a WARN [Vue warn]: inject() can only be used inside setup() or functional components. * The value of 'message' is undefined Now, if I omit the await Promise.resolve() line from the composable. Everything works as expected including the value of 'message' being 'hello!'. Could you explain why does this happen? I can't make sense of it, because in my understanding this shouldn't be different than a synchronous statement.

7 replies

NNuxt

•Created by amazonaffected on 10/18/2024 in #❓・help

[resolved] How would you implement showing a success message after posting a form?

I have this use case: 1. User navigate to /books/create which displays a form to create a book 2. User fills the from and submits the form 3. In case of a successful submit, the user gets redirected to /books/:id and a success message is shown at the top. Now, I'm not sure how to show the success message and make sure it's only shown once. E.g. it shouldn't appear again when page is refreshed. I'm thinking about using sessionStorage or just simply redirect to /books/:id?success=true and then somehow omit the success query param. What do you think? Are there existing solutions that solve this problem?

7 replies

NNuxt

•Created by amazonaffected on 10/15/2024 in #❓・help

Nuxt-auth causing 500 Server Error due to invalid url passed to `new URL`.

What is the callbackUrl property of a SessionRequired error in nuxt-auth supposed to hold? See here: https://github.com/sidebase/nuxt-auth/blob/734953f89bd19192540452d9e0fbb225d01b28c3/src/runtime/middleware/auth.ts#L99

  if (authConfig.provider.type === 'authjs') {
    const signInOptions: Parameters<typeof signIn>[1] = { error: 'SessionRequired', callbackUrl: determineCallbackUrl(authConfig, () => to.fullPath) }
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-ignore This is valid for a backend-type of `authjs`, where sign-in accepts a provider as a first argument
    return signIn(undefined, signInOptions) as ReturnType<typeof navigateToAuthPages>
  }

  if (authConfig.provider.type === 'authjs') {
    const signInOptions: Parameters<typeof signIn>[1] = { error: 'SessionRequired', callbackUrl: determineCallbackUrl(authConfig, () => to.fullPath) }
    // eslint-disable-next-line ts/ban-ts-comment
    // @ts-ignore This is valid for a backend-type of `authjs`, where sign-in accepts a provider as a first argument
    return signIn(undefined, signInOptions) as ReturnType<typeof navigateToAuthPages>
  }

I'm asking because this causing me 500 errors, because the final URL is invalid when passed to new URL. Basically, when I visit http://localhost:3000/welcome and /welcome is protected. The value of callbackUrl is determiend to be "/welcome" (which is the exact same value as to.fullPath, actually it is taken from it). So, I tried to manually set it to include the hostname and proto (e.g. "http://localhost:3000/welcome") but then it causes an infinite redirect to the same page. I've already tried setting up the correct env variables and baseURL but to no avail. The server always throws a 500 Error due to invalid value passed to new URL, but then somehow the client doesn't have this error and redirect to the auth page. More context: * using authjs * using Keycloak provider (only provider). * Already added NUXT_AUTH_ORIGIN=http://localhost:3000 * Already tried with and without baseURL

6 replies

NNuxt

•Created by amazonaffected on 10/15/2024 in #❓・help

How to get the error / stack trace causing the 500 errors when pre-rendering?

1 replies

NNuxt

•Created by amazonaffected on 10/3/2024 in #❓・help

Prisma Studio asks to be installed in Nuxt DevTools with each reload?

Hello, I installed the nuxt prisma module and now every time I make changes to code it asks me:

Do you want to view and edit your data by installing Prisma Studio in Nuxt DevTools?

Do you want to view and edit your data by installing Prisma Studio in Nuxt DevTools?

And it doesn't seem to remember my previous answer to "Y" yes install. Is there a configuration I can set so that it automatically installs and never ask me?

3 replies

Gaming

Programming