Vue MDB 5 RTL

Introduction

This short tutorial shows how to enable support for right-to-left text in MDB 5 across our layout, components, and utilities.

Experimental feature: The RTL feature is still experimental and will probably evolve according to user feedback.

See an example of our components using the RTL direction.

Rtl demo free components Rtl demo pro components

Enable RTL

There are three requirements for enabling RTL in MDB 5:

Set dir="rtl" on the element.
Set an appropriate lang attribute on the element. For example: lang="ar".
Include an RTL version of our CSS (mdb.rtl.min.css file) in the main.js

Here are examples of a index.html and main.js files that implement the above requirements:

index.html
main.js

        
            
          <!DOCTYPE html>
          <html lang="ar" dir="rtl">

          <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width,initial-scale=1.0">
            <link rel="icon" href="<%= BASE_URL %>mdb-favicon.ico">
            <link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
            <title>MDB Vue App</title>
          </head>

          <body>
            <noscript>
              <strong>We're sorry but MDB Vue App doesn't work properly without JavaScript enabled. Please enable it to
                continue.</strong>
            </noscript>
            <div id="app"></div>
            <!-- built files will be auto injected -->
          </body>

          </html>

        
            
          import "mdb-vue-ui-kit/css/mdb.rtl.min.css";

          import { createApp } from "vue";
          import App from "./App.vue";
          import router from "./router";

          createApp(App).use(router).mount("#app");

Directional classes

To make the class names appropriate for both LTR and RTL, we replaced direction properties like left and right to start and end respectively.

For example, instead of .ml-1, use .ms-1.

Introduction

Enable RTL

Directional classes

Breadcrumb separator