IndexPage.vue

<script setup>
//imports
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import { useQuasar } from "quasar";

//variables
const router = useRouter();
const showInsatllbanner = ref(false);
const leftDrawerOpen = ref(false);
const links = [{ icon: "person", text: "For you" }];
const $q = useQuasar();
let deferredPrompt;

//life cycle hooks
onMounted(() => {
  let neverShowInstallBanner = $q.localStorage.getItem(
    "neverShowInstallBanner"
  );
  if (!neverShowInstallBanner) {
    window.addEventListener("beforeinstallprompt", (e) => {
      e.preventDefault();
      deferredPrompt = e;
      showInsatllbanner.value = true;
      setTimeout(() => {
        showInsatllbanner.value = true;
      }, 3000);
    });
  }
});

//methods
const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value;
};

const handleDrawerItemClick = (link) => {
  if (link.text === "For you") {
    router.push("/");
  }
};

const installApp = () => {
  // Hide the app provided install promotion
  showInsatllbanner.value = false;

  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === "accepted") {
      neverShowAppInstallBanner();
    }
  });
};

const neverShowInstallAppBanner = () => {
  showInsatllbanner.value = false;
  $q.localStorage.set("neverShowInstallBanner", true);
};

const redirectToNewRoute = () => {
  router.push("/new");
};

</script>