Installation

Basic Installation

Steps to be followed for getting started with the template:

There are followings basics packages you should install before going further.

  1. Setup firebase configuration
  2. Open terminal or CMD and go the root directory of the template
  3. Run in terminal or CMD: npm install
  4. To Run project on Local environment run: npm start
  5. Then visit: http://localhost:3000

Development to production

Here is the steps of production:

  1. If you can deploy in subdirectory first you can copy and rename the following file .env.example to .env and set the production path by BASE_URL="" this key
  2. To Deploy project on server create production build by running: npm run build
  3. This will generate /dist folder in project root directory you'll have to upload these file using a FTP on your server
  4. Now that you have followed these steps your basic installation is complete and ready to flaunt your site to the world.

Folder Structure

Here is the general structure of the template:


vito-react
| - public
   | - img
     - favicon.ico
     - index.html

| - src
  | - assets
    | - css
    | - fonts
    | - images
    | - js
    | - scss

    | - components
        | - vito

    | - config
        | - vito

    | - layouts
        | - AuthLayouts
            | - AuthLayouts1
          - BlankLayout
          - Layout1

    | - helper
    | - router
    | - store
    | - views
      - App.js
      - index.js
      - serviceWorker.js
  - .editorconfig
  - .eslintignore.js
  - .gitignore
  - babel.config.js
  - .env
  - package.json
  - README.md
  - webpack.config.js

Vito custom components structure

Here is the general structure of the vito custom components:


<!-- Vito components -->

| - components
    | - vito
        | - breadcrumbs
            - BreadCrumbStyle1
        | - calendar
            - BreadCrumbStyle1
            - BreadCrumbStyle1
        | - cards
            | - DetailCard
            | - TimelineCard
            | - UserDetailsCard
        | - chartStyle
            | - apexChart
            | - apexLiveChart
            | - MapAmChart
        | - footer
            | - FooterStyle1
        | - lottie
            | - Lottie
        | - menus
            | - ListStyle1
        | - navbars
            | - NavBarStyle1
        | - rightsidebar
            | - RightSideBarStyle1
        | - sidebar
            | - SideBarStyle1
        | - slider
            | - Slick
        | - tab
            | - tab-nav
            | - tab-nav-item
            | - tab-content
            | - tab-content-item
        | - timeline
            | - TimeLine
        | - loader
            | - Loader

For Favicon icon

Set favicon for replace favicon.ico and restart server

For Logo

Use the header style which is in components -> vito -> Partials -> Header. Replace "logo.png" with your own logo image URL.


| - vito-vue
    | - layouts
        | - Layout1

<NavBarStyle1
title={"Dashboard"}
homeUrl={"/"}
logo={ require('../../assets/images/logo.gif') }
breadCrumb={items}
>

Configuration

Firebase

For Setup Firebase Goto following file and update keys

src/constant/firebase.js


firebaseConfig: {
    apiKey: YOUR_API_KEY,
    authDomain: YOUR_AUTH_DOMAIN,
    databaseURL: YOUR_DATABASE_URL,
    projectId: YOUR_PROJECT_ID,
    storageBucket: YOUR_STORAGE_BUCKET,
    messagingSenderId: YOUR_MESSAGING_SENDER_ID,
    appId: YOUR_APP_ID
  },

Algolia

For Setup Autho Goto following file and update keys and or use .env variable

src/config/algolia.js


export const APP_ID = YOUR_APPLICATION_ID
export const APP_KEY = YOUR_APP_KEY

Layout Configure

Here is the layout and routing configure


 | - layouts
    | - AuthLayouts
        | - AuthLayouts1
      - BlankLayout
      - Layout1

Router url configure


<Switch>
<Route path="/auth/sign-in1" component={SignIn1} />
<Route path="/auth/sign-up1" component={SignUp1} />
<Route path="/auth/recover-password" component={ResetPassword} />
</Switch>

Sidebar & Header

Here is the sidebar object example just you can copy and past and rename then title and icon.


[
    {
        "title": "Dashboard",
        "is_heading": true,
        "is_active": false,
        "class_name": "",
        "is_icon_class": true,
        "icon": ""
    },
]

Sidebar based on json and check the file in spacific path ./src/fackData/json/SideBar.json and import or add your array to sidebar key.


// Import JSON Data...
import sideBarItems from '../../fakeData/json/sideBar';
    
<SideBarStyle1
    items={sideBarItems}
    logo={ require('../../assets/images/logo.png') }
    homeUrl={"/"}
/>

Custom Components

Custom Card

We have build different types of custom card components. And these are the some prop and slots


import React from 'react';

const Index = (props) => {
    return(
        <>
            <div className="iq-card ">
                <div className="iq-card-body">
                    <div className="row">
                        <div className="col-lg-12 mb-2 d-flex justify-content-between">
                            <div className={"icon iq-icon-box rounded-circle rounded-circle "+props.iconClass}>
                                <i className={props.icon}></i>
                            </div>
                        </div>
                        <div className="col-lg-12 mt-3">
                            <h6 className="card-title text-uppercase text-secondary mb-0">{props.text}</h6>
                            <span className="h2 text-dark mb-0 counter">{props.counter}</span>
                        </div>
                    </div>
                    {props.updown ? (<p className="mb-0 text-muted mt-3">{props.updown}</p>) : ''}
                </div>
            </div>
        </>
    )
};

export default Index;

TimeLine

We have build timeline components. And these are the some prop


import React from "react";

const Index = props => {
    const { timeData, color } = props;
    return (
        <>
            <div className={"timeline-dots " + (color !== undefined ?  ("border-" + color) : "")} />
            <h6 className={"float-left mb-1"}>{ timeData.title }</h6>
            <small className={"float-right mt-1"}>{ timeData.date }</small>
            <div className={"d-inline-block w-100"}>
                <p>{ timeData.description }</p>
                { props.children }
            </div>
        </>
    )
};

export default Index;

Lottie

We have build lottie components. And these are the some prop


import React from 'react';
import Lottie from 'react-lottie';

class Index extends React.Component{
    constructor(props) {
        super(props);
        this.state = {isStopped: false, isPaused: false};
    }

    render() {
        const defaultOptions = {
            loop: this.props.loop ? this.props.loop : true,
            autoplay: this.props.autoplay ? this.props.autoplay : true,
            animationData: this.props.data,
            rendererSettings: {
                preserveAspectRatio: 'xMidYMid slice'
            }
        };
        return (
            <div className={this.props.className}>
                <Lottie options={defaultOptions}
                        isStopped={this.state.isStopped}
                        isPaused={this.state.isPaused}/>
            </div>
        );
    }
}

export default Index;

Bootstrap Components

Bootstrap has wonderfull documentation on the following components::

Vue Bootstrap for extra component https://react-bootstrap.netlify.app/docs/components/accordion

Browser Support

Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.

Change Log

Version 1.0

- Initial Release

Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.


Images



Plugins



CSS & Fonts