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

sagarkothari88(77)

Published in

HiveDevs

Words

300

Reading

2 min

Listen

Play

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>