1

I'm trying to migrate a nuxt 2 app to nuxt-bridge.

In this app I frequently fetch data from an API based on URL parameters of the frontend. Like this (simplified):

  setup() {
    const { $axios, error, params } = useContext()

    const foo = useAsync(async () => {
      try {
        return await $axios.$get(`...${params.value.foo}`)
      } catch () {
        error({ statusCode: 404, message: 'Not found' })
      }
    })

    return { foo }
  }

This "tiny" limitation that useAsyncData is not available hits me pretty hard.

If I get it right, I would have to use useLazyAsyncData instead and handling pending and error states in my template. Which means I have to wrap all my current templates with something like:

<div v-if="pending">
... show something while loading ...
</div>
<div v-else-if="error">
... show error page - not even sure how to do this as my error page is based on a different layout ...
</div>
<div v-else>
... current template ...
</div>

That means:

  • I cannot properly respond with a HTTP 404 code.
  • When I finally move to nuxt3 I would have to revert all that again.

Is that correct? Is there a better way to do it?

some-user
  • 3,888
  • 5
  • 19
  • 43
  • Not sure about the actual issue but won't it be easier to migrate to Nuxt3 directly? Do you have some specific package that are only on Nuxt2 as of right now? – kissu Jul 29 '22 at 10:49
  • Valid point, but both nuxt 3 and vuetify 3 warn that they are not stable and ready for productive use. – some-user Jul 29 '22 at 10:57
  • Depends what you need/use on production. – kissu Jul 29 '22 at 15:20
  • "Stability: Unstable" (https://v3.nuxtjs.org/getting-started/migration) and "The Vuetify 3 Beta is for testing purposes only and is not intended for production applications." (https://next.vuetifyjs.com/en/getting-started/installation/) send a clear message to me. – some-user Jul 29 '22 at 18:45
  • This is not updated daily and also, it all depends on your app. So, it depends: may still be okay for your use-case. – kissu Jul 29 '22 at 18:47

2 Answers2

0

Yes, the migration path you proposed with useLazyAsyncData is correct. Another option is not using the Composition API yet and sticking to Nuxt 2's asyncData.

thisismydesign
  • 21,553
  • 9
  • 123
  • 126
0

I also got this problem. I solved this by creating <HttpError /> component like below

<script lang="ts" setup>
import { createError } from 'h3';

const { statusCode = 404, statusMessage = 'Not Found' } = defineProps<{
  statusCode: number;
  statusMessage: string;
}>();
throw createError({ statusCode, statusMessage });
</script>

and used it

<script lang="ts" setup>
import HttpError from '~/components/HttpError';
const { data, error } = useLazyAsyncData(...);
</script>
<template>
  <div>
    <HttpError v-if="error" :status-code="404" />
    <div v-else>
      ...
    </div>
  </div>
</template>
kissu
  • 40,416
  • 14
  • 65
  • 133
Chanjin Park
  • 11
  • 2