Activities

remychvn

remychvn posted a new feature request

nuxt-i18n •

idea "Cookies" library causes a significant increase of vendors bundle size

What problem does this feature solve?

Reducing client bundle size to improve website load time

Hi,

I noticed that the addition of nuxt-i18n increased a lot my vendor.app.js bundle size
I looked for the source of this significant increase.
It seems that it's caused by the import of https://github.com/pillarjs/cookies that calls nodejs functions. (http and crypto)
Due to this, webpack adds many libraries to vendor bundle. Is this really necessary on the client side, just for a cookie library? I didn't dig deeper into the codebase to affirm that.
Screenshot from 2019-06-22 01-43-38.png

I dont know if you can do something to prevent this or if we must extend the nuxtjs webpack configuration ? How ?

shlima

shlima posted a new bug report

nuxt-i18n •

bug Release brokes IE 11

Version

v5.2.1

Reproduction link

http://ie11.com

Steps to reproduce

nuxt-i18n v5.12.5 adds the is-https dependency, which code is not transpiled properly.

IE 11 fails in the following line here: (default function arg xForwardedProto = true)

function isHTTPS(req, xForwardedProto = true) {
...
}

With the following error:

SCRIPT1006: Expected ')'

What is expected ?

Works

What is actually happening?

Not working

shlima

shlima posted a new question

nuxt-i18n •

v5.12.5 broken in IE 11

nuxt-i18n v5.12.5 adds the is-https dependency, which code is not transpiled properly.

IE 11 fails in the following line here: (default function arg xForwardedProto = true)

function isHTTPS(req, xForwardedProto = true) {
...
}

With the following error:

SCRIPT1006: Expected ')'
duydongoc1996

duydongoc1996 posted a new question

nuxt-i18n •

Lazy load can not switch language

I have an application which have only 2 language: (en, fr). But i can not switch language.
I have many languages to do, but i try it with only 2 languages first.

The error was detected is "Cannot translate the value of keypath 'test'. Use the value of keypath as default."

My setting is:

modules: [
'@nuxtjs/vuetify',
'@nuxtjs/eslint-module',
['nuxt-i18n', {
locales: [
{
name: 'English',
code: 'en',
iso: 'en-US',
file: 'en.js'
},
{
name: 'France',
code: 'fr',
iso: 'fr-FR',
file: 'fr.js'
}
],
lazy: true,
langDir: 'lang/',
defaultLocale: 'vi'
}]

My en.js:

export default {
test: 'Welcome'
}

My fr.js:

export default {
test: 'nope'
}

My display code:

This is the text: {{ $t('test') }}

After that i open chrome dev tool, type in the console:

app.vue.$t('test','fr') => I got this "Cannot translate the value of keypath 'test'. Use the value of keypath as default."

Another command is:

app.vue$i18n.locale = 'fr' => I got the same problem.

Which any language i set in the "defaultLocale", it's work. But if i switch to another language, i got the above error.

All dependencies are the newest. I installed them with Yarn

I create a very simple example, but it doesn't work. I hope someone can help me. Thanks you

jacobcnhk

jacobcnhk posted a new question

nuxt-i18n •

How the custom paths support other languages

Currently, custom paths only support English, numbers and symbols. Can it support other languages in Unicode? Thank you.

wolfika

wolfika posted a new question

nuxt-i18n •

Usage with nuxt-property-decorator - Property '$i18n' does not exist on type 'Vue'

Hi,

I'm using nuxt-i18n along with nuxt-property-decorator in a TypeScript-based project. When attempting to use $i18n.t() in a component's computed property, type checking fails, because Property '$i18n' does not exist on type 'Vue'..
Relevant component code (simplified):

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  computed: {
    roles() {
      return this.$store.state.auth.user.roles.map((role: string) => this.$i18n.t(`roles.${role}`)).join(', ');
    },
  },
})
export default class PNavigation extends Vue {}
</script>

Is there perhaps something I'm doing wrong? I would appreciate any help or guidance on how to make this pass the type checker. Otherwise, the code works as expected, but I would prefer if there were no compile-time type errors.

Thanks!

incompletude

incompletude posted a new question

nuxt-i18n •

Missing trailing slash

I have my modules configured this way:

  modules: [
    [
      'nuxt-i18n',
      {
        locales: ['br', 'en'],
        defaultLocale: 'br',
      },
    ],
  ],

Inside my pages I have a path definition:

  nuxtI18n: {
    paths: {
      br: '/empresas/',
      en: '/companies/',
    },
  },

