Outlet

Renders the nested child routes of the currently opened route. Place it inside a view whose RouteView was created with children.

Example

export const RoutesView = createRoutesView({
  routes: [
    createRouteView({
      route: routes.profile,
      view: Profile, // renders <Outlet /> somewhere inside
      children: [createRouteView({ route: routes.settings, view: Settings })],
    }),
  ],
});

<!-- Profile.vue -->
<script setup lang="ts">
import { Outlet } from '@effector/router-vue';
</script>

<template>
  <div>Profile</div>
  <!-- renders Settings when profile is opened and settings is active -->
  <Outlet />
</template>

Outlet is recursive: every selected child provides its own children to the next outlet, with no depth limit. When no child is active it renders the loading of a pending child, then the child it rendered before while one is still pending, then the closed of a closed one — see route view fallbacks — and nothing when none of those apply.