Activities

imShara

imShara posted a new feature request

nuxt-i18n •

idea Use langDir without lazy loading

What problem does this feature solve?

It's nice to use locales separated to files for better code organization, but when you need to bundle them, you lose this feature

What does the proposed changes look like?

If langDir set - use separated files
If lazy set - use lazy-loading

seltsam23

seltsam23 posted a new bug report

nuxt-i18n •

bug differentDomains totally crashes browser

Version

6.0.2

Reproduction link

https://github.com/paulgv/nuxt-i18n-example

Steps to reproduce

1.) Clone example Repo
2.) Update nuxt-i18n & nuxt to newest version
3.) Change config/index.js as shown below
4.) Make hosts-file entries for domains
5.) Make sure you don't have the i18n_redirected cookie set in your browser / clear cookies

127.0.0.1 en.nuxt.breaks
127.0.0.1 fr.nuxt.breaks
127.0.0.1 es.nuxt.breaks
const I18N = {
  differentDomains:true,
  locales: [
    {
      code: 'en',
      iso: 'en-US',
      name: 'English',
      domain: 'en.nuxt.breaks:3000'
    },
    {
      code: 'fr',
      iso: 'fr-FR',
      name: 'Français',
      domain: 'fr.nuxt.breaks:3000'
    },
    {
      code: 'es',
      iso: 'es-ES',
      name: 'Español',
      domain: 'es.nuxt.breaks:3000'
    }
  ],
  defaultLocale: 'en',
  parsePages: false,
  pages: {
    'about': {
      fr: '/a-propos',
      en: '/about-us'
    },
    'posts': {
      fr: '/articles'
    },
    'post/_id': {
      fr: '/article/:id?',
      es: '/articulo/:id?'
    },
    'dynamicNested/_category': {
      fr: 'imbrication-dynamique/:category'
    }
  },
  vueI18n: {
    fallbackLocale: 'en',
    messages: { en, fr, es }
  }
}

What is expected ?

Navigation works as expected, i18n_redirected cookie is set.

What is actually happening?

Browser is freezing as soon as you try to navigate the page via the nav-menu. i18n_redirected cookie is not set.

Additional comments?

If you set the cookie i18n_redirected manually it works as expected, but until then the browser just crashes.
It feels like there is some redirect-looping going on in the background. No Errors are thrown anywhere.

MarvinRudolph

MarvinRudolph posted a new bug report

nuxt-i18n •

bug Can't load the nuxt-i18n module in Nuxt with Typescript : SyntaxError: Unexpected character '@'

Version

v6.0.2

Reproduction link

https://github.com/nuxt-community/nuxt-i18n

Steps to reproduce

  1. Create fresh Nuxt 2.9.1 project
  2. Make TypeScript works with the guide on https://typescript.nuxtjs.org/guide/setup.html
  3. Install and add nuxt-i18n module
  4. Create a class with @Component in a layout/page

What is expected ?

  • No SyntaxError: Unexpected character '@'
  • Compatible with parsePages: true;

What is actually happening?

Using @Component in a page/layout vue single file throws a SyntaxError: Unexpected character '@'.
=> works if parsePages is set to false

Additional comments?

New issue based on https://github.com/nuxt-community/nuxt-i18n/issues/128

paulgv

paulgv posted a new question

nuxt-i18n •

Document Vuex module feature in a dedicated page

Documentation about nuxt-i18n's module is very hard to find currently, let's add a dedicated page to document what it does and how to enable it.

paulgv

paulgv posted a new question

nuxt-i18n •

StephanGerbeth

StephanGerbeth posted a new question

nuxt-i18n •

dynamic import doesn't work

Hi,

after the update to acorn 7.0.0 the dynamic import in pages doesn't work anymore.

 ERROR  Unexpected token (7:17)                                       11:33:18

  at Parser.pp$4.raise (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2836:15)
  at Parser.pp.unexpected (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:689:10)
  at Parser.pp$3.parseExprAtom (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2256:21)
  at Parser.pp$3.parseExprSubscripts (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2089:21)
  at Parser.pp$3.parseMaybeUnary (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2066:19)
  at Parser.pp$3.parseExprOps (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2010:21)
  at Parser.pp$3.parseMaybeConditional (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:1993:21)
  at Parser.pp$3.parseMaybeAssign (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:1968:21)
  at Parser.pp$3.parseFunctionBody (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2660:24)
  at Parser.pp$3.parseArrowExpression (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2645:10)
  at Parser.pp$3.parseParenArrowList (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2377:17)
  at Parser.pp$3.parseParenAndDistinguishExpression (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2343:21)
  at Parser.pp$3.parseExprAtom (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2220:43)
  at Parser.pp$3.parseExprSubscripts (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2089:21)
  at Parser.pp$3.parseMaybeUnary (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2066:19)
  at Parser.pp$3.parseExprOps (node_modules/nuxt-i18n/node_modules/acorn/dist/acorn.js:2010:21)

