Vuetify RTL style

If you are using the latest nuxt.js with vuetify you can add this in nuxt.config.js

buildModules: [
  ['@nuxtjs/vuetify', { rtl: true }],
  ...
],

there is no RTL support for vuetify right now. but you can create your own CSS and change what you need. first of all: add dir=rtl to your app and add this styles:

textarea:focus, input:focus, button:focus { outline: none !important; }

.list__tile__title {
    text-align: right;
}

.toolbar__title {
    margin-right: 16px;
}

.input-group--text-field label {
    position: absolute;
    top: 18px;
    right: 0;
}

.input-group label {
    text-align: right;
    -webkit-transform-origin: top right;
    transform-origin: top right;
}
.input-group.input-group--selection-controls label{
    right: 32px;
    left: auto;
}
.input-group.input-group--selection-controls .icon--selection-control {
    left: auto;
    right: 0;
}
.input-group--selection-controls__ripple {
    -webkit-transform: translate3d(12px,-52%,0);
    transform: translate3d(12px,-52%,0);
    left: auto;
    right: 0;
}

it's not complete. but fix some issues

Added features in v1.1.0:

• Vuetify supports RTL (right to left) languages through the rtl prop during bootstrap. This value is dynamic and will apply custom styles to change the orientation of your components.

To enable config level RTL support, add the rtl property to the Vuetify instance options:

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify, {
  rtl: true
})

You can change this value anytime by directly modifying the $vuetify.rtl property from within your application.

For Vue 2.x, the way to set RTL to true is a bit different:

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  rtl: true,
})

or, as before, you can modify the rtl value on the vuetify object: this.$vuetify.rtl = true