Then I'm using a localePath to generate proper links:

           <nuxt-link class="nav-side-group" v-bind:to="localePath('companies', 'br')">
              <span class="icon">
                <i class="fas fa-store-alt"></i>
              </span>
            </nuxt-link>

The generated link does not contain the trailing slash. Is it possible to solve this? The url example.com/companies should be example.com/companies/.

mrKorg

mrKorg posted a new question

nuxt-i18n •

https://cmty.app/nuxt/issues/new?repo=nuxt-i18n

I have warning during running dev script.

WARN in ./.nuxt/i18n.routing.middleware.js
"export 'isIgnoredPath' was not found in './i18n.routes.utils'

And error in console
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

I have this error only on routes like post/:id

How I can fix it?

fanwenfu

fanwenfu posted a new question

nuxt-i18n •

Cannot read property '_t' of null & Cannot read property 'locale' of null

Version
v5.12.3
Reproduction link
Not necessarily reproduce
58614230-6af65f00-82ea-11e9-84f2-8b466152e5cd.png
58614257-7c3f6b80-82ea-11e9-849b-21564c4447d7.png
58614281-8fead200-82ea-11e9-9b09-b6fd9c85efc0.png
What is expected ?
Working normally
My configuration
58614116-1652e400-82ea-11e9-889b-bcd3e4eebbc9.png

fanwenfu

fanwenfu posted a new question

nuxt-i18n •

Cannot read property '_t' of null & Cannot read property 'locale' of null

Version
v5.12.3

Reproduction link
Not necessarily reproduce
image
image
image

What is expected ?
Working normally

My configuration
image

acrolink

acrolink posted a new question

nuxt-i18n •

Setting the value of dir and lang attributes of the html tag based on current language

I have a site in two languages: English and Hebrew. English is LTR and Hebrew is RTL (right-to-left). I have managed to set up nuxt to serve the desired language based on the url prefix e.g. /en or /he. However, what still needs to be done is to change the dir and lang attributes' values of the html tag based on the currently viewed language i.e.:

<html lang="he" dir="rtl">..</html>
and
<html lang="en" dir="ltr">..</html>

This is very essential for any site serving both rtl and ltr languages and I believe this feature must be integrated into this module. The question is how to do that?

I have managed to do that meanwhile by writing this code into a plugin:

export default function ({
    app
}) {

    let locale = app.i18n._vm.locale || 'en'
    if (locale === 'he') {
       app.head.htmlAttrs.lang = 'he'
       app.head.htmlAttrs.dir = 'rtl'
    }

    // beforeLanguageSwitch called right before setting a new locale
    app.i18n.beforeLanguageSwitch = (oldLocale, newLocale) => {
        console.log(oldLocale, newLocale)
    }
    // onLanguageSwitched called right after a new locale has been set
    app.i18n.onLanguageSwitched = (oldLocale, newLocale) => {
        console.log(oldLocale, newLocale)
    }
}

This works fine in development but not in production (when generating static files).

dsvanidze

dsvanidze posted a new question

nuxt-i18n •

how to access i18n properties and methods in vuex getters?

I use vuex store with Module mode. I can access e.g. "locale" property in vuex actions with this.app.i18n.locale or in plugin with context.app.i18n.locale and it works very well. But in vuex getters I can't access with it. How can I access i18n properties and methods in vuex getters?

tex0l

tex0l posted a new bug report

nuxt-i18n •

bug Dynamic import is broken when using nuxt-i18n

Version

v5.3.0

Reproduction link

https://codesandbox.io/embed/l4921qqll7

Steps to reproduce

Run yarn run dev in the repro link.

What is expected ?

It should work.

What is actually happening?

ERROR Unexpected token (6:16)

Additional comments?

The dynamic import of Logo.vue in index.vue breaks nuxt-i18n. Dynamic import is supported (and even used on their website) by nuxtjs to enable webpack to split the code.

rchl

rchl posted a new bug report

nuxt-i18n •

bug Outdated documentation

Version

v5.3.0

Reproduction link

https://nuxt-community.github.io/nuxt-i18n/lang-switcher.html

Steps to reproduce

-

What is expected ?

-

What is actually happening?

-

Additional comments?

There are some changes to documenation that are not yet deployed to documentation site. For example https://nuxt-community.github.io/nuxt-i18n/lang-switcher.html should have some more stuff.
Can we deploy new documentation?

pi0

pi0 posted a new bug report

nuxt-i18n •

bug Implicit dependency on `vue-template-compiler`

Version

v5.3.0

Reproduction link

https://github.com/nuxt/now-builder/issues/42

Steps to reproduce

-

What is expected ?

