nuxt-modules / i18n

I18n module for Nuxt
https://i18n.nuxtjs.org
MIT License
1.75k stars 483 forks source link

The generated html page switched to default language #2696

Closed vivekdsilva closed 8 months ago

vivekdsilva commented 10 months ago

Environment

nuxt: 2.17.2 nuxt-buefy: 0.4.26 @nuxtjs/i18n: 7.3.1 vue: 2.7.16

Reproduction

nuxt.config.js

//Define the default languages
const locales = [
    {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        fileExtn: FILE_EXTN
    },
    {
        code: 'sp',
        iso: 'es-ES',
        name: 'Spanish',
        fileExtn: FILE_EXTN
    },
    {
        code: 'fr',
        iso: 'fr-FR',
        name: 'French',
        fileExtn: FILE_EXTN
    }
];

export default {
    target: "static", // default is 'server'
    ssr: (process.env.NODE_ENV == 'development') ? false: true,
    devtools: (process.env.NODE_ENV == 'development') ? true : false,
    generate: {
        dir: 'nuxt', //The HTML files are generated here
        subFolders: false,
    },
    alias: {
        "@": path.resolve(__dirname, "../"),
    },
    router: {
        base: '/',
        extendRoutes(routes) {
            routes.forEach((route) => {
                // When options.generate.subFolders is true (default)
                //const alias = route.path.length > 1 ? `${route.path}/index.html` : '/index.html'

                // When options.generate.subFolders is false
                let alias = [];
                if (route.path.length > 1) {
                    const normalizedRoute = route.path.replace(/\/$/, '') // Remove trailing slashes if they exist
                    const path = `${normalizedRoute}.html`;
                    alias.push(path);

                    //Add the alias for the languages other than english
                    locales.forEach(function (lang) {
                        if (lang.code != 'en') {
                            alias.push('/'+lang.code+path);
                        }
                    });
                }
                else {
                    alias.push('/index.html');
                }

                route.alias = alias;
            })
        }
    },
    modules: [
        ['nuxt-buefy', { css: false },],
        '@nuxtjs/i18n',
        '@nuxtjs/proxy',
    ],
    i18n: {
        detectBrowserLanguage: {
            alwaysRedirect: true,
            fallbackLocale: 'en',
            useCookie: true,
            cookieKey: 'i18n_redirected',
            cookieSecure: true,
        },
        locales: locales,
        defaultLocale: 'en',
        //strategy: 'no_prefix',
        vueI18n: {
            fallbackLocale: 'en',
            silentFallbackWarn: true,
            silentTranslationWarn: true,
        },
        vueI18nLoader: true,
    },
    css: cssProperty,
    head: headProperty,
    plugins: [
        //"./plugins/plugin.js",
        { src: "./plugins/redirect-ssl.js", mode: "client" }
    ],
};

pages/hello.vue

<i18n>
    {
        "fr": {
                    "English": "French"
        },
        "sp": {
                    "English": "Spanish"
        }
    }
    </i18n>

    <template>
        <div class="tw-w-full">
                    {{ $t('English') }}
        </div>
    </template>

    <script>
    export default {
        name: "hello",
    }
</script>

Describe the bug

npm run nuxt-generate-dev

There are three files generated when the above command runs with no errors /hello.html /sp/hello.html /fr/hello.html

When I go to /fr/hello.html I can see the French text briefly and then it switches to English.

When I go to /sp/hello.html I can see the Spanish text briefly and then it switches to English.

What am I doing wrong here?

Additional context

No response

Logs

No response

github-actions[bot] commented 10 months ago

Would you be able to provide a reproduction? 🙏

More info ### Why do I need to provide a reproduction? Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making. ### What will happen? If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect. If `needs reproduction` labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it. ### How can I create a reproduction? We have a couple of templates for starting with a minimal reproduction: 👉 [Reproduction starter (v8 and higher)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/v8) 👉 [Reproduction starter (edge)](https://stackblitz.com/fork/github/BobbieGoede/nuxt-i18n-starter/tree/edge) A public GitHub repository is also perfect. 👌 Please ensure that the reproduction is as **minimal** as possible. See more details [in our guide](https://nuxt.com/docs/community/reporting-bugs/#create-a-minimal-reproduction). You might also find these other articles interesting and/or helpful: - [The Importance of Reproductions](https://antfu.me/posts/why-reproductions-are-required) - [How to Generate a Minimal, Complete, and Verifiable Example](https://stackoverflow.com/help/mcve)
BobbieGoede commented 8 months ago

Closing this due to inactivity and lack of reproduction, if you're still experiencing this issue please open a new issue with a (minimal) reproduction.