W3CRM

W3CRM - Nuxtjs Bootstrap Admin Dashboard Template

Thank you for purchasing this NuxtJs template.

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

Nuxt.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:3000`

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

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 -D sass run the following command in your terminal: npm install -D sass

npm install -D sass

2.- 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

3.- Other Option

--source-map

"sass": "sass --watch ./assets/scss/main.scss ./assets/css/style.css"

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.
layouts

This folder has all layouts used in the template.
pages

This folder has all pages for various template features.
images

This folder has all images used in the template.
css

CSS File

NuxtJs Folder Structure

NuxtJs
- assets
- components
- elements
- layouts
- pages
- public
- server
- app.vue
- nuxt.config.ts
- package.lock.json
- package.json

Theme Features -

app.vue


<script setup>
useHead({
	bodyAttrs: {
	"data-typography": "poppins",
	"data-theme-version": theme,
	"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",
	},
});
</script>

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


<script setup>
useHead({
	bodyAttrs: {
	"data-typography": "poppins",		More Options => ["poppins" , "roboto" , "Open Sans" , "Helventivca" ]
	"data-theme-version": theme,		More Options => ["light" , "dark"]
	"data-layout": "vertical",			More Options => ["horizontal" , "vertical"]
	"data-nav-headerbg": "color_4",		More Options => ["color_1," , "color_2," ..... "color_12"]
	"data-headerbg": "color_4",			More Options => ["color_1," , "color_2," ..... "color_12"]
	"data-sidebar-style": "full",		More Options => ["full" , "mini" , "compact" , "modern" , "overlay" , "icon-hover"]
	"data-sidebarbg": "color_1",		More Options => ["color_1," , "color_2," ..... "color_12"]
	"data-sidebar-position": "fixed",	More Options => ["static" , "fixed"]
	"data-header-position": "fixed",	More Options => ["static" , "fixed"]
	},
});
<body