-

What is actually happening?

-

Additional comments?

This module has an implicit dependency on vue-template-compiler here. All direct dependencies like this should be specified in dependencies section of package.json. When using nuxt-start (a serverless) build of nuxt, this dependency is not available.

It is also better to only require build related deps on build:before nuxt hook to prevent additional overhead when running in production mode.

gianniskarmas

gianniskarmas posted a new bug report

nuxt-i18n •

bug multiple domains is broken - 'req is not defined'

Version

v5.3.0

Reproduction link

https://codesandbox.io/s/wwwp0jpxow?from-embed

Steps to reproduce

still haven't dug deep enough but after upgrading I started getting this error

What is expected ?

Multiple domains to work

What is actually happening?

req is not defined

Additional comments?

Adding req in

export default async (context) => {
  const { app, route, store, res, req } = context;

within /node_modules/nuxt-i18n/src/main.js solves the problem

aldarund

aldarund posted a new bug report

nuxt-i18n •

bug Duplicate route names with prefix_and_default strategy and nuxt-child

Version

5.12.0

Reproduction link

https://codesandbox.io/s/q3lyoq6vkq

Steps to reproduce

Structure is following:

pages
  account
     child.vue
  account.vue

account.vue content

<template>
  <nuxt-child/>
</template>

What is expected ?

no duplicate children route generated

What is actually happening?

duplicate children route generated

11:00:57  WARN  [vue-router] Duplicate named routes definition: { name: "account-child___en-us___default", path: "/en-us/account/child" }


11:00:57  WARN  [vue-router] Duplicate named routes definition: { name: "account-child___en-us", path: "/en-us/account/child" }

Additional comments?

Related https://github.com/nuxt-community/nuxt-i18n/issues/140

TarekAS

TarekAS posted a new question

nuxt-i18n •

Beginner question

Hello, I'm new to Nuxt (and Vue in general) and I'm interested in integrating i18n into my project. I have a couple of questions:

  1. My use case is very straightforward, I just want to manage UI translations (the content is constant). I don't need features like routing prefixes/rewrites. There is no SSR, just pre-rendering and the rest is SPA. Does this module fit my use-case, or am I better off with just vue-i18n?

If this module fits my use case, what is a good sample configuration?

  1. Can I use vue-i18n-loader and lazy loading simultaneously? In particular, I'm asking if lazy loading applies to the <i18n></i18n> blocks.

Thank you for your time.

jburke1203

jburke1203 posted a new question

nuxt-i18n •

support for number localization?

How do you configure number localization in Nuxt?

I have my nuxt.config like so

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

but if I try to add a template like so to a page

<p>{{ $n(100, 'currency') }}</p>

I get the error in my console:

[vue-i18n] Fall back to 'en-US' number formats from 'en number formats.

I tried searching for examples but couldn't find any in the nuxt documentation.

berenicestr

berenicestr posted a new question

nuxt-i18n •

Structure subpages/children - custom paths - Nuxt-i18n - url deleted

Good Morning,

When I generate subpages in my structure it doesn't generate the link to my url and appears a vue-router error. Any help?

package.json
"nuxt-i18n": "^5.10.0",

I have this sample structure pages:

pages

  • test/
    -- index.vue
    --dt/
    ---index.vue

In my configuration I have this:

const I18N = {
vueI18nLoader: true,
locales: [
{
code: 'en',
name: 'English',
iso: 'en-US',
file: 'en-US.js',
flag: '/EN-flag.png'
},
{
code: 'es',
name: 'Español',
iso: 'es-ES',
file: 'es-ES.js',
flag: '/ES-flag.png'
}
],
defaultLocale: 'es',
fallbackLocale: 'es',
lazy: true,
langDir: 'lang/',
strategy: 'prefixexceptdefault',
detectBrowserLanguage: {
useCookie: true,
cookieKey: 'i18n_redirected',
alwaysRedirect: false
},
baseUrl: 'https://domain',
seo: false,
parsePages: false, // Disable acorn parsing
pages: {

test: {
en: '/test',
es: '/prueba'
},
'test/dt/index': {
en: '/test/dt',
es: '/prueba/dt'
}

}

in my view the link to my subpage:
<v-list-tile router :to="localePath('test/dt/index')"

this is my error, and it doesn't generate any link:
WARN [vue-router] Route with name 'test/dt/index___es' does not exist

Instead when I link to the parent this is OK:
<v-list-tile router :to="localePath('test')"

I try to follow this: https://nuxt-community.github.io/nuxt-i18n/routing.html#custom-paths

Please, ¿Any help?