can someone give me some advice on how to fix the problem? Then I can provide a PR.

Cheers
Stephan

parsher

parsher posted a new bug report

nuxt-i18n •

bug nuxt-i18n makes wrong nested routes in router.js file.

Version

v5.3.0

Reproduction link

https://jsfiddle.net/boilerplate/vue

Steps to reproduce

I'm really sorry for adding the pure vue jsfiddle link.
but I need to write the issue.

The issue is from the nested directories.

I'm using nuxt-i18n 6.0.1

The nuxt-i18n can't handle more than 2 step nested directories.
it can only handle 1 step nested dirctory unlike nuxt.js

for example
home

  • my-page
    • home
      • dog
    • child

>
router.js

now :
path: "/mypage",
component: _d47506c6,
children: [ { path: 'my-page-home' …}, { path: 'my-page-home-dog' …}, {path: 'my-page-child'}]

expected
path: "/mypage",
component: _d47506c6,
children: [ { path: 'my-page', children: [ { path: 'my-page-home' …, children:[ { path: 'my-page-home-dog' …}]}, {path: 'my-page-child'} ] …},,]

What is expected ?

path: "/mypage",
component: _d47506c6,
children: [ { path: 'my-page', children: [ { path: 'my-page-home' …, children:[ { path: 'my-page-home-dog' …}]}, {path: 'my-page-child'} ] …},,]

What is actually happening?

path: "/mypage",
component: _d47506c6,
children: [ { path: 'my-page-home' …}, { path: 'my-page-home-dog' …}, {path: 'my-page-child'}]

chochihim

chochihim posted a new question

nuxt-i18n •

Why does detectBrowserLanguage use only first two letters as locale?

From https://github.com/nuxt-community/nuxt-i18n/blob/8a0ee00a0c0492c91f609f8144e8d0fe9181d88f/src/templates/middleware.js#L94, only the first two characters are used as locale. However, some languages require country sub-code to be distinguished, e.g. zh-CN, zh-HK.

Currently I define the locales in nuxt.config.js as below:

locales: [
  {
    code: "zh-cn",
    iso: "zh-CN",
    name: "简体中文",
    file: "zh-cn.json"
  },
  {
    code: "zh-hk",
    iso: "zh-HK",
    name: "繁體中文",
    file: "zh-hk.json"
  }
]

And this detectBrowserLanguage option does not work. I think it is wrong to only consider first two letters as locale. I can create pull request to change this logic if it sounds right to everyone.

seltsam23

seltsam23 posted a new bug report

nuxt-i18n •

bug Localized Paths reachable from other languages when using differentDomains

Version

v5.3.0

Reproduction link

http://jsfiddle.com

Steps to reproduce

  • Set 'differentDomains' to true in i18n config.
  • Specify 'domain' for each item in locales
  • Add page-translations to 'pages'
