Setting up the local environment and workspace

This guide explains how to set up your environment for Vue development. It includes information about prerequisites, installation , creating an initial workspace and starter app, and running that app locally to verify your setup.

For getting started an Vue Application you needs things as Prerequisites.

Prerequisites

To use the Vue Framework, you should be familiar with the following:

• HTML
• CSS
• JS/TS

Node.js - v22.0.0 or newer

Vue requires a current, active LTS (long term support) or maintenance LTS (long term support) version of Node.js.

Download latest version of node.js from nodejs.org.
Install Node.js using downloaded file.
To check your node version, run node -v in a terminal/console window (cmd)

Npm package Manager

The Vue application depend on npm packages for many features and functions.
To download and install npm packages, you need an npm package manager.
This guide uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window (cmd)

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 22.0.0 on your machine. To create a project, run:

Creating a Pages

You can generate new pages in Vue using the vue generate command

# Generates `pages/about.vue`
npx nuxi add page about

# Generates `pages/category/[id].vue`
npx nuxi add page "category/[id]"
                                            

Creating a Component

To create components using the Vue CLI (Command Line Interface), you can use the generate command. Here's how you can create components:

Creating a component using the Vue CLI

To create a component using the CLI:

npx nuxi add component YourComponentName

• YourComponentName.vue

Creating a Custom Commands

In Vue 3, you can generate custom commands using the @vue/cli package. For example, to generate a custom command:

npx vue create command my-custom-command

How to Run the Nilova Template:

Step 2:

npm install

yarn install

Step 3:

npm run dev
                                        

yarn run dev
                                        

Once you serve your application by default it will take their default port using http://localhost:3000/

How to Convert SCSS to CSS:

npm run sass

How to Run the Nilova Template:

Step 2:

npm install

yarn install

Step 3:

npm run dev
                                        

yarn run dev
                                        

Once you serve your application by default it will take their default port using http://localhost:3000/

How to Convert SCSS to CSS:

npm run sass

Purpose of a starter kit

Basic Layout Structure

Main Layout structure of the Nilova template .Root:src/shared/layouts/maindashboard.vue

                                            
<script lang="ts" setup>
import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
import { switcherStore } from '../../stores/switcher'
import Switcher from '../common/switcher.vue'
import Header from '../common/header.vue'
import Sidebar from '../common/sidebar.vue'
import Footer from '../common/footer.vue'
import Backtotop from '../common/backtotop.vue'


// Reactive store
const switcher = reactive(switcherStore())

// Computed class
const customClass = computed(() =>
  switcher.pageStyles === 'flat' ? 'main-body-container' : ''
)

// Scroll progress logic
const progressRef = ref(null)

