Dash-kit - Vue.js Admin Panel Framework

Dash-kit is a powerful and feature-rich Vue.js admin panel framework that helps you create stunning and functional admin panels for your web applications. It provides a collection of reusable components, layout options, and utilities to make your admin panel development faster and easier.

Features

• Flexible Layout Components: Use the AppLayout component to build customizable admin panel layouts with a sidebar, navigation bar, and main content area.

• Dynamic Sidebar: The AppLayout component automatically generates the sidebar based on the provided app-menu component. Easily customize the sidebar items and behavior.

• Form Generation: Dash-kit includes a form generation feature powered by FormKit, allowing you to quickly create dynamic forms for data input and management.

• RTL and LTR Support: Seamlessly switch between right-to-left (RTL) and left-to-right (LTR) layouts based on your application's language direction.

• Toasts and Dialogs: Integrated support for Dash-kit's Toast and DynamicDialog components, allowing you to display toast messages and create dynamic dialogs in your application.

• Vue-Router Integration: Easily integrate the AppLayout with Vue Router to manage your application's navigation and routing efficiently.

• PrimeVue Components: Dash-kit leverages the power of PrimeVue components to provide a polished and modern UI for your admin panel.

Dependencies

Dash-kit relies on the following libraries:

• FormKit: A flexible form generation library for Vue.js applications.

• PrimeVue: A rich set of open-source UI components for Vue.js.

Installation

You can install Dash-kit via NPM:

1npm install dash-kit --save

Documentation

For detailed documentation and usage examples, visit the Dash-kit website and explore the documentation.

Getting Started

To start using Dash-kit, import the necessary components into your Vue application and set up the AppLayout as the parent component for your routes:

1// router/index.js
2import { createRouter, createWebHistory } from "vue-router";
3import { LoginView, UnauthorizedView } from "dash-kit/views";
4import ProfileView from "../views/ProfileView.vue";
5import DashboardView from "../views/DashboardView.vue";
6import { AppLayout } from "dash-kit/base";
7
8const router = createRouter({
9  history: createWebHistory(import.meta.env.BASE_URL),
10  routes: [
11    {
12      path: "/",
13      component: AppLayout,
14      children: [
15        {
16          path: "/dashboard",
17          name: "dashboard_view",
18          component: DashboardView,
19        },
20        {
21          path: "/profile",
22          name: "profile_view",
23          meta: { breadCrumbs: [{ label: "profile" }] },
24          component: ProfileView,
25        },
26      ],
27    },
28    {
29      path: "/login",
30      name: "login",
31      component: LoginView,
32    },
33    {
34      path: "/unauthorized",
35      name: "unauthorized",
36      component: UnauthorizedView,
37    },
38  ],
39});
40
41export default router;

Contributing

We welcome contributions from the community! If you find a bug, have a feature request, or want to contribute code, please follow our contribution guidelines.

License

Dash-kit is open-source software licensed under the MIT License.