feat: add error composables from nuxt 3

playground/pages/error.vue

@@ -1,7 +1,12 @@
 <template>
-  <div />
+  <div>
+    {{ state.attr }}
+    {{ data.something }}
+  </div>
 </template>
 
 <script setup>
-throw new Error('This is a custom error')
+throw createError({ statusCode: 422, fatal: true, statusMessage: 'This is a custom error' })
+// eslint-disable-next-line no-unreachable
+const state = ref({ attr: 'Hello World' })
 </script>

src/imports/presets.ts

@@ -39,7 +39,13 @@ export const appPreset = defineUnimportPreset({
     'navigateTo',
     'abortNavigation',
     'addRouteMiddleware',
-    'useNuxt2Meta'
+    'useNuxt2Meta',
+    'clearError',
+    'createError',
+    'isNuxtError',
+    'throwError',
+    'showError',
+    'useError'
   ]
 })
 

src/runtime/app.ts

@@ -25,9 +25,11 @@ export interface VueAppCompat {
 }
 
 export interface RuntimeNuxtHooks {
-  'vue:setup': () => void
+  'app:error': (err: any) => void | Promise<void>
+  'app:error:cleared': (options: { redirect?: string }) => void | Promise<void>
   'app:mounted': (app: VueAppCompat) => void | Promise<void>
   'meta:register': (metaRenderers: any[]) => void | Promise<void>
+  'vue:setup': () => void
 }
 
 export interface NuxtAppCompat {

src/runtime/composables.ts

@@ -13,6 +13,7 @@ import { useNuxtApp } from './app'
 export { useLazyAsyncData, refreshNuxtData } from './asyncData'
 export { useLazyFetch } from './fetch'
 export { useCookie } from './cookie'
+export { clearError, createError, isNuxtError, throwError, showError, useError } from './error'
 export { useRequestHeaders, useRequestEvent } from './ssr'
 
 export * from 'vue'

src/runtime/error.ts

@@ -0,0 +1,43 @@
+import { createError as _createError, H3Error } from 'h3'
+import { toRef } from 'vue'
+import { useNuxtApp } from './app'
+
+export const useError = () => toRef(useNuxtApp().payload, 'error')
+
+export interface NuxtError extends H3Error {}
+
+export const showError = (_err: string | Error | Partial<NuxtError>) => {
+  const err = createError(_err)
+
+  try {
+    const nuxtApp = useNuxtApp()
+    nuxtApp.callHook('app:error', err)
+    const error = useError()
+    error.value = error.value || err
+  } catch {
+    throw err
+  }
+
+  return err
+}
+
+/** @deprecated Use `throw createError()` or `showError` */
+export const throwError = showError
+
+export const clearError = async (options: { redirect?: string } = {}) => {
+  const nuxtApp = useNuxtApp()
+  const error = useError()
+  nuxtApp.callHook('app:error:cleared', options)
+  if (options.redirect) {
+    await nuxtApp.$router.replace(options.redirect)
+  }
+  error.value = null
+}
+
+export const isNuxtError = (err?: string | object): err is NuxtError => !!(err && typeof err === 'object' && ('__nuxt_error' in err))
+
+export const createError = (err: string | Partial<NuxtError>): NuxtError => {
+  const _err: NuxtError = _createError(err)
+    ; (_err as any).__nuxt_error = true
+  return _err
+}

test/bridge.test.ts

@@ -43,14 +43,14 @@ describe('errors', () => {
         accept: 'application/json'
       }
     })
-    expect(res.status).toBe(500)
+    expect(res.status).toBe(422)
     const error = await res.json()
     delete error.stack
     expect(error).toMatchObject({
       description: process.env.NUXT_TEST_DEV ? expect.stringContaining('<pre>') : '',
       message: 'This is a custom error',
-      statusCode: 500,
-      statusMessage: '',
+      statusCode: 422,
+      statusMessage: 'This is a custom error',
       url: '/error'
     })
   })