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 for login: Required
  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 run dev
  5. Then visit: http://localhost:8080

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 VUE_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-vue
| - public
   | - img
     - favicon.ico
     - index.html

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

    | - components
        | - vito

    | - config
        | - vito

    | - FackApi
        | - vito

    | - layouts
        | - AuthLayouts
            | - AuthLayouts1.vue
          - BlankLayout.vue
          - Layout1.vue

    | - plugins
        | - bootstrap-vue.js
    | - router
    | - store
    | - views
      - App.vue
      - main.js
      - registerServiceWorker.js
  - .browserslistrc
  - .editorconfig
  - .eslintrc.js
  - .eslintignore.js
  - .gitignore
  - babel.config.js
  - .env.example
  - package.json
  - README.md
  - vue.config.js

Vito custom components structure

Here is the general structure of the vito custom components:


<!-- Vito components -->

| - components
    | - vito
        | - breadcrumbs
            - BreadCrumbStyle1.vue
        | - calendar
            - FullCalendar.vue
        | - cards
            | - iq-card.vue
        | - chart
            | - AmChart.vue
            | - ApexChart.vue
            | - HighChart.vue
            | - MapAmChart.vue
            | - MorrisChart.vue
        | - footer
            | - FooterStyle1.vue
        | - lottie
            | - Lottie.vue
        | - menus
            | - ListStyle1.vue
        | - navbars
            | - NavBarStyle1.vue
        | - rightsidebar
            | - RightSideBarStyle1.vue
        | - sidebar
            | - SideBarStyle1.vue
        | - slider
            | - Swiper.vue
            | - SwiperNav.vue
            | - SwiperSlide.vue
        | - tab
            | - tab-nav.vue
            | - tab-nav-item.vue
            | - tab-content.vue
            | - tab-content-item.vue
       | - timeline
            | - TimeLine.vue
        | - loader
            | - Loader.vue

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
        | - Horizontal.vue
        | - Verticle.vue

<SideBarStyle1 :items="sidebar" :logo="logo"></SideBarStyle1>
<NavBarStyle1 title="Dashboard" :homeURL="{ name: 'dashboard1.home' }" :logo="logo"></NavBarStyle1>
<script>
  import SideBarItems from '../FackApi/json/SideBar'
  import logoImg from '../assets/images/logo.png'
    data () {
        return {
          sidebar: SideBarItems,
          userProfile: profile,
          logo: logo
        }
      }
</script>

Configuration

Firebase

For Setup Firebase Goto following file and update keys

src/config/constant.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
  },

AuthO

For Setup Autho Goto following file and update keys

src/config/constant.js


auth0Config: {
    domain: YOUR_DOMAIN,
    clientID: YOUR_CLIENT_ID,
    // make sure this line is contains the port: 8080
    redirectUri: 'http://localhost:8080/callback',
    // we will use the api/v2/ to access the user information as payload
    audience: 'https://dev-6u-3fb22.auth0.com/api/v2/',
    responseType: 'token id_token',
    scope: 'openid profile'
  }

Agora Video Call

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

src/config/agora.config.js


export const AGORA_APP_ID = process.env.VUE_APP_AGORA_KEY

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.vue
      - BlankLayout.vue
      - Verticle.vue
      - Horizontal.vue
| - router
    | - index.js<

Router url configure


// Set Layout in this route
- Dashboard 1

```
meta: { auth: true, name: 'Home 1', layout: 'mini-sidebar-right-fix' }
```
- Dashboard 2 (Default)

```
meta: { auth: true, name: 'Home 1' }
```
- Menu Design / Horizontal Menu

```
meta: { auth: true, name: 'Home 1', layout: 'nav-with-menu' }
```
- Menu Design / Horizontal Top Menu

```
meta: { auth: true, name: 'Home 1', layout: 'nav-bottom-menu' }
```
- Menu Design / Two Sidebar

```
meta: { auth: true, name: 'Home 1', layout: 'two-sidebar' }
```
- Menu Design / Icon With Text

