salix-front/src/App.vue

<script setup>
import { onMounted } from 'vue';
import { useQuasar, Dark } from 'quasar';
import { useI18n } from 'vue-i18n';

const quasar = useQuasar();
const { availableLocales, locale, fallbackLocale } = useI18n();
Dark.set(true);

onMounted(() => {
    let userLang = window.navigator.language;
    if (userLang.includes('-')) {
        userLang = userLang.split('-')[0];
    }

    if (availableLocales.includes(userLang)) {
        locale.value = userLang;
    } else {
        locale.value = fallbackLocale;
    }
});

quasar.iconMapFn = (iconName) => {
    if (iconName.startsWith('vn:')) {
        const name = iconName.substring(3);

        return {
            cls: `icon-${name} notranslate`,
        };
    }

    return {
        cls: 'material-symbols-outlined notranslate',
        content: iconName,
    };
};
</script>

<template>
    <RouterView />
</template>

<style lang="scss">
.body--light {
    background-color: #eee;
}
</style>