Sidebar component to render on main page (body)

Question

I am using Quasar's q-drawer to display a menu list (using q-list and q-items). Each item when clicked should render a new vue component on the body part of my page.

However, this is not the case. Clicking on the menu item renders the new vue component on the sidebar (drawer) as well.

How can I make it load on the body/main area instead of the sidebar?

Code snippet of my component (LeftSideBar):

      <q-list v-for="(menuItem, index) in menuList" :key="index" align="left">
        <q-item clickable v-ripple @click="selected = menuItem.label" active-class="button-highlighted"
      :active="selected === menuItem.label" >

          <q-item-section>
            {{ menuItem.label }}
          </q-item-section>
        </q-item>

      </q-list>

<div v-if="selected == 'Some Text'">
     <SomeNewVue />
</div>

And it is in my main layout page.

    <q-page-container>
      <q-drawer bordered v-model="isShowLeftDrawer" :width="320" :breakpoint="100" content-class="bg-blue text-white">
        <LeftSidebar/>
      </q-drawer>

      <router-view />
    </q-page-container>

As you can see, LeftSidebar is in q-page-container. Is there any way I can display the new vue component in the main page without using props/events??

Help please! Thanks in advance!

Answer 1

You need to put the component code in q-page-container. It will display in the body area.

eg.

<q-page-container>
  <router-view/>
  <div v-if="selected == 'Some Text'">
     <SomeNewVue />
  </div>
</q-page-container>

refer this - https://codepen.io/Pratik__007/pen/YzyXJYb?editable=true&editors=101%3Dhttps%3A%2F%2Fquasar.dev%2Flayout%2Fdrawer