1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Deutsch
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

VueJS i18n Probleme

    • JavaScript
  • Syntafin
  • 4. September 2023 um 00:31
  • Erledigt
  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.783
    Trophäen
    2
    Beiträge
    1.414
    • 4. September 2023 um 00:31
    • #1

    Hallöchen,

    habe aktuell ein eher nerviges Problem, zu den ich zwar einen Workaround gefunden habe, mir das aber nicht gefällt.

    Aktuell verwende ich "vue-i18n", das ist ja das geläufige Paket dafür, aktuell sieht das in der App so aus mit dem Start:

    JavaScript
    createInertiaApp({ 
         title: (title) => `${title} - ${appName}`, 
         resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')), 
         setup({el, App, props, plugin}) { 
             /* const i18n = createI18n({ 
                 locale: props.initialPage.props.locale, // user locale by props 
                 fallbackLocale: "de", 
                 messages: import("./translations"), 
             }) */ 
             return createApp({render: () => h(App, props)}) 
                 .use(plugin) 
                 .use(i18nVue, { 
                     resolve: async lang => { 
                         const langs = import.meta.glob('../lang/*.json'); 
                         return await langs[`../lang/${lang}.json`](); 
                     } 
                 }) 
                 .use(ZiggyVue, Ziggy) 
                 .use(MotionPlugin) 
                 .mount(el); 
         }, 
         progress: { 
             color: '#f600ff', 
         }, 
     });
    Alles anzeigen

    Lege ich nun die json Datei wie folgt an:

    Code
    { 
         "nav.blog": "Blog", 
         "nav.gallery": "Galerie", 
         "nav.portfolio": "Portfolio", 
         "nav.aboutme": "Über mich", 
         "nav.search": "Suche", 
         "blog.newpost": "Neuer Beitrag", 
         "blog.noposts": "Keine Beiträge bisher vorhanden~", 
         "blog.categories": "Kategorien", 
         "blog.lastcomments": "Neuste Kommentare", 
         "messages.index": "MeguminGPT", 
         "pagination.next": "Nächste Seite", 
         "pagination.previous": "Vorherige Seite", 
         "chat.newchat": "Neuer Chat", 
         "user": { 
             "profile": { 
                 "overview": "Übersicht", 
                 "images": "Bilder", 
                 "comments": "Kommentare", 
                 "likes": "Favoriten" 
             } 
         } 
     }
    Alles anzeigen

    Kann ich die Strings aus dem User Array nicht verwenden:

    Wenn ich das Array Abflache, also den Key wirklich user.profile.overview nenne, funktioniert es.

    Jemand Idee was da falsch ist?

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • Syntafin
    27
    Syntafin
    LISTstack Dev
    Reaktionen
    498
    Punkte
    7.783
    Trophäen
    2
    Beiträge
    1.414
    • 29. Mai 2024 um 23:24
    • Hilfreichste Antwort
    • #2

    Hach, ich löse das hier übrigens mal auf... hab es ja mittlerweile gelöst:

    Grundlegend der erste Fehler war das ich die JSON Dateien nicht importierte hatte, Lösung:

    JavaScript
    import de from "../../lang/de.json";
    import en from "../../lang/en.json";

    Als zweites hab ich direkt Vue-i18n verwendet, statt... diesem seltsamen Vorgehen da oben:

    JavaScript
    const i18n = createI18n({
    	legacy: false,
    	locale: props.initialPage.props.locale,
        fallbackLocale: "de",
        messages: {
        	de,
            en,
    	},
    });

    So werden diese auch beim kompilieren geladen und können später verwendet werden :winking_face:

    A red dragon falls from the heavens... Ah, that memory has been lost. A shame. It was a favorite of mine...

  • Syntafin 29. Mai 2024 um 23:24

    Hat einen Beitrag als hilfreichste Antwort ausgewählt.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Tags

  • i18n
  • Mehrsprachigkeit
  • VueJS

Rechtliches

Impressum

Datenschutzerklärung

  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  • Deutsch
  • English
Zitat speichern