Introduction

Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications. Developed using the Vue.js framework.

File Structure

We have arranged all the files as follows.

				
Vue-Jampack
│
├──📁 Clssic
├──📁 Horizontal
└──📁 Compact
    │
    ├──📁 public
    │
    ├──📂 src
    │	│
    │   ├──📂 assets
    │	│   └──📁 img         /*all images here*/
    │   │
    │	├──📁 components      /*Required Components*/
    │	│
    │	├──📁 data            /*External data*/
    │	│
    │	├──📁 hk-components      /*Custom Components*/
    │	│
    │	├──📂 layout
    │	│   ├──📁 app-layout
    │	│   ├──📁 auth-layout
    │	│   ├──📁 footer
    │	│   ├──📁 header
    │	│   └──📁 sidebar
    │	│
    │	├──📁 pages       /*All view pages*/
    │	│
    │	├──📁 router      /*Pages routing*/
    │	│
    │	├──📁 stores      /*Store for pinia*/
    │	│
    │	├──📂 styles
    │	│   ├──📁 css
    │	│   ├──📁 fonts
    │	│   └──📂 scss
    │	│      ├── apps.scss
    │	│      ├── drawer.scss
    │	│      ├── footer.scss
    │	│      ├── header.scss
    │	│      ├── horizontal-menu.scss
    │	│      ├── mixins.scss
    │	│      ├── nav.scss
    │	│      ├── navbar-menu.scss
    │	│      ├── style.scss
    │	│      ├── variables.scss
    │	│      ├── vertical-classic-menu.scss
    │	│      └── vertical-icon-menu.scss
    │	│
    │	├──📁 util
    │	│
    │	├── App.vue    /*This file is the root component, serving as the entry point for your application.*/           
    │	└── main.js    /*Serves as the entry point for the application.*/
    │
    ├── .eslintrc.cjs
    ├──.gitignore
    ├── index.html     /*This file serves as the main HTML file for the application.*/      
    ├── jsconfig.json        
    ├── package.json
    ├── README.md
    └── vitest.config.js

CSS Folder

This folder includes style.css and other third party css files that are included in the template.

SCSS Folder

apps.scss: Application related Sass file
drawer.scss: Drawer related Sass file
footer.scss: Footer related Sass file
header.scss: Header related Sass file
horizontal-menu.scss: Horizontal menu Sass file
mixins.scss: Mixins Sass file
nav.scss: Nav Sass file
navbar-menu.scss: Navbar Sass file
style.scss: Master Sass file
variables.scss: All the variables related Sass file
vertical-classic-menu.scss: Vertical classic menu Sass file
vertical-icon-menu.scss: Vertical icon menu Sass file

Installation

To get started follow this steps.

First of all it's required to Install Node.js 18 or later and npm / yarn.
You can download Vue-Jampack.zip file from Themeforest or other some sources, Unzip the zip file that you have downloaded from Themeforest. Inside the zip file, you will find 3 seperated projects and documentation file for documentation.
Open your favorite console application (Terminal, iTerm, Command Prompt etc.). Navigate to a your favorite project layout folder (classic, horizontal or compact) and Install packages using following commands. This command will install all the required Node.js modules into the node_modules directory inside project folder. And now, you are ready to run the project for the first time.

                                        
npm install
or 
yarn install

Now you can run this vue js project by using following command for your application development, make the necessary changes.

                                        
npm dev
or 
yarn dev

When it is time to deploy your app for production, simply run the vite build command. By default, it uses <root>/index.html as the build entry point, and produces an application bundle that is suitable to be served over a static hosting service.

                                        
npm build
or 
yarn build

File Structure
Styles
Installation