Yash Admin VueJs Sales
Management System

Yash Admin Dashboard

Yash Admin

Sales Management System

Yash Admin is a popular open source WebApp template for admin dashboards and admin panels. It utilizes all of the vue-bootstrap components in design and re-styles many commonly used plugins to create a consistent design that can be used as a user interface for backend applications.

Thank you for purchasing this VueJs template.

If you like this template, Please support us by rating this template with 5 stars

VueJs Installation & Setup -

1.- Install npm

It will create 'node_module' folder in this all dependency files will be install with this command. npm install

npm install

2.- Run Project

With is command file will be compiled and it will be loaded on local server `http://localhost:5173`. npm run dev

npm run dev

3.- Production Build

Packages JavaScript, CSS, and other assets into bundles for efficient delivery to the client. npm run build

npm run build

4.- Note:

To get more help on the TypeScript checkout Click here

4.- Further help

To get more help on the Vite checkout Click here

Folder Directories -

assets

This folder contains all the assets of YASH ADMIN template.
components

This folder component files for various template features.
elements

This folder contains all the elements files of YASH ADMIN template.
router

This folder has all router form used in the template.
views

This folder has all pages for various template features.
images

This folder has all plugins used in the template.
router

This folder has all script contact form used in the template.
css

CSS File

Vue File -

VueJs
- src
  - assets
  - components
  - elements
  - router
  - store
  - views
  - App.vue
  - main.ts
- index.html
- package.json
- package.lock.json

Theme Features -

Layout is controlled by settings object LayoutSettings inside public/index.html

<!-- Default layout  -->
<body 
	data-typography="poppins" 
	data-theme-version="light" 
	data-layout="vertical" 
	data-primary="color_1" 
	data-nav-headerbg="color_2" 
	data-headerbg="color_1" 
	data-sidebar-style="full"  
	data-sidebarbg="color_2"  
	data-sidebar-position="fixed" 
	data-header-position="fixed" 
	data-container="wide" 
	direction="ltr" 
>

Color Theme -

So many color option available

color_1
color_2
color_3
color_4
color_5
color_6
color_7
color_8
color_9
color_10
color_11
color_12

Credits -

Nodejs v20.10.0

Click here
TypeScript v5.4.0

Click here
Vite v5.1.6

Click here
Pinia v2.1.7

Click here
VueJs 3 v3.4.21

Click here
Ckeditor v5.1.0

Click here
Fullcalendar v6.1.11

Click here
Vuepic v8.3.1

Click here
Apexcharts v1.5.2

Click here
Bootstrap v5.3.3

Click here
ChartJs v5.3.0

Click here
Light Gallery v2.7.2

Click here
VueJs Draggable Next v2.2.1

Click here
Sweetalert2 v11.10.7

Click here
Colorpicker v2.3.0

Click here
Dropzone v2.2.1

Click here
Popper v1.5.0

Click here
steppy v1.3.2

Click here
Toastify v0.2.1

Click here

Project Main Features -

Vue 3
Bootstrap
Fully Responsive
Ready to used widget
Detailed Documentation
Attractive Calendar
Invoice
User Profile
CkEditor
Form Examples
Many Charts Options
Form Validation
Input Slider

Pinia
TypeScript
Advanced Form Elements
Form Wizard
Social
Bootstrap
Datatable
Table Sorting
Date Picker
Sweetalert
Toaster
Light Gallery
Scroll
Chatbox
Router

VueJs Structure

Create a Page


 <template>
    <div>
	<h1>Hello!</h1>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        

        return {}
    }
})
</script>