[Vuejs]-Add RTL support to NativeScript VUE

by

0👍

After searching a little I achieved a solution:
To add RTL support for Vue package you need to import and register each layout in your main.app or main.ts file like so:

  Vue.registerElement('RGridLayout', () => require('@nativescript-rtl/ui').GridLayout);
  Vue.registerElement('RWrapLayout', () => require('@nativescript-rtl/ui').WrapLayout);
  Vue.registerElement('RAbsoluteLayout', () => require('@nativescript-rtl/ui').AbsoluteLayout);
  Vue.registerElement('RDockLayout', () => require('@nativescript-rtl/ui').DockLayout);
  Vue.registerElement('RStackLayout', () => require('@nativescript-rtl/ui').StackLayout);

Then for RTL layout, you need to add isRtl="true" to your element:

<Page>
  <RWrapLayout>
    <Label isRtl="true" text="Label 4" width="70" height="70" backgroundColor="yellow"/>
  </RWrapLayout>
</Page>

And consider that this plugin is not working in TNS preview mode and you need to add emulator and build your app because this plugin adds RTL layout on IOS and Android initial life cycle.

Leave a comment