Workload : Workload Project Management Admin VueJS Template

Workload

Workload : Workload Project Management Admin VueJS Template

This documentation is last updated on 05 February 2025

Thank you for purchasing this VueJs template.

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

installation -

1.- Initialize 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

5.- Further help

To get more help on the Vite checkout Click here

Sass Compile -

1.- Install -D Sass

D sass is an NPM package that compiles Sass to CSS (which it does very quickly too). To install node-sass run the following command in your terminal: npm install -D sass

npm install -D sass

2.- Write -D sass Command

Everything is ready to write a small script in order to compile Sass. Open the package.json file in a code editor. You will see something like this: In the scripts section add an scss command

"scripts": {
  "sass": "sass --watch ./src/assets/scss/main.scss ./src/assets/css/style.css"
},

3.- Run the Script

To execute our one-line script, we need to run the following command in the terminal npm run sass

npm run sass

Folder Directories -

assets

This folder contains all the assets of Workload template.
components

This folder component files for various template features.
elements

This folder contains all the elements files of Workload 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

VueJs File-

VueJs
- src
  - assets
    - css
    - icons
      - avasta
      - feather
      - flaticon
      - font-awesome-old
      - helveticaNeue
      - icomoon
      - line-awesome
      - material-design-iconic-font
      - simple-line-icons
      - themify-icons
    - images
      - avatar
      - big
      - card
      - product
      - profile
      - tab
    - js
      - dashboard
      - plugins-init
    - scss
      - abstracts
      - base
      - components
        
        app
        
        charts
        
        forms
        
        ico
        
        map
        
        tables
        
        uc
        
        ui
        
        widget
      - layout
        
        footer
        
        header
        
        rtl
        
        sidebar
        
        theme
        
        typography
        
        version-dark
        
        version-transparent
      - pages
    - vendor
      - amcharts
      - animate
      - aos
      - apexchart
      - bootstrap
      - bootstrap4-notify
      - bootstrap-daterangepicker
      - bootstrap-material-datetimepicker
      - bootstrap-multiselect
      - bootstrap-select
      - bootstrap-tagsinput
      - bootstrap-touchspin
      - bootstrap-v4-rtl
      - chart.js
      - chartist
      - chartist-plugin-tooltips
      - clockpicker
      - datatables
      - dropzone
      - flot
      - flot-spline
      - fullcalendar
      - global
      - highlightjs
      - jquery
      - jquery-asColor
      - jquery-asColorPicker
      - jquery-asGradient
      - jquery-sparkline
      - jquery-steps
      - jqueryui
      - jquery-validation
      - jqvmap
      - metismenu
      - moment
      - morris
      - nestable2
      - nouislider
      - peity
      - perfect-scrollbar
      - pickadate
      - raphael
      - select2
      - summernote
      - svganimation
      - sweetalert2
      - toastr
      - wnumb
  - components
  - elements
  - router
  - store
  - views
- index.html
- package.json
- package.lock.jsone

Theme Features -

<body 
	data-typography: "poppins",
	data-theme-version: "light",
	data-layout: "vertical",
	data-primary: "color_1",
	data-headerbg: "color_1",
	data-nav-headerbg: "color_1",
	data-sidebarBg: "color_1",
	data-sidebar-style: "full",
	data-sidebar-position: "fixed",
	data-header-position: "fixed",
	data-container: "full",
>

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
color_13
color_14

<body 
	typography: "poppins",  	More Options => ["poppins" , "roboto" , "Open Sans" , "Helventivca" ]
	version: "light",       	More Options => ["light" , "dark"]
	layout: "vertical",   		More Options => ["horizontal" , "vertical"]
	primary: "color_11",		More Options => ["color_1," , "color_2," ..... "color_14"]
	headerBg: "color_1",		More Options => ["color_1," , "color_2," ..... "color_14"]
	navheaderBg: "color_1",		More Options => ["color_1," , "color_2," ..... "color_14"]
	sidebarBg: "color_1",		More Options => ["color_1," , "color_2," ..... "color_14"]
	sidebarStyle: "compact",	More Options => ["full" , "mini" , "compact" , "modern" , "overlay" , "icon-hover"]
	sidebarPosition: "fixed",	More Options => ["static" , "fixed"]
	headerPosition: "fixed",	More Options => ["static" , "fixed"]
	containerLayout: "full",	More Options => ["full" , "Boxed" , "Wide Boxed"]
>


<body 
	typography: "poppins",
	version: "light",
	layout: "vertical",
	primary: "color_1",
	headerBg: "color_1",
	navheaderBg: "color_1",
	sidebarBg: "color_1",
	sidebarStyle: "full",
	sidebarPosition: "fixed",
	headerPosition: "fixed",
	containerLayout: "full",
	
>


<body 
	typography: "poppins",
	version: "light",
	layout: "vertical",
	primary: "color_1",
	headerBg: "color_1",
	navheaderBg: "color_1",
	sidebarBg: "color_1",
	sidebarStyle: "mini",
	sidebarPosition: "fixed",
	headerPosition: "fixed",
	containerLayout: "full",
	
>


<body 
	typography: "poppins",
	version: "light",
	layout: "vertical",
	primary: "color_2",
	headerBg: "color_2",
	navheaderBg: "color_2",
	sidebarBg: "color_2",
	sidebarStyle: "compact",
	sidebarPosition: "fixed",
	headerPosition: "fixed",
	containerLayout: "full",
	
>


<body 
	typography: "poppins",
	version: "light",
	layout: "vertical",
	primary: "color_9",
	headerBg: "color_13",
	navheaderBg: "color_9",
	sidebarBg: "color_9",
	sidebarStyle: "modern",
	sidebarPosition: "static",
	headerPosition: "static",
	containerLayout: "full",
	
>


<body 
	typography: "poppins",
	version: "light",
	layout: "vertical",
	primary: "color_1",
	headerBg: "color_3",
	navheaderBg: "color_2",
	sidebarBg: "color_3",
	sidebarStyle: "overlay",
	sidebarPosition: "fixed",
	headerPosition: "fixed",
	containerLayout: "full",
	
>


<body 
	typography: "poppins",
	version: "light",
	layout: "horizontal",
	primary: "color_1",
	headerBg: "color_3",
	navheaderBg: "color_3",
	sidebarBg: "color_1",
	sidebarStyle: "full",
	sidebarPosition: "fixed",
	headerPosition: "fixed",
	containerLayout: "full",
	
>


<body 
	typography: "poppins",
	version: "light",
	layout: "horizontal",
	primary: "color_1",
	headerBg: "color_8",
	navheaderBg: "color_8",
	sidebarBg: "color_6",
	sidebarStyle: "mini",
	sidebarPosition: "fixed",
	headerPosition: "fixed",
	containerLayout: "full",
	
>


<body 
	typography: "poppins",
	version: "light",
	layout: "horizontal",
	primary: "color_1	",
	headerBg: "color_10",
	navheaderBg: "color_10",
	sidebarBg: "color_6",
	sidebarStyle: "compact",
	sidebarPosition: "fixed",
	headerPosition: "fixed",
	containerLayout: "full",
	
>