`<PlusParallelPage />`

Component to use for rendering a parallel page. Feel free to read Parallel Routes to get started.

Usage

layouts/default.vue

<template>
  <div>
    <PlusParallelPage name="foo" />
    <slot />
  </div>
</template>

Fallback to render a not-found slot when the parallel page is not found.

<PlusParallelPage name="foo" />
  <template #not-found>
    <div>Not Found</div>
  </template>
</PlusParallelPage>

For details on how fallback works, please refer to Fallback Mechanism.

Fallback to render an index slot when the parallel page is not found on initial render.

<PlusParallelPage name="foo" />
  <template #index>
    <div>Index</div>
  </template>
</PlusParallelPage>

Please note that if the not-found slot is also definded in the parallel page, it will be used instead of the fallback index.

Add a hide-fallback prop to hide the parallel page when the fallback is triggered.

<PlusParallelPage name="foo" hide-fallback />

{
  // Unique name of the parallel router
  name: string

  // Disable rendering if fallback fail
  hideFallback?: boolean
}

{
  'not-found': () => any
  'index': () => any
}