VueJS i18n Probleme

Syntafin

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?

Syntafin

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

VueJS i18n Probleme

Syntafin 29. Mai 2024 um 23:24

Jetzt mitmachen!

Tags