// nuxt.config.js
{
  i18n: {
    differentDomains: true,
    locales: [
      {
        code: 'de',
        domain: 'de.website.com'
      },
      {
        code: 'en',
        domain: 'en.website.com'
      }
    ],
    parsePages: false, 
    pages: {
      login:{
        de:'/anmelden',
        en:'/login',
      },
}

What is expected ?

de subdomain
http://de.website.com/anmelden -> 200
http://de.website.com/login -> 404

en subdomain
http://en.website.com/login -> 200
http://en.website.com/anmelden -> 404

What is actually happening?

de subdomain
http://de.website.com/anmelden -> 200
http://de.website.com/login -> 200 // should be 404

en subdomain
http://en.website.com/login -> 200
http://en.website.com/anmelden -> 200 // should be 404

Additional comments?

It is working as expected when not using custom domains:

de subdomain
http://website.com/de/anmelden -> 200
http://website.com/de/login -> 404 // works

en subdomain
http://website.com/en/login -> 200
http://website.com/en/anmelden -> 404 // works

seltsam23

seltsam23 posted a new question

nuxt-i18n •

How to access $t() in asyncData() and validate()

Is there any way to use the $t() function in the asyncData and validate hook?
For now it looks like its not working althogh $t seems to be defined:

Example Code

export default {
  validate ({app}) {
    console.log(app.$t) // [Function: t]
    console.log(app.$t('welcome')) // Error:  Cannot read property 'apply' of undefined
    return true
  },
  asyncData({app}) {
    console.log(app.$t) // [Function: t]
    console.log(app.$t('welcome')) // Error:  Cannot read property 'apply' of undefined
    return
  }
}

Why would I want to do that?
I would like to validate the route of a translated sub-category.
If there is a better way to achieve that I'd love to hear:

// locales
{ 
  en:  {
      categories: {
        dogs:'dogs',
        cats:'cats',
        fish: 'fish'
      }
  },
  de: {
      categories: {
        dogs:'hunde',
        cats:'katzen',
        fish: 'fische'
      }
   }
}

// _category.vue
export default {
  validate ({app, params}) {
     let param = params.category
     // get object from locales
     let categories = app.$t('categories')
     // check if parameter is a valid translation
     return Object.keys(categories).find(key => param == categories[key]) 
  },
}

Thank you <3

lukas-pierce

lukas-pierce posted a new question

nuxt-i18n •

infinity loop on click <nuxt-link> in production mode, diff domains: site.com, ru.site.com

my nuxt.config.js

  i18n: {
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: require('./locales/en.json'),
        ru: require('./locales/ru.json'),
      }
    },
    locales: [
      {code: 'en', iso: 'en-US', domain: process.env.DOMAIN},  //site.com ---- without subdomain!
      {code: 'ru', iso: 'ru-RU', domain: process.env.DOMAIN_RU}, //ru.site.com
    ],
    defaultLocale: 'en',
    differentDomains: true,
    seo: true,
  }

and nuxt link

<nuxt-link :to="localePath({name:'aboutme'})">{{$t("About me")}}</nuxt-link>

This nice working on ru.site.com subdomain
but on main domain site.com this look like infinity loop

Important note: this problem only on production build

sajadam98

sajadam98 posted a new question

nuxt-i18n •

detect default locale in first browse

Hi, i have work on multi language website last few days,but i have problem to load last selected language, i use cookies to keep last selected language as well as in documentation of nuxt-i18-n but i have problem in first browse because it selected automatically en for website but i want to be another language

sajadam98

sajadam98 posted a new question

nuxt-i18n •

detect default locale in first browse

Hi, i have work on multi language website last few days,but i have problem to load last selected language, i use cookies to keep last selected language as well as in documentation of nuxt-i18-n but i have problem in first browse because it selected automatically en for website but i want to be another language

aleks63

aleks63 posted a new question

nuxt-i18n •

defaultLocale with different domains (SSR)

Hello.

I use different domains and I wanna load defaultLocale on each domain.
So that the contents of the page were already in the desired language during server loading. Now the content is in the language selected in the default Locale, regardless of the domain. How to do it?

kyrsquir

kyrsquir posted a new feature request

nuxt-i18n •

idea Support multiple <template> sections with different locales?

What problem does this feature solve?

Is it possible to support multiple <template> blocks in a .vue file and automatically build routes based on that?

If this functionality is not wanted, please point me out to a proper way of translating pages which consist of large amounts of localised text mixed with markup.

What does the proposed changes look like?

Support welcome.vue file looking like this:

<template lang="pug" locale="en">
  article 
    h3 Welcome!
    //  Lots of localised content with markup here
</template>

<template lang="pug" locale="de">
  article
    h3 Willkommen!
    // Lots of localised content with markup here
</template>

and automatically create routes /en/welcome and /de/welcome or similar based on settings.

mcurtis

mcurtis posted a new question

nuxt-i18n •

How to use locale files without lazy loading?
  ['nuxt-i18n', {
    vueI18nLoader: true,
    lazy: true,
    locales: [
      {
        code: 'en',
        domain: 'www.domain.com',
        iso: 'en-US',
        file: 'en-US.json'
      },
      {
        code: 'uk',
        domain: 'www.domain.co.uk',
        iso: 'en-GB',
        file: 'en-GB.json'
      }
    ],
    differentDomains: true,
    defaultLocale: 'en',
    langDir: 'locales/'
  }],

