Vyzor – Inertia, React, and Laravel Premium Admin & Dashboard Template that combines modern and minimal design with full flexibility and responsiveness. It’s crafted using React , Inertia.js , Laravel , CSS3 , and React-Bootstrap offering seamless customization with SASS integration. Whether you’re building a web application, admin dashboard, or project management platform, this template ensures your site stands out with ease.

Support and Updates:

When you purchase Vyzor, you gain access to free future updates to ensure your template remains up-to-date. Plus, our support team is always ready to assist with any questions.

What Do You Get with the Vyzor:

Vyzor provides all necessary PHP,React, CSS, SCSS, Jsx files, along with detailed Documentation to help you easily customize and implement the template.

Vyzor Compatibility with Popular Browsers:

Vyzor is fully compatible with major browsers, ensuring a seamless user experience across Chrome, Firefox, Safari, Edge, and Opera.

Setting Up The Local Environment & Workspace

This comprehensive guide provides step-by-step instructions on how to set up your development environment for Vite using the React,Laravel tool. It covers everything from the necessary prerequisites to installing the tool, creating an initial workspace, and setting up a starter app. You'll also learn how to run the app locally to test and verify your setup. By following this guide, you can ensure that your development environment is properly configured for Vite and React, and you can get started with your project confidently and efficiently. Whether you're a beginner or an experienced developer, this guide is an essential resource for anyone looking to work with Vite and React.

To get started with a React application, there are some prerequisites that you need to have in place.

Prerequisites

• Xampp
• Composer
• React
• vite
• React Bootstrap
• Javascript

To install vite on your local System, you need the following:

Node.JS

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

Npm package Manager

The vite and React applications 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) For better understanding React we suggest you once go through official documentation of React from React Documentation and vite for  Vite documentation

Installation Process of Composer

In order to run Laravel we need to install composer by the following steps

Steps to Download & Installation of Composer

Step1: Please visit the Official Web Site of the Composer www.getcomposer.org

Step2: Click on the Download option

Step3: Click on the Composer-Setup.exe you are done with download

Step4: Now Right click on the Composer-Setup.exe file and select Run as administrator click on Yes

Step5: You'll be getting two options click as per your choice

Step6: I choose Recommended option here and if your developer you can check the box of the Developer Mode

Step7: And click on the Next button please make sure of installation path and then click Next

Step8: You'll be asked to enter proxy url please skip the step and click on the Next button

Step9: Please make sure with the PHP Version it should not be less than 8.2v, here we used 8.2.12 Version and then click on the next button

Step10: To confirm that Composer is installed in your system then type Composer in command prompt (if you are using XAMPP then go to C:\xampp\htdocs location and type composer)

How to Run the Vyzor Template:

If you have installed XAMPP on your machine then please follow the below steps

Step:1 Quick view of Installations

1. Download and Install the Composer from official site https://getcomposer.org/

2. Install Laravel by using Composer as mentioned in the installation process above.

Step:2 Run project

1. Extract the zip folder of the laravel project in the path: EX: C:\xampp\htdocs\ that you have received after purchase.

2. Once the extraction is completed for accessing the laravel project, open command prompt or terminal and set your project root path: Example: C:\xampp\htdocs\

3. Open the terminal and set the root path of your template and then run the following command: "composer install" only if it is required to update your "vendor" directory.

4. Now run the below commands in the terminal to get the output of the project. To get the node_modules install.

To get the node_modules install.

 npm install 

to get the build assets of the project.

 npm run build 

And run the command line:

npm run dev 

 php artisan serve 

Laravel development server started: http://127.0.0.1:8000, now type the url in the browser to access the project.

Inertia Setup Guidance

Inertia.js acts as a bridge between your Laravel backend and React frontend, allowing you to build modern SPAs without the complexity of managing APIs or client-side routing manually.

1.Server-side Setup:

The first step when installing Inertia is to configure your server-side framework. Inertia maintains an official server-side adapter for Laravel.

The setup includes Laravel’s powerful routing system and controllers, with Inertia’s Laravel adapter responsible for returning views as React components instead of traditional Blade templates. This allows developers to write backend logic in Laravel as usual, while seamlessly passing data to React components via Inertia.

First, install the Inertia server-side adapter using the Composer package manager.

composer require inertiajs/inertia-laravel 

Next, set up the root Blade template that will be used when a user first visits your application. This template is responsible for loading your CSS and JavaScript assets, and it must include a root where your JavaScript frontend (React via Inertia) will be mounted.

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title inertia>Vyzor - Inertia + Vue & Laravel Admin & Dashboard Template

    <!-- App favicon -->
    <link rel="shortcut icon" href="{{ URL::asset('favicon.ico') }}">

    <!-- ICONS CSS -->
    <link href="{{asset('build/assets/icon-fonts/icons.css')}}" rel="stylesheet">
    <!-- @routes -->
    @viteReactRefresh
    @vite(['resources/js/app.jsx'])
    @inertiaHead
    </head>
    <body>
    @inertia
    </body>
</html> 

2.Client-side Setup:

