Quasar Hacks - preserve state, remove header-footer bg, use safe-area for mobile-app

Quasar - How to preserve data when switching pages?

If you navigate from one screen to other screen, usually you loose the data.
Because App navigated to a different route & it deallocated data of previous route. E.g. you are filling up a form, as a user, you go to different screen & come back to form, you should still see the half-filled-up-form.

To achieve it, you need to explicitly tell the router that it needs to keep alive. So, go to MainLayout.vue, and edit it as follows.

<template>
  <q-layout class="safe-area">
    <q-page-container>
      <router-view v-slot="{ Component }">
        <keep-alive> 
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </q-page-container>
  </q-layout>
</template>

Reference link: https://stackoverflow.com/a/70010322/140765

<keep-alive>

With this, your components / pages will stay alive.

Quasar - How to remove footer background color?

In Quasar, If you use footer, it's not straight forward to remove the background color of it.

But if you inspect elements, you can easily find out that certain colors are applied to a class. Copy that class & put it in the style section.
Here is how I did it.

.q-layout__section--marginal {
  background-color: unset;
  color: unset;
}

Once color & background-color are unset, you can use the footer of your choice.

Quasar - How to use Safe-Areas for iOS & Android?

For iOS & Android users, default quasar-layout goes below top-notch & below bottom safe area. To avoid this, you can use following trick.

Open MainLayout.vue & put content as follows.

<template>
  <q-layout class="safe-area">
    <q-page-container>
      <router-view v-slot="{ Component }">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </router-view>
    </q-page-container>
  </q-layout>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MainLayout',
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
.safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>

Here, you can see that we've added a custom CSS class named safe-area to put contents within safe area.

NOTE: Not applicable to classes like absolute-center, absolute-top.

If you use such absolute-top, absolte-bottom, don't forget to apply this safe-area class as an additional styling.

Additional Source / reference - https://quasar.dev/quasar-cli-vite/developing-capacitor-apps/troubleshooting-and-tips#status-bar-and-notch-safe-areas

My Previous posts about Development using Quasar

• Hide bottom toolbar when keyboard is shown
• Create a project with Quasar Framework
• Add VS Plugins, Create a Component
• Using Quasar Framework instead of Flutter
• Quasar + Axios < Quasar + capacitorjs

Support me