Composables

useModalRouter

Get the global modal router object. Returns a ModalRouter object.

You can also access it by $modalRouter in <template> or useNuxtApp.

useParallelRouter

Gets the current component's parent parallel router and returns a ParallelRouter object. If the copmonent is inside global router, it will return undefined.

This composables calls inject so that it can only be used inside setup or functional components.
pages/@foo/TheFoo.vue
<script setup>
const parentRouter = useParallelRouter()
console.log(parentRouter.currentRoute.value.fullPath)
</script>

useParallelRoute

Gets the current component's parent parallel router's route and returns a RouteLocationNormalizedLoaded object. If the copmonent is inside global router, it will return undefined.

This composables calls inject so that it can only be used inside setup or functional components.
pages/@foo/TheFoo.vue
<script setup>
const parentRouter = useParallelRoute()
console.log(parentRouter.currentRoute.value.fullPath)
</script>

useParentRouterName

Gets the current component's parent parallel router name in the MaybeRef<string> type. If the copmonent is inside the global router, it will return undefined.

This composables calls inject so that it can only be used inside setup or functional components.
pages/@foo/TheFoo.vue
<script setup>
const parentRouterName = useParentRouterName()
console.log(unref(parentRouterName)) // 'foo'
</script>

useParallelRouters

Get all of the parallel routers in the application. Returns a Record of ParallelRouter objects, each identified by a unique router name key.

You can also access it by $parallelRouters in <template> or useNuxtApp.

useParallelRoutes

Get all of the parallel routers' routes in the application. Returns a Record of RouteLocationNormalizedLoaded objects, each identified by a unique router name key.

You can also access it by using $parallelRoutes in <template> or useNuxtApp.

useParentRouter

Same as useParallelRouter but returns the global useRouter() if the component is inside the global router.

useParentRoute

Same as useParallelRoute but returns the global useRoute() if the component is inside the global router.

resolveParallelRoutersByPath

resolveParallelRoutersByPath(path: string): ParallelRouter[]

This function searches through all parallel routers and filters out those that contain the specified path.

It's typically used in a global router context, for instance, in a catch-all path to determine whether to redirect to an error page when no parallel router contains the given path.

pages/[...all].vue
<script setup>
const routers = resolveParallelRoutersByPath(useRoute().path)

if (routers.length === 0) {
  showError(`Path not found: ${useRoute().path}`)
<script>

In this example, resolveParallelRoutersByPath is used to find parallel routers that has the current route's path. If no router is found, an error is shown indicating that the path was not found.