Spruha - Vue3 Admin & Dashboard Template

Spruha - Vue3 Admin Dashboard Template

FAQS

General Style

How to Change Font Style ?

Step 1:

Go To style.scss (assets/scss/style.scss )

if you want to change another font-family Go to the site Google Fonts And Select One font Family and import In to style.css file

How to Select font Family

Example:

Step 2:

And paste Your Selected font-family in style.scss

Example:

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900");

Step 3:

And add the Your Selected font-family in _bootstrap-custom.scss(assets/scss/bootstrap/_bootstrap-custom.scss)

Example:



body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	background-color: $white;
	font-family: "Roboto", sans-serif !important;
	background: $background;
	color: $color;
	direction: ltr;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-tap-highlight-color: transparent;
	-webkit-text-size-adjust: none;
	-ms-touch-action: manipulation;
	touch-action: manipulation;
	-webkit-font-feature-settings: "liga" 0;
	font-feature-settings: "liga" 0;
	overflow-y: scroll;
	width: 100%;
	position: relative;
	}

Note : After Changing font you must run gulp command i.e, gulp watch . Refer gulp page for more gulp commands click here.

How to Change Logo ?

Go To "assets/images/brand" folder and replace your logo with Previous Logos within in image size. note: Please don't increase logo sizes. Replace your logo within given image size. otherwise the logo will not fit in particular place it disturbs the template design.

How to Enabled RTL & LTR version?

How to Enable RTL & LTR version

Please follow the bellow steps to enable RTL Version

To enable RTL Version you have to open Switcher.vue ({src/shared/components/Switcher.vue} file and remove comments for rtl as shown in below


														LtrtoRtl() {
															document.querySelector("body").classList.add("rtl");
															document.querySelector("html[lang=en]").setAttribute("dir", "rtl");
															document.querySelector("body").classList.remove("ltr");
															
														  },

Please follow the bellow steps to enable LTR Version

To enable LTR Version you have to open Switcher.vue ({src/shared/components/Switcher.vue} file and remove comments for ltr as shown in below


													RtltoLtr() {
														document.querySelector("body").classList.add("ltr");
														document.querySelector("html[lang=en]").setAttribute("dir", "ltr");
														document.querySelector("body").classList.remove("rtl");
														
													  },

Theme Styles

How to Enable Dark Theme?

Please follow the bellow steps to enable Dark Theme

To enable Dark Theme you have to open Switcher.vue{src/shared/components/Switcher.vue} file and remove comments for dark-theme as shown in below



//adding classes***

Dark() {
	document.querySelector("body").classList.add("dark-theme");
}
//removing classes***

document.querySelector("body").classList.remove("light-theme");
document.querySelector("body").classList.remove("light-menu");
document.querySelector("body").classList.remove("light-header");
document.querySelector("body").classList.remove("color-menu");
document.querySelector("body").classList.remove("color-header");

How to Enable Light Theme?

Please follow the bellow steps to enable Light Theme

To enable Light Theme you have to open Switcherdata.js{src/shared/components/Switcher.vue} file and remove comments for light-theme as shown in below



//adding classes***

document.querySelector("body").classList.add("light-theme");

//removing classes***

document.querySelector("body").classList.remove("dark-theme");
document.querySelector("body").classList.remove("dark-menu");
document.querySelector("body").classList.remove("dark-header");
document.querySelector("body").classList.remove("color-menu");
document.querySelector("body").classList.remove("color-header");

FAQ'S

1) How to Enable Color-header?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for color-header to enable color-header style as shown in below

//adding classes***

document.querySelector("body").classList.add("color-header");

//removing classes***

document.querySelector("body").classList.remove("dark-header");
document.querySelector("body").classList.remove("light-header");

2) How to Enable Dark-header?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for header-dark to enable header-dark style as shown in below

//adding classes***

document.querySelector("body").classList.add("header-dark");

//removing classes***

document.querySelector("body").classList.remove("color-header");
document.querySelector("body").classList.remove("light-header");

3) How to Enable Light-header?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for header-light to enable header-light style as shown in below

//adding classes***

document.querySelector("body").classList.add("light-header");
												
//removing classes***

document.querySelector("body").classList.remove("header-dark");
document.querySelector("body").classList.remove("color-header");

4) How to Enable Light Menu?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for light-menu to enable light-menu style as shown in below


//adding classes***

	document.querySelector("body").classList.add("light-menu");
																									
//removing classes***
													
document.querySelector("body").classList.remove("color-menu");
document.querySelector("body").classList.remove("dark-menu");

