gamebrary/src/components/Settings/SettingsGlobal.vue

<template lang="html">
    <section>
        <h3>General</h3>

        <div class="setting">
            <i class="fas fa-language" />
            <h5>{{ $t('settings.language') }}</h5>

            <select v-model="value.language">
                <option value="en">🇺🇸 {{ $t('settings.languages.en') }}</option>
                <option value="es">🇪🇸 {{ $t('settings.languages.es') }}</option>
                <option value="pl">🇵🇱 {{ $t('settings.languages.pl') }}</option>
                <option value="de">🇩🇪 {{ $t('settings.languages.de') }}</option>
                <option value="ar">🇦🇪 {{ $t('settings.languages.ar') }}</option>
                <option value="fr">🇫🇷 {{ $t('settings.languages.fr') }}</option>
                <option value="ja">🇯🇵 {{ $t('settings.languages.ja') }}</option>
                <option value="it">🇮🇹 {{ $t('settings.languages.it') }}</option>
                <option value="eu">🏴 {{ $t('settings.languages.eu') }}</option>
                <option value="cs">🇨🇿 {{ $t('settings.languages.cs') }}</option>
            </select>
        </div>
        <small>Browser reload required</small>
    </section>
</template>

<script>
export default {
    props: {
        value: Object,
    },

    computed: {
        hasLists() {
            return Object.keys(this.gameLists).length > 0;
        },
    },
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @import "~styles/styles";

    .reloading {
        width: 100%;
        text-align: center;
    }

    select {
        margin: 0;
    }
</style>