How to change Layout of Quasar App and put the left Drawer to the right?

Question

I am lost with the layout of Quasar and don't understand it, although I've read the documentation of it.

The scaffolder gave me the following code. But this makes the Drawer on the left side. How can I put it to the right side?

<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          Quasar App
        </q-toolbar-title>

        <div>Quasar v{{ $q.version }}</div>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >
      <q-list>
        <q-item-label
          header
          class="text-grey-8"
        >
          Essential Links
        </q-item-label>
        <EssentialLink
          v-for="link in essentialLinks"
          :key="link.title"
          v-bind="link"
        />
      </q-list>
    </q-drawer>

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

I thought it has something to do with the letters in

However. Playing with them won't change anything.

I also tried to put the q-drawer-tag below the q-page-container, with no luck either.

How to make the drawer visible on the right side?

Answer 1

you can set the behavior to side="right"

https://quasar.dev/layout/drawer#QDrawer-API

<q-drawer
  v-model="leftDrawerOpen"
  side="right"
  show-if-above
  bordered
  content-class="bg-grey-1"
>
  <q-list>
    <q-item-label header class="text-grey-8">
      Essential Links
    </q-item-label>
    <EssentialLink
      v-for="link in essentialLinks"
      :key="link.title"
      v-bind="link"
    />
  </q-list>
</q-drawer>