5) How to Enable Color Menu?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for color-menu to enable color-menu style as shown in below

//adding classes***

document.querySelector("body").classList.add("color-menu");
																																						
//removing classes***
																										
document.querySelector("body").classList.remove("light-menu");
document.querySelector("body").classList.remove("dark-menu");

6) How to Enable Dark Menu?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue)file and remove comments for dark-menu to enable dark-menu style as shown in below

//adding classes***

document.querySelector("body").classList.add("dark-menu");

//removing classes***

document.querySelector("body").classList.remove("light-menu");
document.querySelector("body").classList.remove("color-menu");

7) How to Enable Boxed-Layout?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue)file and remove comments for layout-boxed to enable layout-boxed style as shown in below

//adding class******
												
document.querySelector("body").classList.add("layout-boxed");

//removing class******

document.querySelector("body").classList.remove("layout-fullwidth");

8) How to Enable Scrollable-Layout?

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for scrollable-layout to enable scrollable-layout style as shown in below

//adding class******

  document.querySelector("body").classList.add("scrollable-layout");

//removing class******

document.querySelector("body").classList.remove("fixed-layout");

9) How to Enable Horizontal layout

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for horizontalmenu to enable Horizontal layout style as shown in below

//adding class******

document.querySelector("body").classList.add("horizontalmenu");
document.querySelector("body").classList.add("horizontalmenu-hover");

//removing class******

document.querySelector("body").classList.remove("horizontalmenu-hover");
document.querySelector("body").classList.remove("leftmenu");
document.querySelector("body").classList.remove("main-body");
document.querySelector("body").classList.remove("default-menu");
document.querySelector("body").classList.remove("closed-leftmenu");
document.querySelector("body").classList.remove("icontext-menu");
document.querySelector("body").classList.remove("main-sidebar-open");
document.querySelector("body").classList.remove("icon-overlay");

10) How to Enable Horizontal Hover layout

open Switcherdata.js path:(Spruha/src/shared/components/Switcher.vue) file and remove comments for horizontalmenu-hover to enable Horizontal Hover layout style as shown in below

//adding class******

document.querySelector("body").classList.add("horizontalmenu");
document.querySelector("body").classList.add("horizontalmenu-hover");

//removing class******

document.querySelector("body").classList.remove("leftmenu");
document.querySelector("body").classList.remove("main-body");
document.querySelector('body').classList.remove('default-menu');
document.querySelector('body').classList.remove('closed-leftmenu');
document.querySelector('body').classList.remove('icontext-menu');
document.querySelector('body').classList.remove('main-sidebar-hide');
document.querySelector('body').classList.remove('main-sidebar-open');
document.querySelector('body').classList.remove('icon-overlay');

FAQ'S

How to remove the switcher

Please follow the below steps to remove Switcher

Step: 1

To remove Switcher you have to open Header.vue (src/shared/Components/Header/Header.vue) file and there itself you can remove or comments for Switcherbutton as shown in below


										
{/* Switcher Open */}
										
<div class="d-flex header-setting-icon demo-icon fa-spin">
	<a class="nav-link icon" href="#" v-on:click="Switcherbutton()">
	  <i class="fe fe-settings settings-icon"></i>
	</a>
</div>
										
{/* Switcher Close */}

Step: 2

After remove Switcherbutton in the same page you have to remove or comments form the methods: Switcherbutton as shown in below


//Switcherbutton
Switcherbutton() {
  {
	document.querySelector(".demo_changer").classList.toggle("active");
	document.querySelector(".demo_changer").style.right = "0px";
  }
},;

Step: 3

At last you have to open MainDashboard.vue (src/shared/Layout/MainDashboard.vue) and remove or comments the Switcher tag as well as the comments the imports also as shown in below


										
<Switcher/>

import Switcher from "../../Shared/Components/Switcher/Switcher.vue";

Why we are using the vite.config.js file and .env file ?

Vite allows you to have more control over your project's configuration by extending the default configuration with vite.config.js or vite.config.ts. These are located in the project's base root directory.

the file vite.config.js is the stands for configuration management tools. and we mostly use for to configure the root routing path

for example in Spruha admin template we have given the base path spruha-vue/preview/

Note: While you are create your own project need to change the base path accordingly.

Important License Terms

You cannot charge your end product end users with a Regular License.
If you want to collect payments from end product end users then you must buy an Extended License for each of the end product.
You must buy one license for one domain only.(i.e Either Regular or Extended)
You cannot use Multi Domain,Multi Client, Multiple end Products with any of the licenses (i.e Either Regular or Extended).

for more details please click the link