kunafa-dashboard-vue

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

kunafa-dashboard-vue

★ 33 Open GitHub ↗

A feature-rich Modern Vue.js 3 & TailwindCSS & Vite Admin dashboard, with Real API Demo Data and multi-language support and full RTL/LTR bidirectional layout capabilities.

Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Kunafa Dashboard Vue

[![Vue](https://img.shields.io/badge/Vue-3.3-4FC08D?logo=vuedotjs)](https://vuejs.org/)
[![Vite](https://img.shields.io/badge/Vite-5.0-646CFF?logo=vite)](https://vitejs.dev/)

Kunafa Dashboard Vue is an open-source, Vue.js-based admin dashboard that supports multi-language functionality with seamless RTL (Right-to-Left) and LTR (Left-to-Right) layouts. This project is designed to be highly customizable and easy to use for developers building modern web applications

![Dashboard Preview](https://raw.githubusercontent.com/kunafaPlus/kunafa-dashboard-vue/master/public/screenshots/Home-LTR.png)

---

## [Demo Link Here](https://dev.demo-vue.kunafaplus.org)

---

Here’s your updated documentation section with the mobile app and a new contribution invitation:

---

## 🚀 Kunafa Available Projects

Kunafa Project is a versatile open-source dashboard available in multiple technologies, catering to different development preferences. Explore the versions below and choose the one that best fits your tech stack!

| Project                                                                                           | Technology
|---------------------------------------------------------------------------------------------------|-----------------------------------------------------|
| 📱 [**Kunafa Mobile App**](https://github.com/kunafaPlus/kunafa-mobile-app)                       | Kunafa Mobile App (Coming Soon)                     | 🔜 |
| 🌿 [**Kunafa Dashboard Vue.js**](https://github.com/kunafaPlus/kunafa-dashboard-vue)              | Vue 3 + Vite + Pinia + Tailwind CSS (✅ v1 released) |
| ⚛️ [**Kunafa Dashboard React**](https://github.com/kunafaPlus/kunafa-dashboard-react)             | React + Vite +  Tailwind CSS (Coming Soon)          | 🔜 |
| ⚛️ [**Kunafa Dashboard Angular**](https://github.com/kunafaPlus/kunafa-dashboard-angular)         | Angular + Vite +  Tailwind CSS (Under Development)  | 🔜 |
| 🌐 [**Kunafa Dashboard & HTML &Tailwind CSS**](https://github.com/kunafaPlus/kunafa-dashboard-html) | Static HTML + Tailwind CSS (Under Development))     | 🔜 |
| ⚛️ [**Kunafa Dashboard laravel**](https://github.com/kunafaPlus/kunafa-dashboard-laravel)         | Laravel Full Stack Dasbhoard (Under Development)    | 🔜 |
| ⚛️ [**Kunafa Dashboard ASP**](https://github.com/kunafaPlus/kunafa-dashboard-asp)                 | ASP Full Stack Dasbhoard (Under Development)        | 🔜 |
| ⚛️ [**Kunafa Dashboard express**](https://github.com/kunafaPlus/kunafa-dashboard-express)         | express Full Stack Dasbhoard (Under Development)    | 🔜 |
| ⚛️ [**Kunafa Dashboard Django**](https://github.com/kunafaPlus/kunafa-dashboard-django)           | Django Full Stack Dasbhoard (Under Development)     | 🔜 |
| ⚛️ [**Kunafa Dashboard GO**](https://github.com/kunafaPlus/kunafa-dashboard-go)                   | GO Full Stack Dasbhoard (Under Development)         | 🔜 |
| ⚛️ [**Kunafa Dashboard ruby**](https://github.com/kunafaPlus/kunafa-dashboard-ruby)               | Ruby Full Stack Dasbhoard (Under Development)       | 🔜 |

## 🚧 This Project is Under Development

We’re actively building Kunafa, and we’d love your help! Join our community, contribute to the project, and share your ideas.

💬 **Join Our Developer Telegram Group:**

[![Telegram](https://img.shields.io/badge/Telegram-Join%20Group-blue?style=for-the-badge&logo=telegram)](https://t.me/+5_Xh_V1p0HkyNDc0)

Let's build something awesome together! 🚀🔥

---

## ✨ Features

- 🌐 Internationalization (i18n) with Vue I18n
- 🔌 Ready Integrated with API endpoints via [DummyJson](https://dummyjson.com/)
- ↔️ Bidirectional layout support (RTL/LTR)
- 📊 8+ Chart types powered by Chart.js :
- 📋 Advanced Data Tables with sorting/filtering .
- 🖋️ Dynamic Forms with multiple layouts:
- 🎨 Modern UI built with Tailwind CSS .
- 🗃️ State management via Pinia .
- ⚡ Vite-powered development .
- 🧩 Component-based architecture .

---

## Components

- 📊 **Charts** :
  - bar-charts .
  - bubble-charts .
  - doughnut-charts .
  - line-charts .
  - pie-charts .
  - polar-area-charts.
  - reader-charts .
  - scatter-charts .
- 📋 **Data Tables** .
  - basic-datatables .
  - searchable-datatables .
  - serverside-datatables .
  - sortable-datatables .
- 🖋️ **Forms**:
  - Inline forms
  - Tabbed forms
  - Stepped forms
  - Object-based forms

---

## 🛠️ Technologies

**Core Framework**

- Vue.js 3 (Composition API)
- Vue Router 4
- Pinia (State Management)

**API Integration**

- [DummyJSON](https://dummyjson.com/) (Mock REST API)
- Axios (HTTP Client)

**Styling & UI**

- Tailwind CSS 3
- PostCSS RTL
- Iconify (Icon Library)

**Data Visualization**

- Chart.js 3
- vue-chart-3

**Forms & Tables**

- Vueform Builder
- vue3-easy-data-table

**Utilities**

- Axios (HTTP Client)
- Vue I18n (Internationalization)
- VueUse (Composition Utilities)
- Moment.js (Date handling)
- uses data from [Chart.js](https://www.chartjs.org/) .
- user icons from [Iconify](https://iconify.design/) .

---

## 🚀 Quick Start

### Prerequisites

- Node.js v20.x or higher
- npm, pnpm, or yarn

### Installation

1. Clone the repository:

```bash
git clone git@github.com:kunafaPlus/kunafa-dashboard-vue.git
cd kunafa-dashboard-vue
```

2. Install dependencies:

```bash
npm install   # or pnpm install / yarn install
```

3. Start development server:

```bash
npm run dev
```

4. Build for production:

```bash
npm run build
```

---

## 📸 Screenshots

|  LTR| RTL |
|-----------|------|
| ![Home LTR](https://raw.githubusercontent.com/kunafaPlus/kunafa-dashboard-vue/master/public/screenshots/Home-LTR.png) | ![Home RTL](https://raw.githubusercontent.com/kunafaPlus/kunafa-dashboard-vue/master/public/screenshots/Home-RTL.png) |

Forms
---

Charts
---

Datatables
---

</div>

---

## TODO

Here are planned enhancements and fixes for the Kunafa Dashboard Vue project:

- Replace all SVG icons with **Iconify** icons.
- Translate the entire application into both **Arabic** and **English**.
- Convert all CSS files to **SASS** for better maintainability and customization.
- Fix images and certain HTML properties in **DataTables** components.
- Implement proper **pagination** for server-side DataTables.
- Enhance Mobile Responsive and breakpoints .
- Complete Dark Mode .
- Login and signup pages .
- profile page .
- Integrate the **vue-advanced-chat** package for real-time chat functionality.  
  ([vue-advanced-chat](https://www.npmjs.com/package/vue-advanced-chat))
- Add a **Kanban dashboard** for task management using the following open-source library:  
  ([kanban-task-management](https://github.com/UnTalPeluca/kanban-task-management)).

---

## Dependencies Overview

📦 Key Dependencies Summary

- **[tailwindcss](https://tailwindcss.com/)**: Utility-first CSS framework for rapidly building custom designs
- **[vite](https://vitejs.dev/)**: Next-gen frontend tooling for modern web projects
- **[@intlify/unplugin-vue-i18n](https://github.com/intlify/bundle-tools/tree/main/packages/unplugin-vue-i18n)**: Plugin for integrating [vue-i18n](https://vue-i18n.intlify.dev/) with Vite
- **[@vueform/vueform](https://vueform.com/)**: Advanced form builder for Vue.js
- **[@vueuse/core](https://vueuse.org/)**: Essential Vue composition utilities
- **[axios](https://axios-http.com/)**: Promise-based HTTP client
- **[chart.js](https://www.chartjs.org/)**: Flexible charting library
- **[chartjs-adapter-moment](https://github.com/chartjs/chartjs-adapter-moment)**: Moment.js adapter for Chart.js
- **[flatpickr](https://flatpickr.js.org/)**: Lightweight date picker
- **[moment](https://momentjs.com/)**: Date manipulation library
- **[pinia](https://pinia.vuejs.org/)**: Vue state management
- **[postcss-rtlcss](https://github.com/elchininet/postcss-rtlcss)**: LTR→RTL styles converter
- **[vue](https://vuejs.org/)**: Progressive JavaScript framework
- **[vue-chart-3](https://vue-chart-3.netlify.app/)**: Vue wrapper for Chart.js
- **[vue-flatpickr-component](https://github.com/ankurk91/vue-flatpickr-component)**: Vue date picker component
- **[vue-i18n](https://vue-i18n.intlify.dev/)**: Internationalization plugin
- **[vue-router](https://router.vuejs.org/)**: Official Vue routing
- **[vue3-easy-data-table](https://github.com/HC200ok/vue3-easy-data-table)**: Vue data table component
- **[@iconify/vue](https://docs.iconify.design/icon-components/vue/)**: Icon component library
- **[@vitejs/plugin-vue](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)**: Vite Vue integration

----

## 🤝 Contributing

We welcome contributions! Please follow these steps:

1. Fork the project
2. Create your feature branch (`git checkout -b component/AmazingComponent`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
6. please follow standard in previous work .
7. add screenshot for new component .
8. add component (with it's sub components) in components section in documentation file .

## Contributors ✨

Thanks to these wonderful people for contributing to this project! 💖

<table>
  <tr>
    <td align="center">
      <a href="https://github.com/omaralalwi">
        <img src="https://avatars.githubusercontent.com/u/25439498?v=4" width="50px;" alt="Omar AlAlwi"/>
        <br />
        <sub><b>Omar AlAlwi</b></sub>
      </a>
      <br />
      🏆 Creator
    </td>
   
    <td align="center">
      <a href="https://github.com/LondonBoy619">
        <img src="https://avatars.githubusercontent.com/u/86839029?v=4" width="50px;" alt="Mohammed Jamal"/>
        <br />
        <sub><b>Mohammed Jamal</b></sub>
      </a>
      <br />
      🏆 Contributer
    </td>
   
    <td align="center">
      <a href="https://github.com/ZainbMohammed">
        <img src="https://avatars.githubusercontent.com/u/129354366?v=4" width="50px;" alt="Zainab Mohamed"/>
        <br />
        <sub><b>Zainab Mohamed</b></sub>
      </a>
      <br />
      🏆 Contributer
    </td>

</tr>
</table>

## License

Kunafa Dashboard Vue is licensed under the [MIT License](https://opensource.org/licenses/MIT). Feel free to use, modify, and distribute the code as you see fit.

## Community

Join to [Kunafa Community in Telegram](https://t.me/+5_Xh_V1p0HkyNDc0).

kunafa-dashboard-vue

Download

Today's picks

Was this content helpful?

Recent Feedback

kunafa-dashboard-vue

Download

Today's picks

Was this content helpful?

Recent Feedback

Download README