javascript - Nuxt Js i18n ile head içinde RTL koşulu ekle

Aşağıdaki gibi bir koşul eklemek istiyorum

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

Bu projede Arapça ile İngilizce kullanıyorum. Eğer mevcut dil Arapça ise head bölümüne bootstrap-rtl.css ekleniyor, ve mevcut dil İngilizce ise bootstrap.css çağrılıyor, birden fazla yöntem denedim ama başarılı olamadım.

Cevap #1

Örneğin direction-control.js dosyasını eklentiler klasörüne ekleyin

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

Senin nuxt.config.js dosyan da buna benzer bir koda ihtiyaç duyacak

  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',
      },
    ],
  ],

Şimdi kirlenme zamanı

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
    }
  },
}

veya bunun gibi bir şablonun içinde

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