Move rejection component

src/components/routerView.browser.spec.ts

@@ -644,7 +644,7 @@ test('Renders the rejection component when the rejection is not registered on th
   const myRejection = createRejection({
     type: 'myRejection',
     component: {
-      template: rejectionText
+      template: rejectionText,
     },
   })
 
@@ -678,4 +678,4 @@ test('Renders the rejection component when the rejection is not registered on th
   await flushPromises()
 
   expect(wrapper.text()).toBe(rejectionText)
-})
+})

src/components/routerView.ts

@@ -3,7 +3,7 @@ import { createUseRejection } from '@/compositions/useRejection'
 import { createUseRoute } from '@/compositions/useRoute'
 import { createUseRouter } from '@/compositions/useRouter'
 import { createUseRouterDepth } from '@/compositions/useRouterDepth'
-import { RouterRejection } from '@/types/rejection'
+import { isRejection, RouterRejection } from '@/types/rejection'
 import { RouterRoute } from '@/types/routerRoute'
 import { Router } from '@/types/router'
 import { Component, computed, defineComponent, EmitsOptions, h, InjectionKey, onServerPrefetch, SetupContext, SlotsType, UnwrapRef, VNode } from 'vue'
@@ -46,8 +46,8 @@ export function createRouterView<TRouter extends Router>(routerKey: InjectionKey
         return null
       }
 
-      if (rejection.value) {
-        return rejection.value.component
+      if (isRejection(rejection.value) && !!rejection.value.route.matched.component) {
+        return rejection.value.route.matched.component
       }
 
       const match = route.matches.at(depth)

src/services/createRejection.ts

@@ -11,13 +11,12 @@ export function createRejection<TType extends string>(options: {
   component?: Component,
 }): Rejection<TType> & RejectionHooks<TType> & RouteSetTitle
 
-export function createRejection(options: { type: string, component?: Component }): Rejection {
+export function createRejection({ type, component }: { type: string, component?: Component }): Rejection {
   const { store, ...hooks } = createRejectionHooks()
 
-  const component = markRaw(options.component ?? genericRejection(options.type))
   const route = createRoute({
-    name: options.type,
-    component,
+    name: type,
+    component: markRaw(component ?? genericRejection(type)),
   })
 
   const { setTitle } = route
@@ -29,8 +28,7 @@ export function createRejection(options: { type: string, component?: Component }
   } satisfies RejectionInternal
 
   const rejection = {
-    type: options.type,
-    component,
+    type,
     setTitle,
     ...hooks,
     ...internal,

src/types/rejection.ts

@@ -1,4 +1,4 @@
-import { Component, Ref } from 'vue'
+import { Ref } from 'vue'
 import { Route } from '@/types/route'
 import { Router } from '@/types/router'
 import { RouterReject } from '@/types/routerReject'
@@ -32,10 +32,6 @@ export type Rejection<TType extends string = string> = {
    * The type of rejection.
    */
   type: TType,
-  /**
-   * The component to render when the rejection occurs.
-   */
-  component: Component,
 }
 
 export type RejectionType<TRejections extends Rejections | undefined> =