Vue RTL version setup with webpack

Install webpack dependencies for RTL bundler using this command: npm install --save-dev webpack webpack-rtl-plugin remove-files-webpack-plugin css-loader mini-css-extract-plugin webpack-cli.
Create a file named rtl.config.js and copy the webpack configuration from this gist.
Execute the following command: yarn webpack --config=rtl.config.js --mode development. This command will execute the webpack configuration to build styles and output them to the src/assets/rtl folder.
In the file src/App.vue, replace the LRT style import with the RTL style import from src/assets/rtl:
```
@import "assets/sass/style";
```
to
```
@import "assets/rtl/style.rtl.css";
```
In the file index.html, add the following attributes to the HTML tag: direction="rtl", dir="rtl", and style attribute with the value direction: rtl.
Find and replace the following attributes in the project:
- data-kt-menu-placement='bottom-start' => data-kt-menu-placement='bottom-end'
- data-kt-menu-placement='right-start' => data-kt-menu-placement='left-start'

1 Answers

Text formatting options

Private reply Submit

Here's a how to add some HTML formatting to your comment:

can i change the direction in runtime when i change the language

Metronic