Activities

thebspin

thebspin posted a new question

nuxt-i18n •

How to translate a string using a global mixin?

I build my own breadcrumb global mixin that works great with static strings but as soon as i want to use vue-i18n i get an error. The $t() function does not exist in this. Could someone explain to me why i have access to this in other parts but not in my mixin?
Usage of my mixin in a page component: breadcrumb: [{ text: this.$t("engagement.templates.overview") }],
Error: Uncaught (in promise) TypeError: Cannot read property '$t' of undefined

The mixin is loaded from a plugin in nuxt.config.js and looks something like this:

export default {
  install(Vue) {
    Vue.mixin({
      created() {
        // Check if a custom breadcrumb object exist in our component
        if (this.$options.breadcrumb) {
          if (this.$store) {
             // Do something here
          } else {
            throw new Error("No vuex store found")
          }
        }
      }
    })
  }
}
veiss-com

veiss-com posted a new bug report

nuxt-i18n •

bug DateTime localization

Version

v5.3.0

Reproduction link

https://estadioberria.fundacionvital.eus/envivo/arranca-la-reforma-del-espacio-social/18

Steps to reproduce

Version

"nuxt-i18n": "^6.4.0"

The date do not change its format when switching languages only in Chrome(79.0.3945.130) its works fine in Firefox(74.0b7) and Edge (44.17763.831.0)

This is my nuxt.config.js section :

['nuxt-i18n', {
      strategy: 'prefix_except_default',
      locales: [
        {
          code: 'es',
          iso: 'es-ES',
          file: 'es-ES.js',
          name: 'Es'
        },
        {
          code: 'eu',
          iso: 'es-EU',
          file: 'es-EU.js',
          name: 'Eu'
        },
      ],
      langDir: 'lang/',
      lazy: true,
      defaultLocale: 'es',
      vueI18n: {
        dateTimeFormats: {
          es: {
            short: {
              day: 'numeric', month: 'numeric', year: 'numeric'
            }
          },
         eu: {
            short: {
              year: 'numeric', month: 'numeric', day: 'numeric'
            }
          },
        },
        fallbackLocale: 'es',
      }
    }]

In the template:

<time>{{$d(new Date(post.created_on), 'short' )}}</time>

~

What is expected ?

DateTime localization like that:
ES: 20/2/2020
EU :2020/2/20

What is actually happening?

In Chrome only:
ES: 20/2/2020
EU: 20/2/2020

Additional comments?

