sfp_front_vue_diarista_cliente/src/App.vue

<template>
  <router-view />
</template>

<script setup>
import { useQuasar } from "quasar";
import { StatusBar, Style } from "@capacitor/status-bar";
import { Capacitor } from "@capacitor/core";
import { watch, onBeforeMount } from "vue";
import { useI18n } from "vue-i18n";
import { Preferences } from "@capacitor/preferences";

defineOptions({
  name: "App",
});

const { locale } = useI18n();

const $q = useQuasar();

const updateStatusBar = async () => {
  if (!Capacitor.isNativePlatform()) {
    return;
  }

  await StatusBar.show();

  await StatusBar.setStyle({
    style: Style.Light,
  });
};

watch(
  () => locale.value,
  async (value) => {
    await Preferences.set({
      key: "locale",
      value,
    });
  },
);

onBeforeMount(async () => {
  $q.dark.set(false);

  await updateStatusBar();

  const { value: localePref } = await Preferences.get({
    key: "locale",
  });

  const userLocale = localePref || window.navigator.language;

  console.log(userLocale);
});

</script>