Once you have your server-side framework configured, you then need to setup your client-side framework. Inertia currently provides support for React, Vue, and Svelte..

First, install the Inertia client-side adapter corresponding to your framework of choice.

npm install @inertiajs/react
                                            

Initialize the Inertia app

Next, update your main JavaScript file to boot your Inertia app. To accomplish this, we'll initialize the client-side framework with the base Inertia component.

import './bootstrap';
import '../scss/app.scss';
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'
import RootWrapper from './Layouts/Rootwrapper';
import '../../resources/js/assets/scss/switcher.scss'
createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        return pages[`./Pages/${name}.jsx`]
    },
    setup({ el, App, props }) {
        createRoot(el).render(
            <RootWrapper >
                 <App {...props} />
            </RootWrapper>
        )
    },
})
                                            

How to Create a New Page

To create a new page in a Laravel + Inertia.js + React application, start by adding a new React component inside the resources/js/Pages directory—for example, Newpage.jsx. This file will contain the structure and content of your new page using JSX. Next, define a corresponding route in Laravel’s routes/web.php file using the Inertia::render() method, which connects the URL path to the React component. Once the route is set, visiting that URL in the browser will render your new React page. Optionally, you can integrate the new page into your navigation menu using the Inertia Link component and wrap it in a layout component for a consistent UI.

Note:

If your are using "npm install", You should need to delete the "package-lock.json file" from project root.

To install the peer Depencies

In general, the npm i command is used to install all dependencies or devDependencies from a package. However, sometimes you may encounter errors while installing certain dependencies. In such cases, the --force argument can be used to force npm to install those dependencies.

Using the --force argument can be helpful when you need to install a specific dependency that is causing issues during installation. However, it should be used with caution, as it can potentially cause conflicts with other dependencies or lead to unexpected behavior. It's always a good idea to thoroughly test your application after using the --force argument to ensure that everything is working as expected.

npm install --force

Skipping the installation of peer dependencies can sometimes lead to issues with the functionality or compatibility of the package. To ensure that your package functions correctly, it's important to manually install any missing peer dependencies using the npm install command. When installing peer dependencies, you should also be aware of the potential for conflicts with other packages or dependencies. It's a good idea to carefully review the peer dependencies required by each package and ensure that they are compatible with other packages in your project. By taking these steps, you can avoid potential issues and ensure that your packages are installed and functioning correctly.

npm install--legacy-peer-deps

We have to use only one file example: (for yarn yarn-lock) & (for npm package-lock.json) file

For Build your Template

Build your application for host on server using below command:

npm run build
                                        

"Similarly, the starter kit can be installed as well."

Introduction to the Vyzor Template Starter Kit:

The Vyzor template starter kit is a resource that helps developers kickstart their Vyzor web development projects by providing a preconfigured and ready-to-use template. It aims to simplify the initial setup and provide a foundation for building Inertia + React & Laravel-based websites or applications.

Purpose of the Vyzor Template Starter Kit:

The purpose of the Vyzor template starter kit is to save developers time and effort by offering a set of prebuilt files and configurations commonly used in Vyzor projects. Instead of starting from scratch, developers can leverage the starter kit to quickly set up a project structure that adheres to best practices and industry standards.

Benefits of Using the Vyzor Template Starter Kit:

The starter kit eliminates the need to set up the basic project structure manually. It provides a well-organized file and folder structure, including commonly used directories for separating code, templates, assets, and configuration files. This allows developers to focus more on implementing business logic rather than spending time on initial setup.
Before using the Vyzor template starter kit, developers should have a basic understanding of Inertia + React & Laravel and web development concepts. Additionally, they should have a web server environment Laravel + React & Inertia installed on their local machines or a hosting server. Familiarity with React, CSS, and JavaScript is also beneficial for frontend development aspects.

Starterkit Overview

You can use the Starterkit if you are creating a new project. It will be time-consuming to use the full admin version for a new project as Vyzor have more than 180 pages.

We have provided all the pre-build layouts like Sidemenu, Header, Footer and Scripts etc in the Starterkit.

For further information or support regarding the template, please contact us using the provided link:https://support.spruko.com/

• Take a look at the folder structure of the "Starterkit."
• Integration of your customized .jsx pages becomes easy when using the "Starterkit."
• The "Starterkit" provides all the layout components and related assets.
• To explore the contents of the "Starterkit," unzip the project folder received after purchase.
Navigate to the following paths:
• Example: resources/js/Layouts - This folder contains files such as authenticationlayout.jsx, landinglayout.jsx ,etc.
• Example: resources/js/Pages/new folder create - Add your js.x pages here if you have more.

Basic Layout Structure

