Documentation

W3CRM - Vuejs Admin Dashboard Template

W3CRM

W3CRM - Vuejs Admin Dashboard Template

This documentation is last updated on 1 April 2024

Thank you for purchasing this VueJs template.

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


Vue.js Installation & Setup -

1.- Install Install

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

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
3.- Production Build

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

npm run build
4.- Testing the App Locally

Once you've built the app, you may test it locally by running npm run preview command

npm run preview 
5.- Deploying your site

For More Details Click

npm run sass
6.- Note:

To get more help on the TypeScript checkout TypeScript

To get more help on the Vite checkout Vite Vite

Folder Directories -

  • assets

    This folder contains all the assets of W3CRM template.

  • components

    This folder component files for various template features.

  • elements

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

index.html


<body 
 data-typography="poppins"
 data-theme-version="light" 
 data-layout="vertical" 
 data-nav-headerbg="color_4" 
 data-headerbg="color_4" 
 data-sidebar-style="full" 
 data-sidebarbg="color_1" 
 data-sidebar-position="fixed" 
 data-header-position="fixed" 
 data-container="wide" 
 data-primary="color_1" 
 data-secondary="color_1"
>

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


VueJs Structure -

VueJs Structure

1

Do You Need Help To Customization

After Purchase A Template...

You Will Start Customizing According Your Requirement
BUT What If You Don't Know

SOLUTION IS HIRE DexignZone

Hire Same Team For Quality Customization

  • In Order To Ensure Your Website Is Live, We Will Customize
    The Template According To Your Requirements And Upload It to the Server.

Version History - #back to top

    1. New - Created & Upload W3CRM VueJs