javascript - Pridať podmienku RTL do hlavičky s Nuxt Js i18n

Chcel by som pridať podmienku nasledovne

if(app.i18n.locale == 'ar')

V tomto projekte používam arabčinu spolu s angličtinou. Ak je aktuálnym jazykom arabčina, do hlavičky sa pridá bootstrap-rtl.css, a ak je aktuálnym jazykom angličtina, zavolá sa bootstrap.css. Skúšal som viac ako jednu metódu a nepodarilo sa mi to.

Odpoveď č. 1

Pridajte súbor do priečinka pluginov, napríklad direction-control.js

    export default ({ app }, inject) => {
    const dir = () =>
      app.i18n.locales.find((x) => x.code === app.i18n.locale)?.dir;
      inject('dir', dir);
    };

Kým váš nuxt.config.js bude potrebovať podobný kód ako tento

  plugins: [
      '~/plugins/direction-control',  // your plugins file name
      // other plugins
    ],
    modules: [
    [
      'nuxt-i18n',
      {
        locales: [
          {
            code: 'en',
            file: 'en.json',
            dir: 'ltr',
            name: 'English',
          },
          {
            code: 'ar',
            file: 'ar.json',
            dir: 'rtl',        // that will be passed to your app
            name: 'عربي',
          },
        ],
        langDir: 'translations/',
        defaultLocale: 'ar',
      },
    ],
  ],

Teraz je čas sa zašpiniť

export default {
  mounted() {
    console.log(this.$dir()); // logs your direction 'ltr' or 'rtl'
    console.log(this.$i18n.locale);
    if (this.$i18n.locale == "ar") {
       // make some action
    }
  },
}

alebo vo vnútri šablóny ako toto

<template>
  <div :dir="$dir()">
    <Nuxt />
  </div>
</template>