const handleScroll = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
  const scrollHeight =
    document.documentElement.scrollHeight - document.documentElement.clientHeight

  if (scrollHeight === 0) return

  const scrollPercent = (scrollTop / scrollHeight) * 100

  if (progressRef.value) {
    progressRef.value.style.width = `${scrollPercent}%`
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  switcher.retrieveFromLocalStorage()
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<template>
  <div ref="progressRef" class="progress-top-bar"></div>
  <Switcher />
  <div class="page">
    <Header />
    <Sidebar />

    <!-- Start::app-content -->
    <div class="main-content app-content">
      <div :class="['container-fluid', 'page-container', customClass]">
        <router-view />
      </div>
    </div>
    <!-- End::app-content -->

    <Footer />
  </div>
  <Backtotop />
</template>

<style scoped lang="scss"></style>
                                        

General Vuejs file structure of the Nilova template .Root:src/components/pages/empty.vue

    
<script lang="ts" setup>
import Pageheader from '../../shared/common/pageheader.vue';

const dataToPass = {
    title: "Pages",
    currentpage: "Empty",
    activepage: "Empty"
}
</script>

<template>
    <Pageheader :propData="dataToPass" />
    <!-- Start::row-1 -->
    <div class="row">
        <div class="col-xl-12">
            <div class="card custom-card">
                <div class="card-body">
                    <h6 class="mb-0">Empty Card</h6>
                </div>
            </div>
        </div>
    </div>
    <!--End::row-1 -->
</template>

<style scoped>
/* Add your styles here */
</style>

Sidemenu Layout Structure

How to Add Menus to Sidebar.

In Vue project, it can be easy to add menus to the sidebar by modifying the MenuItems array in the nav.ts (/src/data/sidebar/nav.ts) file. The sidebar will dynamically display the menus based on the contents of this array. below are the steps as follows

Steps:

Open nav.ts File:

Open the nav.ts (/src/data/sidebar/nav.ts) file in Vue project. This file contains the MenuItems array that defines the menus to be displayed in the sidebar.

To add the parent Menu Items:

Inside the MenuItems array, you can add your menu items using the following format:

     {
       menutitle: "Your Menu Title",
     },
     {
       title: 'Your Component Title',
       selected: false,
       icon: 'icon-name',
       type: 'link', // or 'sub', 'external', 'empty'
       path: '/path-to-route', // Specify the route path for link type
       dirchange: false, change the direction from right to left .
       active: false,
       badge: 'badge-class', // (optional) Add a badge to the menu item
       badgetxt: 'Badge Text', // (optional) Text to display in the badge
     }
            

To add the children to Menu Items:

Inside the MenuItems array, you can add custom nested menu items using the following format:

    {
        menutitle: "Your Menu Title",   // The display name of the menu.
    }
    {
        title: 'Your Component Title',   //The display name of the component
        selected: false,    //Set to true if this menu is currently selected.
        icon: 'icon-name',   // The icon to display next to the menu.
        type: 'link',   //Specify the type of the menu item (link, sub and empty).
        active: false,  //Set to true to mark this menu as active.
        dirchange: false,  //change the direction from right to left .
        badge: 'badge-class',  // (optional) Add a badge to the menu item
        badgetxt: 'Badge Text'  // (optional) Text to display in the badge
        children: [
          // (optional) Define child items for sub-menu  type
         {
           path: '/child-path',  //Specify the route path for link type menu.
           title: 'Child Menu Title',  //The display name of the Child Menu Title
           type: 'link',  //Specify the type of the menu item (link, sub and empty).
           selected: false,  //Set to true if this menu is currently selected.
           active: false,  //Set to true to mark this menu as active.
         },
         // Add more child items if needed
       ]
    }
            

Save the Changes:

After adding your menu items, save the changes made to the nav.ts (/src/data/sidebar/nav.ts) file.

View Sidebar Changes:

The sidebar will now automatically display the added menu items based on the modifications you made in the MenuItems array.

To Remove the Menu Items:

To remove menu items that you don't need, you can simply delete the corresponding object from the MenuItems array.

By following these steps, you can easily customize and add menus to the sidebar of your Vuejs project. The menus will be dynamically generated based on the content of the MenuItems array in the nav.ts file.

One core feature of Vue is the file system router. Every Vue file inside the pages/ directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Vue leverages code-splitting to ship the minimum amount of JavaScript for the requested route.

Pages

Vue routing is based on vue-router and generates the routes from every component created in the pages/ directory, based on their filename.

• Directory Structure
• Generated Route File

| pages/
---| about.vue
---| index.vue
---| posts/
-----| [id].vue

{
   "routes": [
      {
         "path": "/about",
         "component": "pages/about.vue"
      },
      {
         "path": "/",
         "component": "pages/index.vue"
      },
      {
         "path": "/posts/:id",
         "component": "pages/posts/[id].vue"
      }
   ]
}
					

Configure Link in Menu

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link. Path for existing code path: "/src/data/sidebar/nav.ts".

			├── data
				├──sidebar
                    ├──nav.ts

			export const MENUITEMS = [
				{
					// To add the menu title
					{
						menuTitle: 'MAIN'
					},
					// To add the link
					{ path: "/dashboards/sales", icon: Svgicons.Salesicon, type: "link", active: false, selected: false, dirchange: false, title: "Sales" },
					// To add the sub

					{ title: "Dashboards", icon: Svgicons.Dashboardicon, type: "sub", active: false, dirchange: false, children: [
                        { path: "/dashboards/sales", icon: Svgicons.Salesicon, type: "link", active: false, selected: false, dirchange: false, title: "Sales" },
                        { path: "/dashboards/analytics", icon: Svgicons.Analyticsicon, type: "link", active: false, selected: false, dirchange: false, title: "Analytics" },
                      ]
					}
					// In the same way you can add "n" no.of sub/links in sub, But you can not add the sub inside the type "link" as well as in menutitle.
				}
			]