Repository nuxt-i18n

Capu-zennio

Capu-zennio posted a new question

nuxt-i18n • 7 hours ago

Browser detection is not working with nuxt generate.

Since the browser detection is done in the middleware, it doesn't fire when loading a static html page created with nuxt generate.

Is this intended or a bug?

BroTrue

BroTrue posted a new question

nuxt-i18n • a day ago

redirectCookieKey is not working.

1) nuxt-i18n version: 5.4.3
2) nuxt.config

modules: [
   ['@nuxtjs/axios'],
   ['@nuxtjs/auth'],
   ['nuxt-i18n', {
     locales: [
         { code: 'en', iso: 'en-US' },
         { code: 'fr', iso: 'fr-FR'}
       ],
     baseUrl: environment.API_URL,
     defaultLocale: 'fr',
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'i18n_redirected'
     },
     useRedirectCookie: true,
     redirectCookieKey: 'i18n_redirected',
     vueI18n: {
       fallbackLocale: 'fr',
       messages: {
         'en': require('./locales/en.json'),
         'fr': require('./locales/fr.json')
       }
     }
   }],

Problem:
useRedirectCookie: true - is not working , also tried with redirectCookieKey: 'i18n_redirected' and redirectCookieKey: 'redirected',
When I switch lang by calling function for example switchLocalePath('en') it doesnt save It to cookies and doesn't use when I enter site next time, (but switching to default). Also strange behaviour when I enter localhost:5876/en/ (with / at the end), It dublicate cookies and We got 2 i18n_redirected.
What I want to achieve:
When first time enter to website it set lang from default option to cookies. When change lang by click on navbar - it change cookies, and when I will enter next time website will use that lang.
Someone can help me? Or maybe im doing something wrong .. =/

BroTrue

BroTrue posted a new question

nuxt-i18n • a day ago

redirectCookieKey

1) nuxt-i18n version: 5.4.3
2) nuxt.config

modules: [
   ['@nuxtjs/axios'],
   ['@nuxtjs/auth'],
   ['nuxt-i18n', {
     locales: [
         { code: 'en', iso: 'en-US' },
         { code: 'fr', iso: 'fr-FR'}
       ],
     baseUrl: environment.API_URL,
     defaultLocale: 'fr',
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'i18n_redirected'
     },
     useRedirectCookie: true,
     redirectCookieKey: 'i18n_redirected',
     vueI18n: {
       fallbackLocale: 'fr',
       messages: {
         'en': require('./locales/en.json'),
         'fr': require('./locales/fr.json')
       }
     }
   }],

Problem:
useRedirectCookie: true - is not working , also tried with redirectCookieKey: 'i18n_redirected' and redirectCookieKey: 'redirected',
When I switch lang by calling function for example switchLocalePath('en') it doesnt save It to cookies and doesn't use when I enter site next time, (but switching to default). Also strange behaviour when I enter localhost:5876/en/ (with / at the end), It dublicate cookies and We got 2 i18n_redirected.
What I want to achieve:
When first time enter to website it set lang from default option to cookies. When change lang by click on navbar - it change cookies, and when I will enter next time website will use that lang.
Someone can help me? Or maybe im doing something wrong .. =/

jimpsson

jimpsson posted a new question

nuxt-i18n • a day ago

How to make lang switcher reactive?

I am trying to make language reactive, i would like it to update languages on my page when chaining it.

In my navbar I use:

<nuxt-link :to="switchLocalePath('en')" class="navbar-item">English</nuxt-link>
<nuxt-link :to="switchLocalePath('sv')" class="navbar-item">Svenska</nuxt-link>
``

From my `nuxt.config.js`: 
[
  'nuxt-i18n',
  {
    detectBrowserLanguage: true,
    locales: [
      {
        code: 'sv',
        iso: 'sv-SE',
        name: 'Svenska',
        file: 'sv-SE.js'
      },
      {
        code: 'en',
        iso: 'en-US',
        name: 'English',
        file: 'en-US.js'
      }
    ],
    lazy: true,
    langDir: 'lang/',
    seo: true,
    defaultLocale: 'sv',
    vueI18n: {
      fallbackLocale: 'sv'
      /*
      messages: {
        en: {
        },
        sv: {
        }
      }
      */
    }
  }
],

