Vuetify: [Enhancement] rtl support

[DJafari]

do you plan to support rtl languages ?

[johnleider]

I'd really need an example of what you are asking for, excuse my ignorance.

[DJafari]

for example this is rtl material design version :

http://mdl.rtlcss.com/

all of float, text-align, padding, margins and ... flipped by rtlcss

[johnleider]

I have some unfortunate news. While Vuetify most certainly will support RTL, it will not make v1.0 release. The form components were going to create a difficult set of changes that would be most suited for what v1.1 is (Form patch). It would of added too much potential risk for issues on 1.0 release next month.

While this feature is being worked on, one of the community members, @Devo has started to work on an implementation in the mean time, https://github.com/devmedoo/vuetify. I've opened a channel on the community specific for RTL discussion and invite everyone to join, https://discord.gg/C4j9SKg.

[zahrahajilary]

please release RTL version

[johnleider]

We will, just not for 1.0.

[Pezhvak]

+1 really need RTL support!

[familysoltani]

please release RTL version sooner

[johnleider]

RTL is a very large task and is something we take very seriously. There is no point in releasing an implementation that is going to not be up to par or cause potential issues in the long run.

We hear your voices and we will continue to work on this.

[Pezhvak]

can i be any help? @johnleider

[DJafari]

@johnleider currently you are in v1.0.4 but any news from rtl support ? :-(

[johnleider]

These are patches. RTL won't come until minor releases. The input refactor
for v1.1 is the start of the RTL conversion.

On Mar 3, 2018 3:33 PM, "Davood Jafari" [e-mail] wrote:

@johnleider https://github.com/johnleider currently you are in v1.0.4
but any news from rtl support ? :-(

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuetifyjs/vuetify/issues/262#issuecomment-370177639,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AIpOgqSsCXg6nK7Rl3Vdm43WTdU08Jl4ks5tav4EgaJpZM4MoRJq
.

[arsangamal]

Adding dir="rtl" attribute to the v-data-table solves the issue for me but with some small customizations

[kouchakyazdi]

@ArsanGamal
it won't

[meyt]

Another try https://meyt.github.io/vuetify-rtl-style/
https://github.com/meyt/vuetify-rtl-style

P.S: Currently i have no issue and works fine, but still its an Alpha!

[johnleider]

The first round of RTL updates is in v1.1

[alireza4050]

There is a much simpler way to accomplish RTL support:

1. Don't have any direction dependent __inline__ css styles like margin-left, translateX, etc. put them in classes instead if possible.
2. Add postcss-rtl plugin
3. Put dir="rtl" attribute on root html element

Then all you need is this:

npm i -D postcss-rtl

and add this to .postcssrc file or postcss section in package.json:

    "plugins": {
     ...
      "postcss-rtl": {}
    }

[johnleider]

If you have better ways to accomplish this, please reach out to me in our community.

[dragon74]

Still pending official RTL support + tutorial

[osman-mohamad]

I have started to use vuetify to build simple pwa mobile app for arabic (rtl language) customers . and I need to know is the first round of vuetify supporting rtl is enough for production ready applications ?

[johnleider]

While there is always room for improvement, at this point in time we have fully added RTL support to the framework.

If you have any additional questions, please reach out to us in our Discord community.