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", andstyleattribute with the valuedirection: 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'
Replies (1)
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