I´m very sorry but Ican provide you a repo I want to but … company policy :(
My project is in production right now, so you can see the behavior in this URL.
Simply change the language (in the top right in the header) and the dates are just below de post title.

Shokhrukh2606

Shokhrukh2606 posted a new question

nuxt-i18n •

Vue-i18n is undefined while installing nuxt-i18n
simplenotezy

simplenotezy posted a new bug report

nuxt-i18n •

bug TypeError: Cannot read property 'locale' of null - when using Nuxt Router & router.push

Version

6.5.0

Steps to reproduce

Sometimes I am getting this error, when I am clicking a <nuxt-link>:

"TypeError: Cannot read property 'locale' of null
at Object.localePath (webpack-internal:///./.nuxt/nuxt-i18n/plugin.routing.js:52:27)
at VueComponent.eval (webpack-internal:///./.nuxt/nuxt-i18n/plugin.routing.js:180:27)
at VueComponent.productClicked (webpack-internal:///./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/templates/ProductDisplay.vue?vue&type=script&lang=js&:41:32)
at click (webpack-internal:///./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/vue-loader/lib/index.js?!./components/templates/ProductDisplay.vue?vue&type=template&id=1ca4bc44&scoped=true&:22:22)
at invokeWithErrorHandling (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:1853:26)
at HTMLAnchorElement.invoker (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:2178:14)
at HTMLAnchorElement.original._wrapper (webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:6907:25)"

Specifically, my <nuxt-link> looks like this:

<nuxt-link :to="localePath({ name: 'product-slug', params: { slug: product.slug } })" :event="''" @click.prevent.native="productClicked($event)" class="product-container column">

And the productClicked looks like this:

    productClicked ($event) {
        this.$emit('productClicked', this.product);

        if (!this.disableLink) {
            this.$router.push(this.localePath({ name: 'product-slug', params: { slug: this.product.slug } })); // this is where the error begins
        }
    }

The error doesn't happen every time.

See attached screenshots.
vuenuxt-1.png
vuenuxt-2.png
vuenuxt-3.png
vuenuxt-4.png

What is expected ?

Link should be fired without errors

What is actually happening?

Errors are happening

brandonwoo

brandonwoo posted a new bug report

nuxt-i18n •

bug Type declarations missing for this.$i18n and this.$t

Version

v6.5.0

Reproduction link

https://codesandbox.io/s/github/brandonwoo/nuxt-i18n-type-definition-issue

Steps to reproduce

npm install
npm run dev

What is expected ?

this.$i18n.t
this.$t
should be accessible on Vue instance without compile errors

What is actually happening?

compile error will be output in console

 ERROR  ERROR in /Users/JPZ2487/Workspace/test/pages/index.vue(41,18):                              nuxt:typescript 14:37:14
41:18 Property '$t' does not exist on type '{ components: { Logo: {}; }; data(): any; }'.
    39 |   data () {
    40 |     return {
  > 41 |       test: this.$t('test'),
       |                  ^
    42 |       test2: this.$i18n.t('test')
    43 |     }
    44 |   }


 ERROR  ERROR in /Users/JPZ2487/Workspace/test/pages/index.vue(42,19):                              nuxt:typescript 14:37:14
42:19 Property '$i18n' does not exist on type '{ components: { Logo: {}; }; data(): any; }'.
    40 |     return {
    41 |       test: this.$t('test'),
  > 42 |       test2: this.$i18n.t('test')
       |                   ^
    43 |     }
    44 |   }
    45 | }
gokhancetiner

gokhancetiner posted a new question

nuxt-i18n •

Page is not redirect if the browser default lang and cookie i18n_redirected lang are different languages

Hello,

When you first enter the URL localhost:3000 page is redirect to default browser language localhost:3000/tr and cookie i18nredirected is set to 'tr' as well. After you change the language in the application with this.$i18n.setLocale('en') function URL is changed to localhost:3000/en and cookie i18nredirected is set to 'en'
The problem starts at that point open new tab and enters localhost:3000 and page is not redirect to either browserLang nor to cookie i18nredirected lang and get 404. If I set i18nredirected value manually default browser lang that is 'tr' page is redirected correctly to localhost:3000/tr.

As summarized the problem if browserDefaultLang and cookie lang doesn't match redirect doesn't work.

Do you have any idea about that problem?

Configuration in nuxt.config.js

"nuxt-i18n",
{
// Options
strategy: "prefix",
detectBrowserLanguage: {
useCookie: true,
cookieKey: "redirected",
alwaysRedirect: true,
fallbackLocale: 'en'
},
locales: [{
code: "en",
iso: "en-US",
file: "en-US.js"
},
{
code: "fr",
iso: "fr-FR",
file: "fr-FR.js"
},
{
code: "tr",
iso: "tr-TR",
file: "tr-TR.js"
}
],
lazy: true,
langDir: "lang/",
defaultLocale: "en",
parsePages: false,
encodePaths: true,
seo: false
}

gokhancetiner

gokhancetiner posted a new question

nuxt-i18n •

Page is not redirect if the browser default lang and cookie i18n_redirected lang are different languages

Hello,

When you first enter the URL localhost:3000 page is redirect to default browser language localhost:3000/tr and cookie i18nredirected is set to 'tr' as well. After you change the language in the application with this.$i18n.setLocale('en') function URL is changed to localhost:3000/en and cookie i18nredirected is set to 'en'
The problem starts at that point open new tab and enters localhost:3000 and page is not redirect to either browserLang nor to cookie i18nredirected lang and get 404. If I set i18nredirected value manually default browser lang that is 'tr' page is redirected correctly to localhost:3000/tr.

As summarized the problem if browserDefaultLang and cookie lang doesn't match redirect doesn't work.

Do you have any idea about that problem?

Configuration in nuxt.config.js

"nuxt-i18n",
{
// Options
strategy: "prefix",
detectBrowserLanguage: {
useCookie: true,
cookieKey: "redirected",
alwaysRedirect: true,
fallbackLocale: 'en'
},
locales: [{
code: "en",
iso: "en-US",
file: "en-US.js"
},
{
code: "fr",
iso: "fr-FR",
file: "fr-FR.js"
},
{
code: "tr",
iso: "tr-TR",
file: "tr-TR.js"
}
],
lazy: true,
langDir: "lang/",
defaultLocale: "en",
parsePages: false,
encodePaths: true,
seo: false,

3em

3em posted a new question

nuxt-i18n •

RangeError: Maximum call stack size exceeded with multiple i18n custom blocks

Nothing to preview

Eugene313

Eugene313 posted a new question

nuxt-i18n •

switchLocalePath no working in error layout

When I go to a route that isn’t there, nuxtjs shown error page, this.route doesn't have RouteBaseName , and when i use switchLocalePath i have return ' ';
const name = this.getRouteBaseName()
if (!name) {
return ''
}

Eugene313

Eugene313 posted a new question

nuxt-i18n •

switchLocalePath no working in error layout

When I go to a route that isn’t there, nuxtjs shown error page, this.route doesn't have RouteBaseName , and when i use switchLocalePath i have return ' ';
const name = this.getRouteBaseName()
if (!name) {
return ''
}

How can i switch locale in error page in nuxtjs?

simplenotezy

simplenotezy posted a new bug report

nuxt-i18n •

bug Calling i18n/setRouteParams store results in silently failing

Version

6.5.0

Steps to reproduce

Follow guide: https://nuxt-community.github.io/nuxt-i18n/lang-switcher.html#dynamic-route-parameters

Append this piece of code to your async "asyncData" function:

        await app.$store.dispatch('i18n/setRouteParams', {
            en: { slug: 'cannara-grande-earrings-engelsk' },
            da: { slug: 'cannara-grande-earrings' }
        });

Whole code block looks like this:

    async asyncData (context) {
        const { route, app, error } = context
        const slug = route.params.slug;

        try {
            const product = await app.$wp.product().slug(slug);

            await app.$store.dispatch('i18n/setRouteParams', { // just for testing... slugs will be hardcoded later. Currently they may currently viewed page.
                en: { slug: 'cannara-grande-earrings-engelsk' },
                da: { slug: 'cannara-grande-earrings' }
            });

            return { product }
        } catch (e) {
            error(e)
        }
    },

Navigate to your page (http://localhost:3000/product/cannara-grande-earrings). You'll see the _error.vue layout. There is no errors in the console, or on the server.

There is a notice saying "Classic mode for store/ is deprecated and will be removed in Nuxt 3." but I'm not sure if this is related to nuxt or not.

My nuxt config

    [
        'nuxt-i18n',
        {
            lazy: true,
            langDir: 'lang/',
            defaultLocale: 'en',
            locales: [
                {
                    code: 'en',
                    file: 'en-US.js'
                },
                {
                    code: 'da',
                    file: 'da-DK.js'
                }
            ],
            parsePages: false, // Disable babel parsing
            pages: {
                'product/_slug': {
                    en: '/product/:slug',   // -> accessible at /about-us (no prefix since it's the default locale)
                    da: '/produkt/:slug'    // -> accessible at /da/produkt
                },
                'designer/_slug': {
                    en: '/designer/:slug',  // -> accessible at /about-us (no prefix since it's the default locale)
                    da: '/designer/:slug'   // -> accessible at /da/produkt
                },
                'product-category/_slug': {
                    en: '/product-category/:slug',  // -> accessible at /about-us (no prefix since it's the default locale)
                    da: '/produkt-kategori/:slug'   // -> accessible at /da/produkt
                }
            }
        }
    ]

What is expected ?

Page should not fail, or at least fail with a error message

What is actually happening?

Page shows error layout, but no error message is in console or on server

simplenotezy

simplenotezy posted a new bug report

nuxt-i18n •

bug switchLocalePath('the-language-code') returns root url instead of current page

Version

6.5.0

Steps to reproduce

  1. Create a langauge swithcer component. Use: switchLocalePath('da') - like so: <nuxt-link :to="switchLocalePath('da')" class="flag da">
  2. Go to a page, e.g. /pages/example. See the language swithcer component -- the url is: / instead of /da/pages/example.

What is expected ?

The output should be /da/pages/example

What is actually happening?

The output is /

Additional comments?

This is how I configured my module config:

    [
        'nuxt-i18n',
        {
            lazy: true,
            langDir: 'lang/',
            defaultLocale: 'en',
            locales: [
                {
                    code: 'en',
                    file: 'en-US.js'
                },
                {
                    code: 'da',
                    file: 'da-DK.js'
                }
            ]
        }
    ]
simplenotezy

simplenotezy posted a new bug report

nuxt-i18n •

bug error 'localePath' is not defined

Version

6.5.0

Steps to reproduce

1) Installing nuxt-i18n.
2) Setting up default configs
3) Using localePath() in your components to reference a localized route inside a component method instead of on nuxt-link

The editor as well as the compiler will fail with error:

/Users/me/Projects/jwr-nuxt/components/menu/Item.vue
  52:11  error  'localePath' is not defined  no-undef

What is expected ?

The function running without any errors when using in a component method. Sometimes its required to dynamically figure out routes and it would be useful if localePath could also be used within a component method, instead of only on nuxt-link.

What is actually happening?

It returns the function is undefined when called from a method instead of from nuxt-link.

golubvladimir

golubvladimir posted a new question

nuxt-i18n •

How to turn off warnings messages ?

Messages like this

[vue-i18n] Value of key 'forms.fields.email_label' is not a string!

Options like ?

debug: false 
matthieudou

matthieudou resolved the question #c389

nuxt-i18n •

fully dynamic routes

Well I actually found the solution. My bad.

In this case,

await store.dispatch('i18n/setRouteParams', {
  en: { pathMatch: page.route.en.current },
  fr: { pathMatch: page.route.fr.current }
})

My problem was trying to set slug params instead of pathMatch
I just need to add a special case for the index page and everything will be working.

matthieudou

matthieudou posted a new question

nuxt-i18n •

fully dynamic routes

Hi,

I'm facing a problem with a project. I'm not completely sure if it's an understanding problem from my side or of it's a bug/feature-request.
Here are some insights of what I'm trying to do.

I'm having a landing page project that is fetching every possible page from a CMS. A page is defined by an object containing translated routes, some pageOptions and the pageContent

{
  pageOptions: {
    //...
  },
  route: {
    fr: '/fonctionnalites/ma-super-fonction',
    en: '/features/my-super-feature',
    //...
  },
  pageContent: {
    fr: [
      // Array of modules composing the page
    ],
    en: [
      // Same but in english
    ],
  }
}

Therefore, in my nuxt project, I only have one file in my pages directory: _.vue. Here is an example.

<template>
  <main>
    <div>
      Page route:
      <pre>{{ $route.params.pathMatch }}</pre>
      <pre>{{ $route.path }}</pre>
    </div>
    <div>
      Page locale:
      <pre>{{$i18n.locale}}</pre>
    </div>
    <!-- Here would normally come the rendered page content -->
    <div v-html="page[$i18n.locale].pageContent"></div>
  </main>
</template>

<script>
  import { client } from '~/utils/sanity'

  // Here we fetch the page that has a route[locale] same as the current route.
  const pageQuery = /* groq */`
    *[_type == 'page' && route[$locale].current == $route][0]
  `

  export default {
    async asyncData ({ route, app, store, error }) {
      const options = {
        route: route.path,
        locale: app.i18n.locale
      }

      const page = await client.fetch(pageQuery, options)

      // WE PUT THE OTHER TRANSLATED ROUTES IN
      await store.dispatch('i18n/setRouteParams', {
        en: { slug: page.route.en.current },
        fr: { slug: page.route.fr.current }
      })

      return {
        page
      }
    }
  }
</script>

In this case, the i18n/setRouteParams action doesn't seem to work. When changing the locale, the only thing that changes is the /fr before the route.

Any idea on how this could be achieved ?
I may be missing something.

Here is a little codeSandbox to illustrate the example. https://codesandbox.io/s/nuxti18ndynamictranslatedroutes-ytmrt

Thank you by advance for your response, working with nuxt and it's ecosystem is an absolute pleasure.

@matthieudou

oppianmatt

oppianmatt posted a new bug report

nuxt-i18n •

bug custom formatter interpolate not a function

Version

v5.3.0

Reproduction link

https://github.com/kazupon/vue-i18n/blob/dev/examples/formatting/custom/src/formatter.js

Steps to reproduce

Try and use the example custom formatter from vue-i18n.

What is expected ?

custom formatter to work

What is actually happening?

nuxt-i18n has a build error in plugins/main,.js

a circular reference

alfred_1  | Builder initialized
alfred_1  | 
alfred_1  |  ERROR  Could not compile template /app/node_modules/nuxt-i18n/src/plugins/main.js: Converting circular structure to JSON
alfred_1  |     --> starting at object with constructor 'MessageFormat'
alfred_1  |     |     property 'runtime' -> object with constructor 'Runtime'
alfred_1  |     --- property 'mf' closes the circle
alfred_1  | 
alfred_1  |   --> starting at object with constructor 'MessageFormat'
alfred_1  |   |     property 'runtime' -> object with constructor 'Runtime'
alfred_1  |   --- property 'mf' closes the circle
alfred_1  |   at node_modules/@nuxt/builder/dist/builder.js:5975:17
alfred_1  |   at async Promise.all (index 1)
alfred_1  |   at Builder.compileTemplates (node_modules/@nuxt/builder/dist/builder.js:5953:5)
alfred_1  |   at Builder.generateRoutesAndFiles (node_modules/@nuxt/builder/dist/builder.js:5676:5)
alfred_1  |   at Builder.build (node_modules/@nuxt/builder/dist/builder.js:5585:5)
alfred_1  |   at Object._startDev (node_modules/@nuxt/cli/dist/cli-dev.js:84:5)
alfred_1  |   at Object.startDev (node_modules/@nuxt/cli/dist/cli-dev.js:48:20)
alfred_1  |   at Object.run (node_modules/@nuxt/cli/dist/cli-dev.js:43:5)
alfred_1  |   at NuxtCommand.run (node_modules/@commandtab 

If I change the custom formatter to not have the class property caasuing the circular error I get a different error. That interpolate isn't a function

Additional comments?

Debugging in the browser it looks like it removes any methods on the vue-i18n options, like the formatter, and turns it into a simple data structure

    // Set instance options
    app.i18n = new VueI18n({
        "formatter": {
            "caches": {}
        },

my guess is that it's inspecting the options to write out which causes the circular reference error. And then it also removes any classes/methods on the object and makes it a simple key/value

lwswnnscrm

lwswnnscrm posted a new question

nuxt-i18n •

Bug when first load my app in not default lang.

Hi @hmsk @elrolito @rchl @tyom , i have problem when i load my app in different language in first load, i have 2 error
TypeError: Cannot read property '_transitionClasses' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined

In dev mode all good, its only after build && start

For see this error http://ssfront-dev.ssyii.com/de
For see normal switch http://ssfront-dev.ssyii.com/ - and then change lang to de In right header bar.
My package.json:
"dependencies": { "@nuxtjs/axios": "^5.9.3", "@nuxtjs/device": "^1.2.4", "@nuxtjs/pwa": "^3.0.0-beta.20", "bootstrap": "^4.4.1", "bootstrap-vue": "^2.2.2", "cookie-universal-nuxt": "^2.1.0", "font-awesome": "^4.7.0", "nuxt": "^2.11.0", "nuxt-gmaps": "^1.1.7", "nuxt-i18n": "^6.5.0", "vue-awesome-swiper": "^3.1.3", "vue-notification": "^1.3.20" }, "devDependencies": { "@nuxtjs/eslint-config": "^0.0.1", "@nuxtjs/eslint-module": "^0.0.1", "@vue/test-utils": "^1.0.0-beta.31", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", "eslint": "^5.15.1", "eslint-config-airbnb-base": "^13.2.0", "eslint-config-standard": "^14.1.0", "eslint-plugin-html": "^6.0.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jest": "^22.21.0", "eslint-plugin-node": "^10.0.0", "eslint-plugin-promise": ">=4.0.1", "eslint-plugin-standard": "^4.0.1", "eslint-plugin-vue": "^5.2.2", "jest": "^24.9.0", "node-sass": "4.13.0", "nodemon": "^1.19.4", "sass-loader": "^7.3.1", "vue-jest": "^3.0.5" }

setting i18n:
[ 'nuxt-i18n', { locales: [ { name: 'English', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/uk.png', iso: 'en-GB', code: 'en', }, { name: 'Deutsch', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/de.png', iso: 'de-DE', code: 'de', }, { name: '中国 (Chinese)', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/cn.png', iso: 'zh-CN', code: 'cn', }, { name: 'Canadian', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/ca.png', iso: 'en-CA', code: 'ca', }, { name: 'Australian', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/au.png', iso: 'en-AU', code: 'au', }, { name: 'Espanol', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/es.png', iso: 'es-ES', code: 'es', }, { name: 'American', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/us.png', iso: 'en-US', code: 'us', }, ], defaultLocale: 'en', loadLanguagesAsync: true, strategy: 'prefix_except_default', detectBrowserLanguage: { useCookie: true, cookieKey: 'lang', fallbackLocale: 'en', }, vueI18n: { fallbackLocale: 'en', messages: translations, }, vuex: { moduleName: 'i18n', syncLocale: true, syncMessages: false, syncRouteParams: true, }, }, ],

and plugin to switch lang:

export default ({ app }) => { app.i18n.onLanguageSwitched = (oldLocale, newLocale) => { if (process.browser) { if (app.$cookies.get('lang') !== newLocale) { app.$cookies.set('lang', newLocale); } } }; };

nodejs v: 13.7.0

lwswnnscrm

lwswnnscrm posted a new question

nuxt-i18n •

Bug when first load my app in not default lang.

Hi, i have problem when i load my app in different language in first load, i have 2 error
TypeError: Cannot read property '_transitionClasses' of undefined
TypeError: Cannot read property 'toLowerCase' of undefined

For see this error http://ssfront-dev.ssyii.com/de
For see normal switch http://ssfront-dev.ssyii.com/ - and then change lang to de In right header bar.
My package.json:
"dependencies": { "@nuxtjs/axios": "^5.9.3", "@nuxtjs/device": "^1.2.4", "@nuxtjs/pwa": "^3.0.0-beta.20", "bootstrap": "^4.4.1", "bootstrap-vue": "^2.2.2", "cookie-universal-nuxt": "^2.1.0", "font-awesome": "^4.7.0", "nuxt": "^2.11.0", "nuxt-gmaps": "^1.1.7", "nuxt-i18n": "^6.5.0", "vue-awesome-swiper": "^3.1.3", "vue-notification": "^1.3.20" }, "devDependencies": { "@nuxtjs/eslint-config": "^0.0.1", "@nuxtjs/eslint-module": "^0.0.1", "@vue/test-utils": "^1.0.0-beta.31", "babel-core": "7.0.0-bridge.0", "babel-eslint": "^10.0.3", "babel-jest": "^24.9.0", "eslint": "^5.15.1", "eslint-config-airbnb-base": "^13.2.0", "eslint-config-standard": "^14.1.0", "eslint-plugin-html": "^6.0.0", "eslint-plugin-import": "2.18.2", "eslint-plugin-jest": "^22.21.0", "eslint-plugin-node": "^10.0.0", "eslint-plugin-promise": ">=4.0.1", "eslint-plugin-standard": "^4.0.1", "eslint-plugin-vue": "^5.2.2", "jest": "^24.9.0", "node-sass": "4.13.0", "nodemon": "^1.19.4", "sass-loader": "^7.3.1", "vue-jest": "^3.0.5" }

setting i18n:
[ 'nuxt-i18n', { locales: [ { name: 'English', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/uk.png', iso: 'en-GB', code: 'en', }, { name: 'Deutsch', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/de.png', iso: 'de-DE', code: 'de', }, { name: '中国 (Chinese)', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/cn.png', iso: 'zh-CN', code: 'cn', }, { name: 'Canadian', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/ca.png', iso: 'en-CA', code: 'ca', }, { name: 'Australian', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/au.png', iso: 'en-AU', code: 'au', }, { name: 'Espanol', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/es.png', iso: 'es-ES', code: 'es', }, { name: 'American', icon: 'https://d9qzjwuieyamt.cloudfront.net/res/images/_png/flags/us.png', iso: 'en-US', code: 'us', }, ], defaultLocale: 'en', loadLanguagesAsync: true, strategy: 'prefix_except_default', detectBrowserLanguage: { useCookie: true, cookieKey: 'lang', fallbackLocale: 'en', }, vueI18n: { fallbackLocale: 'en', messages: translations, }, vuex: { moduleName: 'i18n', syncLocale: true, syncMessages: false, syncRouteParams: true, }, }, ],

and plugin to switch lang:

export default ({ app }) => { app.i18n.onLanguageSwitched = (oldLocale, newLocale) => { if (process.browser) { if (app.$cookies.get('lang') !== newLocale) { app.$cookies.set('lang', newLocale); } } }; };

nodejs v: 13.7.0

gorbypark

gorbypark posted a new bug report

nuxt-i18n •

bug Translating vue-meta and prefix_except_default strategy

Version

v6.5.0

Reproduction link

https://jsfiddle.net/

Steps to reproduce

I'm using nuxt with vue-meta, nuxt-i18n with the i18n compiler and strategy: 'prefix_except_default', in nuxt.config.js. When going to url.com/es/abouto both $t('hello') and $t('title') are translated correctly. When going to the default route, url.com/about only $t('hello') is translated, but $t('title') is not.

<template>
  <div>>
    {{ $t('hello') }}
  </div>
</template>

<i18n>
{
  "en": {
    "title:": "hello title",
    "hello": "hello world!"
  },
  "es": {
    "title": "Hola tital!",
    "hello": "Hola mondial!"
  }
}
</i18n>

<script>
export default {
  head() {
    return {
      title: this.$t('title'),
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },
  nuxtI18n: {
    paths: {
      en: '/about',
      es: '/abouto'
    }
  }
}
</script>

What is expected ?

Both $t('hello') and $('title') should be translated in the default route.

What is actually happening?

Only $t.('hello') is translated, while the title ends up as "title" (or whatever the key happens to be set to).