I am currently working on integrating a child router-view to be displayed alongside surrounding components.
Here is an overview of my routing setup:
{
path: "/login",
name: "TheLoginView",
component: TheLoginView,
},
{
path: "/dashboard",
name: "TheDashboard",
component: () => import("@/views/TheDashboard"),
children: [
{
path: "",
name: "DashboardView",
component: () => import("@/components/dashboard/DashboardView"),
children: [
{
name: "Place Order",
path: "place-order",
component: () => import("@/views/ThePlaceOrderView"),
},
{
name: "Previous Orders",
path: "Past-orders",
component: () => import("@/components/ThePastOrders"),
},
{
name: "Account Options",
path: "account-options",
component: () => import("@/components/TheAccountOptions"),
},
],
},
],
},
The structure of my Dashboard component looks like this:
<template>
<v-app>
<DashboardAppBar />
<DashboardNavDrawer />
<DashboardView />
<DashboardFooter />
</v-app>
</template>
Currently, I am facing an issue where the DashboardView is being rendered below the navdrawer instead of beside it as expected.
Regardless of using v-app or v-content, the output remains consistent:
https://i.stack.imgur.com/YZUqI.png
Here is the current implementation of the DashboardView component:
<template>
<router-view />
</template>
I'm at a loss regarding what modifications are needed to ensure that the child router-view displays next to the drawer.