IndexPage.vue

<template>
  <MainContainer>
    <transition
      appear
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOut"
    >
      <div
        v-if="showNotificationsBanner && pushNotificationsSupported"
        class="banner-container bg-primary"
      >
        <div class="constrain">
          <q-banner class="bg-grey-3 q-mb-md" inline-actions>
            <template v-slot:avatar>
              <q-icon name="notifications" color="primary" />
            </template>

            Would you like to enable notifications?

            <template v-slot:action>
              <q-btn
                @click="enableNotifications"
                label="Yes"
                color="primary"
                class="q-px-sm"
                dense
                flat
              />
              <q-btn
                @click="showNotificationsBanner = false"
                label="Later"
                color="primary"
                class="q-px-sm"
                dense
                flat
              />
              <q-btn
                @click="neverShowNotificationsBanner"
                label="Never"
                color="primary"
                class="q-px-sm"
                dense
                flat
              />
            </template>
          </q-banner>
        </div>
      </div>
    </transition>
    <BlogList />
  </MainContainer>
</template>

<script setup>
//imports
import { ref, onMounted, computed } from "vue";
import BlogList from "src/components/ListBlog.vue";
import MainContainer from "src/components/MainContainer.vue";
import { useQuasar } from "quasar";

//variables
const showNotificationsBanner = ref(false);
const $q = useQuasar();

//lifecycle hooks
onMounted(() => {
  initNotificationBanner();
});

//methods
const initNotificationBanner = () => {
  let neverShowNotificationsBanner = $q.localStorage.getItem(
    "neverShowNotificationsBanner"
  );

  if (!neverShowNotificationsBanner) {
    showNotificationsBanner.value = true;
  }
};

const enableNotifications = () => {
  //will implement this in moment later
  console.log("result", result);
};

const neverShowNotificationsBanner = () => {
  showNotificationsBanner.value = false;
  $q.localStorage.set("neverShowNotificationsBanner", true);
};

//computed
const pushNotificationsSupported = computed(() => {
  return "PushManager" in window ? true : false;
});

</script>
<style>
.container {
  min-height: 400px;
  width: 80%;
  padding: 70px;
}
</style>