Search code examples
javascriptvue.jsi18nextreact-i18nextvue-i18n

using i18n with multi language files in nuxt.js


I am using nuxt/i18n for a big project that needs multiple files in each folder language.

For example we have about.js imported in index.js.

I want to access and use imported about file in index or access them another files which all imported files are.

Here is index.js:

import about from './about.js'

export default {
  data(){
    return about;
  },
  home: 'خانه',
  posts: 'پست ها',
  about: 'درباره ما',
  paragraph: 'لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چ ,
  homepage: {
    title: 'عنوان تستی',
    subtitle: 'توضیحات'
  }
}

And here is about.js:

export default {
   aboutUsTitle: "متن تستی درباره ما"
}

Solution

  • for those who have the same problem as me. you can import any language folder and file you want in this way.

     modules: [
        // Doc: https://github.com/nuxt-community/axios-module#usage 
        [
          'nuxt-i18n',
          {
            strategy: 'prefix_except_default',
            defaultLocale: 'en',
            langDir: 'languages/',
            lazy: true,
            locales: [
              { code: 'fa', iso: 'fa-IR', name: 'fa', file: 'fa/index.js', dir:'rtl'          },
              { code: 'en', iso: 'en-US', name: 'en', file: 'en/index.js', dir:'ltr' }
            ]
          }
        ]
      ],
    

    here you have added a language folder that contains all of languages you want to se in your website (but as you can see it is your index file) then you have to define what file should be declared in you index.js like the example below:

    import about from './about.js'
    import homepage from './homepage.js'
    
    export default {
    about,
    homepage
    }
    

    and this is all of it. i hope it would be helpful for some of you. also i will share the code source on my github please check it out. https://github.com/rozhansh43/lang-folder