I've set my config to the above, which works. I'd rather not lazy load the translations though, and without lazy: true, I haven't figured out any way to make it work. There are no errors or warnings, things just stop translating on the front end which I imagine means it's not loading the translation files. The documentation isn't very clear about how to use files.

dawidstolarski

dawidstolarski posted a new question

nuxt-i18n •

Different domains and routing aliases protection

I have question, that I didn't found the right answer.

I want to build page, which is multidomain. I've created locales array with Objects which contain code and domain.

My domain is dtx.local for English and dnk.local for Polish. I've generated routing aliases for it:

dtx.local/about-us
dnk.local/o-nas

and when I change the locale every link works smoothly, on english redirect to english alias, on polish it's polish.

But when I move to dtx.local/about-us and then change the link to dtx.local/o-nas it's displaying the page… But it shouldn't, it should say that page is unavailable.

Please tell me what I am doing wrong with the config.

Here's the part of nuxt.config with nuxt-i18n module's config:

['nuxt-i18n', {
parsePages: false,
strategy: 'prefixexceptdefault',
defaultLocale: false,
locales: [
{
code: 'en',
domain: 'dtx.local'
},
{
code: 'pol',
domain: 'dnk.local'
}
],
pages: {
about: {
en: '/about-us',
pol: '/o-nas'
}
},
differentDomains: true
}]

EdwinHoksberg

EdwinHoksberg posted a new question

nuxt-i18n •

Error when running tests: t.localePath is not a function

Hi, I've made a simple test with ava for my project, but everytime I run it I get the same error. When I remove the localePath function calls in my application this problem is fixed but I need these functions. This is the complete stacktrace:

[Vue warn]: Error in render: "TypeError: t.localePath is not a function"

found in

---> <Anonymous>
       <Root>

[error] t.localePath is not a function
  at Proxy.<anonymous> (webpack/bootstrap:2:0)
  at VueComponent.Vue._render (node_modules/vue/dist/vue.runtime.common.dev.js:3532:22)
  at resolve (node_modules/vue-server-renderer/build.dev.js:8400:27)
  at waitForServerPrefetch (node_modules/vue-server-renderer/build.dev.js:8272:3)
  at renderComponentInner (node_modules/vue-server-renderer/build.dev.js:8411:3)
  at renderComponent (node_modules/vue-server-renderer/build.dev.js:8368:5)
  at RenderContext.renderNode (node_modules/vue-server-renderer/build.dev.js:8279:5)
  at RenderContext.next (node_modules/vue-server-renderer/build.dev.js:2598:23)
  at cachedWrite (node_modules/vue-server-renderer/build.dev.js:2451:9)
  at renderElement (node_modules/vue-server-renderer/build.dev.js:8529:5)
  at renderNode (node_modules/vue-server-renderer/build.dev.js:8281:5)
  at resolve (node_modules/vue-server-renderer/build.dev.js:8406:5)
  at waitForServerPrefetch (node_modules/vue-server-renderer/build.dev.js:8272:3)
  at renderComponentInner (node_modules/vue-server-renderer/build.dev.js:8411:3)
  at renderComponent (node_modules/vue-server-renderer/build.dev.js:8368:5)
  at RenderContext.renderNode (node_modules/vue-server-renderer/build.dev.js:8279:5)

This is what my test looks like:

test('Route / exits and render HTML with CSS applied', async (t) => {
    const window = await nuxt.renderAndGetWindow(url('/'));
    const element = window.document.querySelector('.h1');

    t.not(element, null);
    t.is(element.textContent.trim(), 'test title');
    t.is(element.className, 'h1');
    t.is(window.getComputedStyle(element).fontSize, '3rem')
});

Can anyone help me solve this problem? Thanks!

Pernick

Pernick posted a new question

nuxt-i18n •

Type definitions are missing

Hello,

I followed the documentation steps to setup the plugin. After the installation plugin works fine. But Vetur complains about type definitions not existing on the instance. I see them in the types/ folder in the npm package, how do I import them to nuxt application globally? Thank you.

Screen Shot 2019-07-28 at 20.19.19.png

MLDMoritz

MLDMoritz posted a new feature request

nuxt-i18n •

idea Allow overrides per language

What problem does this feature solve?

Imagine news-articles in different languages and with a translated identifier(slug).

If you switch the language it should use the identifier supplied in your component rather than using the parameters from the url.

Current locale switcher would do something like this:

/:locale/news/:slug
/en/news/article
/de/news/article

it should be:

/:locale/news/:slug
/en/news/article
/de/news/artikel