CODEWITHSUNDEEP
vue.jsnuxt.jsserver-side-renderingnuxt-i18n
zarpio
zarpio

Reputation: 7358

How to configure nuxt-i18n for static assets files?

Please note, I have some js files included as follows, from the root "static" directory.

head: {
script: [{
    type: 'text/javascript',
    src: 'js/jquery.min.js',
    body: true
  },
  {
    type: 'text/javascript',
    src: 'js/bootstrap.min.js',
    body: true
  },
  {
    type: 'text/javascript',
    src: 'js/slick.min.js',
    body: true
  },
  {
    type: 'text/javascript',
    src: 'js/script.js',
    body: true
  }
]},

configured i18n as follows

i18n: {
    locales: [{
        code: 'en',
        name: 'English',
        file: 'en-US.js'
      },
      {
        code: 'ar',
        name: 'Arabic',
        file: 'ar-AR.js'
      }
    ],
    defaultLocale: 'en',
    lazy: true,
    langDir: 'lang/',
    defaultLocale: 'en',
    vueI18n: {
      fallbackLocale: 'en'
    }
  },

Using en there is no issue with loading my js file, but when I switch from en to ar, browser console gives me the following error for all included files from the static directory.

GET http://localhost:3000/ar/js/jquery.min.js net::ERR_ABORTED 404 (Not Found)

enter image description here

Upvotes: 2

Views: 2951

Answers (1)

kissu
kissu

Reputation: 46774

Not sure how this is even working when set to English, but if you have langDir: 'lang/', your files should be at the root of the project into a lang directory (at the same level as of the package.json, nuxt.config.js etc).

I'm not even sure what even is the first snippet.

Here is my nuxt-i18n config

[
  'nuxt-i18n',
  {
    defaultLocale: FRENCH_LOCALE,
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'detected_locale',
      fallbackLocale: FRENCH_LOCALE,
    },
    strategy: 'no_prefix',
    vueI18n: {
      fallbackLocale: FRENCH_LOCALE,
      silentFallbackWarn: process.env.NODE_ENV === 'production',
      silentTranslationWarn: process.env.NODE_ENV === 'production',
      warnHtmlInMessage: 'error',
      escapeParameterHtml: true,
    },
    vueI18nLoader: true,
    vuex: {
      syncLocale: true,
      // syncMessages: true,
      syncRouteParams: false,
    },
    lazy: true, // not really working: https://github.com/nuxt-community/i18n-module/issues/905
    langDir: 'locales/',
    locales: [
      {
        code: 'en',
        file: 'en.json',
        iso: 'en',
      },
      {
        code: 'fr',
        file: 'fr.json',
        iso: 'fr',
      },
    ],
  },
],

With my i18n files located at /locales at the root level. enter image description here

PS: I'm not sure why you do have your files publicly available in the static folder. Any specific reason ?

EDIT to answer some questions in the comments.

static directory is used to share some public files, that can be accessed by search engines, some favicons and alike. They are not used to load any kind of script.

Packages like Boostrap and alike, can be access via the official modules way, here is an example in the official docs: https://bootstrap-vue.org/docs#nuxtjs-module. This is aimed for some quick and simple setup of some packages for Nuxt.

If you want to add packages to your whole app, you can load script directly in the head-script. This is usually not the recommended/official way and it should NOT be used to load some library from a CDN (especially jQuery, in a Nuxt app).

Of course, all of the 3 paragraphs above are totally unrelated on how to configure nuxt-i18n locales, just to be clear.

Upvotes: 3

Related Questions