yourpart3/frontend/src/main.js

import { createApp } from 'vue';
import App from './App.vue';
import store from './store';
import router from './router';
import './assets/styles.scss';
import i18n from './i18n';
import { setSeoI18nAccessor, applyRouteSeo } from './utils/seo';
import { SUPPORTED_UI_LOCALES } from './i18n/supportedLocales.js';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import feedbackPlugin from './utils/feedback';

function getBrowserLanguage() {
    // Prüfe zuerst die bevorzugte Sprache
    const browserLanguage = navigator.language || navigator.languages[0];

    if (browserLanguage.startsWith('ceb') || browserLanguage.startsWith('bis')) {
        return 'ceb';
    }
    
    // Deutschsprachige Länder: Deutschland, Österreich, Schweiz, Liechtenstein
    const germanSpeakingCountries = ['de', 'at', 'ch', 'li'];
    
    // Prüfe ob die Sprache mit 'de' beginnt (deutsch)
    if (browserLanguage.startsWith('de')) {
        return 'de';
    }

    if (browserLanguage.startsWith('fr')) {
        return 'fr';
    }

    if (browserLanguage.startsWith('es')) {
        return 'es';
    }

    // Prüfe alle verfügbaren Sprachen für deutschsprachige Länder
    const allLanguages = navigator.languages || [navigator.language];
    for (const lang of allLanguages) {
        if (lang.startsWith('ceb') || lang.startsWith('bis')) {
            return 'ceb';
        }
        // Prüfe auf de-XX Format (z.B. de-DE, de-AT, de-CH, de-LI)
        if (lang.startsWith('de-')) {
            const countryCode = lang.split('-')[1]?.toLowerCase();
            if (germanSpeakingCountries.includes(countryCode)) {
                return 'de';
            }
        }
        // Prüfe auch auf direkte Länderkennung (z.B. de_AT, de_CH)
        if (lang.startsWith('de_')) {
            const countryCode = lang.split('_')[1]?.toLowerCase();
            if (germanSpeakingCountries.includes(countryCode)) {
                return 'de';
            }
        }
    }

    for (const lang of allLanguages) {
        if (lang.startsWith('fr')) {
            return 'fr';
        }
    }

    for (const lang of allLanguages) {
        if (lang.startsWith('es')) {
            return 'es';
        }
    }

    // Fallback: Englisch für alle anderen Sprachen
    return 'en';
}

function readLangFromUrl() {
    try {
        const q = new URLSearchParams(window.location.search).get('lang');
        if (q && SUPPORTED_UI_LOCALES.includes(q)) {
            return q;
        }
    } catch (_) {
        /* ignore */
    }
    return null;
}

function getInitialAppLanguage() {
    const fromUrl = readLangFromUrl();
    if (fromUrl) {
        try {
            localStorage.setItem('uiLanguage', fromUrl);
        } catch (_) {
            /* ignore */
        }
        return fromUrl;
    }
    try {
        const saved = localStorage.getItem('uiLanguage');
        if (saved && SUPPORTED_UI_LOCALES.includes(saved)) {
            return saved;
        }
    } catch (_) {
        /* ignore */
    }
    return getBrowserLanguage();
}

const vuetify = createVuetify({
    components,
    directives,
});

store.dispatch('setLanguage', getInitialAppLanguage());

setSeoI18nAccessor(() => ({
    t: (...args) => i18n.global.t(...args),
    te: (...args) => i18n.global.te(...args),
    locale: store.state.language,
}));

store.watch(
    (state) => state.language,
    () => {
        applyRouteSeo(router.currentRoute.value);
    }
);

const app = createApp(App);

app.use(store);
app.use(router);
app.use(i18n);
app.use(vuetify);
app.use(feedbackPlugin);

app.mount('#app');