Nuxt•6mo ago

i18n fallback issues

Heya people. I've recently moved away from NextJS over to Vue and I'm trying to setup the most important things and one of them is i18n. It works so smoothly compared to next and I love it so far. One thing I am not happy with though is the fallbackLocale feature on the i18n package. The documentation says I should do it in this way but the editor says it is wrong. Any ideas?

i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        defaultLocale: "en",
        fallbackLocale: ['en', 'fr'],
        locales: [
            {
                code: "en",
                iso: "en-US",
                name: "English",
                file: "en-US.json"
            },
            {
                code: "da",
                iso: "da-DK",
                name: "Dansk",
                file: "da-DK.json"
            }
        ]
    }

i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        defaultLocale: "en",
        fallbackLocale: ['en', 'fr'],
        locales: [
            {
                code: "en",
                iso: "en-US",
                name: "English",
                file: "en-US.json"
            },
            {
                code: "da",
                iso: "da-DK",
                name: "Dansk",
                file: "da-DK.json"
            }
        ]
    }

Documentation says I should it like this:

fallbackLocale: 'en',

fallbackLocale: 'en',

But I get the error:

Object literal may only specify known properties, and 'fallbackLocale' does not exist in type 'Partial<ModuleOptions>'.

Object literal may only specify known properties, and 'fallbackLocale' does not exist in type 'Partial<ModuleOptions>'.

^ On line with "fallbackLocale" Any suggestions? 😄

21 Replies

PolakOP•6mo ago

See. You always solve it after asking the community. In case anyone else runs into the same issue, remove "defineNuxtConfig" so it says "export default { ...." instead.

PolakOP•6mo ago

New issue.. So I was able to set the fallback locale but that doesnt seem to solve this. I have not setup the finish language yet and therefore I want it to fall back to english. Any suggestions on why this occurs?

PolakOP•6mo ago

I still have the same error as above. Yes, I was able to set the fallbackLocale without my IDE complaining but it actually never worked.

xibman•6mo ago

@Polak just create file i18n.config.ts and add inside export default { fallbackLocale: ['en'], };

PolakOP•6mo ago

Hey @xibman. I just tried but it still seems like it doesnt work. After visiting /fi/teams I still get 404 instead of being redirected to /teams. At least it is not longer complaining so thank you very much for that but seems to not work yet. :/

xibman•6mo ago

can you share the config you have in nuxt.config.ts for i18n

PolakOP•6mo ago

Yeah.

export default defineNuxtConfig({
    devtools: { enabled: true },
    css: ['~/assets/scss/styles.scss'],

    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "~/assets/scss/_variables.scss" as *;'
                }
            }
        }
    },

    modules: ["@nuxtjs/i18n", "@nuxt/image"],
    i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        defaultLocale: "en",
        locales: [
            {
                code: "en",
                iso: "en-US",
                name: "English",
                file: "en-US.json"
            },
            {
                code: "da",
                iso: "da-DK",
                name: "Dansk",
                file: "da-DK.json"
            }
        ],
        vueI18n: './i18n.config.ts'
    }
})

export default defineNuxtConfig({
    devtools: { enabled: true },
    css: ['~/assets/scss/styles.scss'],

    vite: {
        css: {
            preprocessorOptions: {
                scss: {
                    additionalData: '@use "~/assets/scss/_variables.scss" as *;'
                }
            }
        }
    },

    modules: ["@nuxtjs/i18n", "@nuxt/image"],
    i18n: {
        lazy: true,
        langDir: "locales",
        strategy: "prefix_and_default",
        defaultLocale: "en",
        locales: [
            {
                code: "en",
                iso: "en-US",
                name: "English",
                file: "en-US.json"
            },
            {
                code: "da",
                iso: "da-DK",
                name: "Dansk",
                file: "da-DK.json"
            }
        ],
        vueI18n: './i18n.config.ts'
    }
})

xibman•6mo ago

and in /i18n.config.ts

PolakOP•6mo ago

export default {
    fallbackLocale: ['en'],
};

export default {
    fallbackLocale: ['en'],
};

xibman•6mo ago

{ code: "en", iso: "en-US", name: "English", file: "en-US.json" }, Add isCatchallLocale: true you can remove vueI18n: './i18n.config.ts' is automatic add to i18n in jnuxt config detectBrowserLanguage: { useCookie: true,
redirectOn: 'root', fallbackLocale: 'en, },

PolakOP•6mo ago

Tried doing a gif to show the exact issue.

PolakOP•6mo ago

Still error on /fi

xibman•6mo ago

reboot you server after thge change

PolakOP•6mo ago

Still error. Cursed as hell haha.

 WARN  [Vue Router warn]: No match found for location with path "/fi"


 WARN  [Vue Router warn]: No match found for location with path "/fi"


 WARN  [Vue Router warn]: No match found for location with path "/fi"

 WARN  [Vue Router warn]: No match found for location with path "/fi"


 WARN  [Vue Router warn]: No match found for location with path "/fi"


 WARN  [Vue Router warn]: No match found for location with path "/fi"

xibman•6mo ago

you want to be redirected on a default language if this one does not exist

PolakOP•6mo ago

yeah

xibman•6mo ago

i think you need to have your own guard on this ! because for sure the page does not exist that's why you end on 404 nuxt i18n generate routes based on available languages or add this kind of fallback fallbackLocale: { 'de-CH': ['fr', 'it'], 'zh-Hant': ['zh-Hans'], 'es-CL': ['es-AR'], es: ['en-GB'], pt: ['es-AR'], default: ['en', 'da'] } try fallbackLocale: { 'fi': ['en'], default: ['en'] } just to confirm !

PolakOP•6mo ago

No luck sadly. COULD it be that it doesnt listen to i18n.config.ts? you say it is auto imported but maybe my stuff is cursed? I might have set it up wrong maybe

xibman•6mo ago

Configuration for createI18n can be passed using a configuration file. By default, the module will scan for a i18n.config{.js,.mjs,.ts} if nothing is specified. nuxt i18n will only generate route for the locales you have on locales array

PolakOP•6mo ago

Oh okay. In that case an error must be given to people who tries and visit a language that doesnt exist. Thanks for your help. Real champ!

xibman•6mo ago

You're welcome

Gaming

Programming

i18n fallback issues