RTL

Enable RTL

Enable RTL or Right-to-Left mode from store/settings.js.

export const state = () => ({
  state: {
    layout: {
      rtl: true
    }
  }
})

You should also update resources/views/app.blade.php and change dir="ltr" to dir="rtl" in order to cover the initial page load, before JavaScript kicks in.

<!DOCTYPE html>
<html dir="rtl"
  lang="{{ str_replace('_', '-', app()->getLocale()) }}">

How it works

The process of converting regular styles to RTL is automatic and handled by postcss-rtl. This is already configured in webpack.mix.css.js.

mix.options({
  postCss: [
    require('postcss-rtl')
  ]
})

The application is dynamically applying the direction attribute using the vue-meta plugin. This is configured in resources/js/app.js.

new Vue({
  head() {
    return {
      htmlAttrs: {
        dir: `${this.$store.state && this.$store.getters.settings.layout.rtl ? 'rtl' : 'ltr'}`
      }
    }
  }
})

Remove RTL

If you don't need RTL in your application, then you should comment out or remove the require('postcss-rtl') part from webpack.mix.css.js to optimize the production CSS files.

mix.options({
  postCss: [
    require('postcss-rtl') // remove this
  ]
})

Table of Contents

Frontend Matter

Beautifully crafted Bootstrap themes and templates for modern web apps.

Themes

Templates

Company

Illustrations by Freepik Storyset