```
meta: { auth: true, name: 'Home 1', layout: 'icon-with-text' }

Sidebar & Header

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


[
  {
    "title": "Dashboard",
    "is_heading": false,
    "is_active": true,
    "link": "",
    "class_name": "",
    "is_icon_class": true,
    "icon": "ri-home-4-line",
    "children": [
      {
        "title": "Dashboard1",
        "is_active": false,
        "link": {
          "name": "dashboard1.home"
        },
        "class_name": "",
        "is_icon_class": false,
        "icon": ""
      }
    ]
  }
]

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


<SideBarStyle1 :items="sidebar" :logo="logo" />

<NavBarStyle1 title="Dashboard" :homeURL="{ name: 'dashboard1.home' }" :logo="logo">
    <template v-slot:right>
        add your items
    </template>
</NavBarStyle1>

 <FooterStyle1>
  <template v-slot:left>
    <li class="list-inline-item"><a href="#">Privacy Policy</a></li>
    <li class="list-inline-item"><a href="#">Terms of Use</a></li>
  </template>
  <template v-slot:right>
    Copyright 2020 <a href="#">Vito</a> All Rights Reserved.
  </template>
</FooterStyle1>
                                        

import SideBarItems from '../FackApi/json/SideBar'

data () {
    return {
      sidebar: SideBarItems
    }
}

Custom Components

Custom Card

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


<iq-card body-class="border text-center" class="bg-primary text-white">
 <template v-slot:headerTitle>
      <h4>Card Title</h4>
  </template>
  <template v-slot:body>
    <p >lorium ipsum</b-button>
  </template>
  <template v-slot:footer>
    <b-button variant="danger">Button</b-button>
  </template>
</iq-card>

Prop

Prop is set the attriblute for the component.

Name Detail
headerClass Class added in card header div
bodyClass Class added in card body div
footerClass Class added in card footer div

Slots

Slot is set of the content between opening and closing tag.

Name Detail
headerTitle For card top left icon or title
headerAction For card top right icon or title
body For card body to add with padding
default For without padding added content

Am Chart


    <AmChart :element="item.type" :type="item.type" :option="item.bodyData"/>
Prop

Prop is set the attriblute for the component.

Name Type Detail
element String element is identify the unique div element like id
type String Difftrent type of chart set by type
option Object Chart data and setting by option object
Types

Types of Am Chart

  1. line
  2. column
  3. mixes-column
  4. stacked
  5. bar-line
  6. data-based
  7. line-zoom-h
  8. line-zoom-v
  9. radar
  10. polar-scatter
  11. polar
  12. pie

Apex Chart

Slot is set of the content between opening and closing tag.

 
    <ApexChart element="chart" :chartOption="option"/>
Prop

Prop is set the attriblute for the component.

Name Type Detail
element String element is identify the unique div element like id
chartOption Object Set Chart option

Morris Chart

 
    <MorrisChart :element="item.type+index" :type="item.type" :xKeys="item.xKeys" :data="item.bodyData" :colors="item.colors" :yKeys="item.yKeys" :labels="item.labels"/>
Prop

Prop is set the attriblute for the component.

Name Type Detail
element String element is identify the unique div element like id
data Object Set Chart data
xKeys Array X axis keys
yKeys Array Y Axis keys
labels Array -
colors Array -

High chart

Slot is set of the content between opening and closing tag.

 
    <HighChart :ref="item.type" :option="item.bodyData"/>
Prop

Prop is set the attriblute for the component.

Name Type Detail
ref String element is identify the unique div element like id
option Object Set Chart option

Tab

We have build custom tab components. And these are the some prop and slots

 
<tab-nav :tabs="true" id="myTab-1">
  <tab-nav-items :active="true" id="home-tab" ariaControls="home" role="tab" :ariaSelected="true" title="Home" />
  <tab-nav-items :active="false" id="profile-tab" ariaControls="profile" role="tab" :ariaSelected="false" title="Profile" />
  <tab-nav-items :active="false" id="contact-tab" ariaControls="contact" role="tab" :ariaSelected="false" title="Contact" />
</tab-nav>
<tab-content id="myTabContent">
  <tab-content-item :active="true" id="home" aria-labelled-by="home-tab">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </tab-content-item>
  <tab-content-item :active="false" id="profile" aria-labelled-by="profile-tab">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </tab-content-item>
  <tab-content-item :active="false" id="contact" aria-labelled-by="contact-tab">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </tab-content-item>
</tab-content>

Tab Nav

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String -
pills Boolean pills is style of nav tab and pass the boolean value
tabs Boolean tabs is style of nav tab and pass the boolean value
vertical Boolean vertical is list style of nav tab and pass the boolean value
align String align nav tabs right, left and center
Events

Events is any functionality want any change of tab

Name Detail
change on tab change call this event

Tab Item

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String identify the tab content for navigate
active Boolean CSS class (or classes) to apply to the currently active tab
ariaControls String The aria-controls attribute creates a cause and effect relationship
ariaSelected Boolean This attribute is used with single-selection and multiple-selection widgets
dataToggle String The toggle tells Bootstrap what to do and the target tells
href String Set navigation link
title String Pass Title as a string or set html content via slot
liClass String -
Slots

Slot is set of the content between opening and closing tag.

Name Detail
title For tab nav item content any html content or image by using slot

Tab Content

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String id for identify the tab content to nav tab

Tab Content Item

Prop

Prop is set the attriblute for the component.

Name Type Detail
id String identify the tab content for navigate
active Boolean CSS class (or classes) to apply to the currently active tab
ariaLabelledBy String Identifies the element (or elements) that labels the current element.

TimeLine

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


timelineItems: [
    {
      color: 'danger',
      title: 'Dev Meetup',
      right: '20 November 2019',
      description: 'Bonbon macaroon jelly <a href="">beans gummi</a> bears jelly lollipop apple',
      child: {
        type: 'img',
        items: [
          require('../../assets/images/user/05.jpg'),
          require('../../assets/images/user/06.jpg'),
          require('../../assets/images/user/07.jpg'),
          require('../../assets/images/user/08.jpg'),
          require('../../assets/images/user/09.jpg'),
          require('../../assets/images/user/10.jpg')
        ]
      }
    }
  ]

<TimeLine :items="timelineItems" />

Prop

Prop is set the attriblute for the component.

Name Type Detail
items Array Pass Array of Object to create time line

Silder

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


<Swiper id="post-slider" :option="options">
    <template v-slot:nav>
        <SwiperNav />
    </template>
    <SwiperSlide>
        <img :src="require('../../assets/images/page-img/p-2.jpg')" alt="post-image" class="img-fluid rounded">
    </SwiperSlide>
</Swiper>

Prop

Prop is set the attriblute for the component.

Name Type Detail
options Object this prop has pass the slider setting object.
id String this prop has pass the slider unique name.

Slots

Slot is set of the content between opening and closing tag.

Name Detail
default Pass slider item in default slot
nav Navigation slot is set slider nav button define possion
pagination If you want to use slider pagination icon for that there is pagination slot. and you can use

Lottie

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


<lottie :option="require('../../assets/images/small/data')"></lottie>

Prop

Prop is set the attriblute for the component.

Name Type Detail
option Object Option pass the lottie animation json file to execute the svg image.

Bootstrap Components

Bootstrap has wonderfull documentation on the following components::

Vue Bootstrap for extra component https://bootstrap-vue.org/docs/components

Browser Support

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

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