Main Layout structure of the Vyzor template .Root:resources\js\Layouts\layout.jsx

   import { Fragment, useEffect, useRef, useState } from "react"
   import Footer from "../shared/layouts-components/footer/footer";
   import Header from "../shared/layouts-components/header/header";
   import Sidebar from "../shared/layouts-components/sidebar/sidebar";
   import { Initialload } from "../contextapi"
   import { data$, getState } from "../shared/layouts-components/services/switcherServices"
   import Backtotop from "../shared/layouts-components/backtotop/backtotop";
   function RootLayout ( {children}) {

        const [lateLoad, setlateLoad] = useState(false);
        const progressRef = useRef(null);

        const [pageloading, setpageloading] = useState(false)

        useEffect(() => {
            setlateLoad(true);
            const handleScroll = () => {
                const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
                const scrollPercent = (scrollTop / scrollHeight) * 100;

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

            window.addEventListener('scroll', handleScroll);
            return () => window.removeEventListener('scroll', handleScroll);
        }, []);

        let [variable, setVariable] = useState(getState());
        useEffect(() => {
          const subscription = data$.subscribe((e) => {
            setVariable(e);
          });

          return () => subscription.unsubscribe();
        }, []);
        useEffect(() => {
            setlateLoad(true);
        }, []);
        let containerclass = variable.dataPageStyle === 'flat' ? "main-body-container" : ""
        return (
        <>
          <Fragment>
            <Initialload.Provider value={{ pageloading, setpageloading }}>
                <div style={{ display: `${lateLoad ? "block" : "none"}` }}>
                <div ref={progressRef} className="progress-top-bar"></div>
                  <div className='page'>
                    <Header />
                    <Sidebar />
                    <div className='main-content app-content'>
                      <div className={`container-fluid page-container ${containerclass}`}>
                        <children />
                      </div>
                    </div>
                    <Footer />
                  </div>
                  <Backtotop />
                </div>
            </Initialload.Provider>
          </Fragment>
        </>
       )
    }

    export default RootLayout  
                                        

General React file structure of the Vyzor template .resources\js\Pages\pages\empty\empty.jsx

    
    import React, { Fragment } from "react";
    import { Card, Col, Row } from "react-bootstrap";
    import Seo from "../../../shared/layouts-components/seo/seo";
    import Pageheader from "../../../shared/layouts-components/pageheader/pageheader";
    import MainLayout from "@/Layouts/layout";
    const Empty = () => {
        return (
            <Fragment>
                <!-- Page Header -->
                    <Seo title="Pages-Empty" />
                    <Pageheader title="Pages"  currentpage="Empty" activepage="Empty" />
                <!-- Page Header Close -->

                <!-- Start::row-1 -->
                    <Row>
                        <Col xl={12}>
                            <Card className="custom-card">
                                <Card.Body>
                                    <h6 className="mb-0">Empty Card</h6>
                                </Card.Body>
                            </Card>
                        </Col>
                    </Row>
                <!-- End::row-1 -->
            </Fragment>
        )
    };
    // Assign layout
    Empty.layout = (page) => <MainLayout>{page}</MainLayout>;
    export default Empty;

Sidemenu Layout Structure

How to Add Menus to Sidebar.

In React project, it can be easy to add menus to the sidebar by modifying the MenuItems array in the nav.jsx resources\js\shared\layouts-components\sidebar\nav.jsx file. The sidebar will dynamically display the menus based on the contents of this array. below are the steps as follows

Steps:

Open nav.jsx File:

Open the nav.jsx resources\js\shared\layouts-components\sidebar\nav.jsx file in React 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:

To add the children to Menu Items:

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

Save the Changes:

After adding your menu items, save the changes made to the nav.jsx resources\js\shared\layouts-components\sidebar\nav.jsx 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 React project. The menus will be dynamically generated based on the content of the MenuItems array in the nav.jsx file.

Routing

Basic Route

Following are the fundamental building blocks to creating a route web.php

    
    Route::get('', function () {
        return Inertia::render('Login'); // your React component
    });
    Route::get('dashboards/sales', function () {
        return Inertia::render('dashboards/sale/sale'); // your React component
    });
    Route::get('dashboards/analytics', function () {
        return Inertia::render('dashboards/analytics/analytics'); // your React component
    });
    Route::get('dashboards/ecommerce/dashboard', function () {
        return Inertia::render('dashboards/ecommerce/dashboard/dashboard');
    });
    .......etc.
                                            

Configure Link in Menu

To Add new link in Sidemenu

Following are the fundamental building blocks to creating a new link.

    ├── src
    ├──components
    ├──common
    ├──sidebar
            ├── nav.jsx
                export const MENUITEMS = [
                {
                    menutitle: 'MAIN'
                },
                {
                    title: "Dashboards", icon: Svgicons.Dashboardicon, type: "sub", active: false, dirchange: false, children: [

                       { path: `${import.meta.env.BASE_URL}dashboards/sales`, icon: Svgicons.Salesicon, type: "link", active: false, selected: false, dirchange: false, title: "Sales" },
                        { path: `${import.meta.env.BASE_URL}dashboards/analytics`, icon: Svgicons.Analyticsicon, type: "link", active: false, selected: false, dirchange: false, title: "Analytics" },

                    {......}
                    ]
                }
              ]
        

Firebase SetUp

Step-1: Now run below commands inside our Vyzor project to install firebase latest.

step-2: Add firebase API configuration details(create database on firebase) to the firebase Auth Component refer the path (resources\js\firebase\auth.jsx)

Firebase Revocation process

Firebase installation process