```

I have tested mapping the state of i18n.locale to a page component and it will not react or update until i manually update the page.

I guess the problem have to do with some middleware or such that I would need to implement, but I have tried many things and cannot get it to work, anyone?

adrienbaron

adrienbaron posted a new bug report

nuxt-i18n • 3 days ago

bug Nuxt i18n triggers vue-meta getMetaInfo for every component created/destroyed

Version

v5.4.3

Reproduction link

https://codesandbox.io/s/github/adrienbaron/nuxt-i18n-performance-issue

Steps to reproduce

  • Open Chrome dev tools
  • Go to the performance tab.
  • Click on record in the performance tab
  • Toggle the list to create items
  • Stop recording

You'll notice that getMetaInfo from vue-meta was triggered by the creation of BasicListItems. They do not have meta info so this should not happen.

What is expected?

getMetaInfo from vue-meta should not be triggered when components without meta info are created.

What is actually happening?

getMetaInfo is triggered by the creation of any component.

Additional comments?

The reason this seems to be happening is that Nuxt i18n registers this mixin globally: https://github.com/nuxt-community/nuxt-i18n/blob/master/src/plugins/seo.js#L3.

The mixin registers the head() hook for every single component. This is the hook used by Nuxt for page meta info in vue-meta.
The hook method checks whether this._hasMetaInfo is true for the component, but it is always true as this._hasMetaInfo is set to true if the head hook is defined. (see: https://github.com/declandewet/vue-meta/blob/master/src/shared/plugin.js#L47 and https://github.com/nuxt/nuxt.js/blob/dev/lib/core/meta.js#L17).

This has a big impact on performance on big pages as any components created triggers a recursive search for meta from the root component. And for each component the alternates meta links are computed and merged with the ones from the parent.

A small mitigation is setting seo: false, but you still get the recursion, and you loose the alternate links.

I first thought this was an issue in vue-meta and filed an issue there: https://github.com/declandewet/vue-meta/issues/278.

I'm open to work on a fix and do a pull request, something like managing to only register this hook on nuxt pages component for example could be a solution.

Magnum5234

Magnum5234 posted a new bug report

nuxt-i18n • 6 days ago

bug nuxt-i18n <-> vuelidate dynamic validation issue

Version

5.4.3

Reproduction link

https://codesandbox.io/s/vy54y194yy

Steps to reproduce

Apparently there seems to be an issue that the dynamic validations are no longer triggered, when "nuxt-i18n" is used.

I reproduced the issue here:
[broken]
https://codesandbox.io/s/vy54y194yy

[working]
https://codesandbox.io/s/ywxknqooxv

The example is the one used in the vuelidate documentation: https://monterail.github.io/vuelidate/#sub-dynamic-validation-schema

The only difference between the working and broken example is that in the working one the module for nuxt-i18n is commented out in the nuxt config.

What is expected ?

The expected behavior is that the validation configuration should change when the checkbox is clicked.

What is actually happening?

Validation configuration does not change.

Additional comments?

Since I'm not really sure who can fix this issue I created this issue for nuxt-i18n and vuelidate.

Thanks in advance :)

Magnum5234

Magnum5234 posted a new bug report

nuxt-i18n • 6 days ago

bug nuxt-i18n <-> vuelidate dynamic validation issue

Version

5.4.3

Reproduction link

https://codesandbox.io/s/vy54y194yy

Steps to reproduce

Apparently there seems to be an issue that the dynamic validations are no longer triggered, when "nuxt-i18n" is used.

I reproduced the issue here:
[broken]
https://codesandbox.io/s/vy54y194yy

[working]
https://codesandbox.io/s/ywxknqooxv

The example is the one used in the vuelidate documentation: https://monterail.github.io/vuelidate/#sub-dynamic-validation-schema

The only difference between the working and broken example is that in the working one the module for nuxt-i18n is commented out in the nuxt config.

What is expected ?

The expected behavior is that the validation configuration should change when the checkbox is clicked.

What is actually happening?

Validation configuration does not change.

Additional comments?

Since I'm not really sure who can fix this issue I created this issue for nuxt-i18n and vuelidate.

Thanks in advance :)

rchl

rchl posted a new bug report

nuxt-i18n • 6 days ago

bug Duplicate route names with prefix_and_default strategy

Version

v5.3.0

Reproduction link

https://codesandbox.io/s/ql7wx2mvk6

Steps to reproduce

  1. Configure nuxt-i18n module with these settings:
    [
      "nuxt-i18n",
      {
        locales: [
          { code: "pt", iso: "pt-PT", file: "pt.json" },
          { code: "us", iso: "en-US", file: "en.json" }
        ],
        langDir: "locales/",
        lazy: true,
        strategy: "prefix_and_default",
        defaultLocale: "us"
      }
    ]
  1. Load the root path.
  2. Look at the console (the server one, at the bottom of the codesandbox UI)

What is expected ?

No warnings about duplicated routes.

What is actually happening?

Getting console warnings:

[vue-router] Duplicate named routes definition: { name: "about___us", path: "/us/about" } 
[vue-router] Duplicate named routes definition: { name: "index___us", path: "/us" }

Additional comments?

Appears to be due to using strategy: "prefix_and_default", setting which creates routes with duplicate names for default locale.

albanm

albanm posted a new question

nuxt-i18n • 7 days ago

SEO option, vuetify and vue-meta

Sorry if this is not a proper bug report. I just don't have the time to build a code sample right now. I just thought that sharing the result of my last hour of debugging might help other people.

Using the latest nuxt-i18n along with vuetify deactivates the custom theme of vuetify.

Using the option "seo: false" in nuxt-i18n fixes the problem.

From what I understand this is because of the use of vue-meta by these 2 modules. Vuetify defines some metaInfo that is just ignored when using seo option of nuxt-i18n.

henrik377

henrik377 posted a new question

nuxt-i18n • 11 days ago

How can I get what ISO the user has in my pages?

I've setup nuxt-i18n in nuxt. config like this:
locales: [
{
code: 'en',
iso: 'en-US'
},
{
code: 'sv',
iso: 'sv-SE'
}

I know how to get the locale through app.i18n.locale but I am not sure how to get the iso in my vue files. Need it to pass on to prismic for multilanguage support. So basically, how do I get the related iso in my pages?

begueradj

begueradj posted a new bug report

nuxt-i18n • 11 days ago

bug Getting 404 HTTP error code whenever nuxt-i18n is used

Version

v5.4.3

Reproduction link

https://github.com/begueradj/nuxti18n-404

Steps to reproduce

Clone my repo and follow the steps described in README file.

What is expected ?

I expect to launch the server and not get a 404 error page

What is actually happening?

The server launches but I am landing all the time on a 404 error page even if I have a simple and clean /pages/index.vue file.

Additional comments?

begueradj

begueradj posted a new bug report

nuxt-i18n • 12 days ago

bug Can not use nuxt-i18n at all

Version

v5.4.2

Reproduction link

https://github.com/begueradj/nuxti18nerror

Steps to reproduce

  1. Either clone my project and follow the README file instructions
  2. Or create the a Nuxt.js project: yarn create nuxt-app my-project, then install the plugin: yarn add nuxt-i18n , then add it to the configuration file nuxt.config.js as the official documentation says: modules: [ ['nuxt-i18n', { // Options }] ]

What is expected ?

I expect to launch the server without errors when I run yarn run dev. As simple as that.

What is actually happening?

When I run yarn run dev I am getting this error message:

INFO Building project

✖ fatal /home/begueradj/nuxti18nerror/nodemodules/nuxt-i18n/src/helpers/components.js:1 Error: Cannot find module 'acorn-walk' at Object.<anonymous> (/home/begueradj/nuxti18nerror/nodemodules/nuxt-i18n/src/helpers/components.js:5:16)
at Object.Module._extensions..js (module.js:664:10)
Nuxt Fatal Error :(
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

begueradj

begueradj posted a new bug report

nuxt-i18n • 12 days ago

bug lazy loading with nested roots not working

Version

v5.3.0

Reproduction link

https://github.com/begueradj/nuxti18n-with-nested-routes

Steps to reproduce

Clone my repo and follow the simple steps in the README file

What is expected ?

I want to launch the server ẁith yarn run dev, I type on the browser: http://localhost:3000/1 and then I click on Francais to see my text translated.

What is actually happening?

When I launch the server ẁith yarn run dev, and I type on the browser: http://localhost:3000/1 I click on Francais but the text does not get translated at all.

When I refresh the page, the translation works. But I do not want the user to refresh the page to see the translations working. The translations should work on a simple click.

abdokouta

abdokouta posted a new question

nuxt-i18n • 14 days ago

Rtl option

Hello, i have tried so many ways to implement RTL with i18n and i can't achieve that.. any help plz?

webmint

webmint posted a new bug report

nuxt-i18n • 15 days ago

bug I18n breaks possibility to load async components inside pages

Version

v5.3.0

Reproduction link

https://github.com/webmint/nuxt-i18n-bug

Steps to reproduce

1) Install nuxt install i18n.
2) in for example pages/index try to import components like this Logo: () => import('~/components/Logo'),
3) on build u will receive error. This error dissapear when removing async import from file or removing i18n

Also - this happens ONLY when u do such import in pages/**

Screenshot from 2018-10-08 18-08-10.png

What is expected ?

Load async component

What is actually happening?

App fails

Additional comments?

This problem was in 5.3.0 and also exists at 5.40

kevinmarrec

kevinmarrec posted a new feature request

nuxt-i18n • 18 days ago

idea Provide TypeScript TypeDefs for localePath/switchLocalePath/getRouteBaseName functions

What problem does this feature solve?

This feature allows to use Nuxt-i18n without TypeScript errors and enable Autocompletion inside TypeScript Vue Class Decorators

Screenshot_9.png

What does the proposed changes look like?

Screenshot_10.png

blowsie

blowsie posted a new question

nuxt-i18n • 19 days ago

dir / rootDir option

I generated my app using create-nuxt-app and then i picked adonis for my api.

The nuxt adonis template moves the nuxt directory and nuxt config directory. As stated here.
https://github.com/nuxt-community/adonuxt-template#user-content-adonisjs-changes

I think this causes nuxt-18n to break, i looked at the options for the ability to configure this but couldn't see an options.

Perhaps nuxt i18n should be looking at the srcDir option in the nuxt base config?

van-koelljor

van-koelljor posted a new question

nuxt-i18n • 19 days ago

Server side loaded locales are being overwritten on client side

I am currently working on a nuxt project that is using nuxt-i18n for translations. For the most part of the site i am using my initially defined locale-files and lazy-load the locales depending on the needed language.
On one page however, i would like to load the respective locales asynchronously. Due to their huge filesize, i don't want to load all locales initially but only on this single page.

I am currently loading the needed locale inside the fetch-method which is called before loading the page component. After awaiting the response i want to merge my localMessages with the fetched ones, using the i18n.mergeLocaleMessage method.

Now as a result, the needed locales are being loaded, merged and displayed correctly for a brief moment after being overwritten by the locales that do not contain the merged ones yet. Now only the translation keys are displayed.

If the fetch method is now called again, but this time on client side (e.g. while using a nuxt-link), everything works as intended.

Summarized:

  • I want to load and use locale-files asynchronously on single pages only
  • the locales should be loaded on server side
  • What am i doing wrong?

I have the feeling, i am missing something elementary here. But reading docs and source-code didn't answer my questions so i am kindly asking for your help here.

I created a github repo for demonstration-purposes: https://github.com/van-koelljor/nuxt-async-locale
Feel free to check it out, run yarn install and yarn dev to see the behaviour i am talking about.

(I also created a code-sandbox, but the sandboxes behaviour differs slightly from my descriptions. Also, configuring a default locale doesn't work, so you have to add a /en or /fr manually: https://codesandbox.io/s/j1lo65o1k3)

Livog

Livog posted a new bug report

nuxt-i18n • 19 days ago

bug Cannot read property 'iso' of undefined

Version

v5.3.0

Reproduction link

https://github.com/Livog/nuxt-i18n-bug

Steps to reproduce

Node Version: 9.7.1
NPM Version: 6.4.1
Nuxt Version: 2.1.0
Nuxt i18n Version: 5.3.0

I m getting this error whenever I install the repo that I linked.
TypeError: Cannot read property 'iso' of undefined

What is expected ?

No bugs.

What is actually happening?

This does not seem to cause any problem, just worried it will cause a problem later.

Additional comments?

I have noticed that I did set parsePages to true I think and then I stopped happening but not sure if that's the case. I have tested it on my mate's computer and he got the same error. This is a very scaled down version of what I m currently working on but it got the same dependencies. If there are parts missing going to API that doesn't work I m sorry.

I renamed the package-lock since my git did not want to push it, don't know why. Just rename it back to lock dependencies.

jovanmaric

jovanmaric posted a new question

nuxt-i18n • 20 days ago

Support for yaml-loader

Is there a way to get yaml-loader as the pre-loader to vue-i18n-loader?
The Vuei18n docs state the following: http://kazupon.github.io/vue-i18n/guide/sfc.html#yaml-loading
However nuxt does not accept the provided configuration as with vue generated with vue-cli unfortunately.