Steps to be followed for getting started with the template:
There are followings basics packages you should install before going further.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=
MIX_API_CLIENT_ID=YOUR_CLIENT_ID MIX_API_CLIENT_SECRET=YOUR_CLIENT_SECRET
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
- Horizontal.vue
- Verticle.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
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
| - SwiperSlider.vue
| - tab
| - tab-nav.vue
| - tab-nav-item.vue
| - tab-content.vue
| - tab-content-item.vue
| - timeline
| - TimeLine.vue
| - loader
| - Loader.vue
Set favicon for replace favicon.ico and restart server
Use the header style which is in components -> vito -> Partials -> Header. Replace "logo.png" with your own logo image URL.
| - vito-vue
| - layouts
| - 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>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
},
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'
}
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
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
Here is the layout and routing configure
| - layouts
| - AuthLayouts
| - AuthLayouts1.vue
- BlankLayout.vue
- Horizontal.vue
- Verticle.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' }
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
}
}
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 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 |
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 |
<AmChart :element="item.type" :type="item.type" :option="item.bodyData"/>
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 of Am Chart
Slot is set of the content between opening and closing tag.
<ApexChart element="chart" :chartOption="option"/>
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 |
<MorrisChart :element="item.type+index" :type="item.type" :xKeys="item.xKeys" :data="item.bodyData" :colors="item.colors" :yKeys="item.yKeys" :labels="item.labels"/>
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 | - |
Slot is set of the content between opening and closing tag.
<HighChart :ref="item.type" :option="item.bodyData"/>
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 |
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>
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 | - |
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 |
Prop is set the attriblute for the component.
| Name | Type | Detail |
|---|---|---|
| id | String | id for identify the tab content to nav tab |
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. |
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 is set the attriblute for the component.
| Name | Type | Detail |
|---|---|---|
| items | Array | Pass Array of Object to create time line |
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 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. |
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 |
We have build lottie components. And these are the some prop
<lottie :option="require('../../assets/images/small/data')"></lottie>
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 has wonderfull documentation on the following components::
Vue Bootstrap for extra component https://bootstrap-vue.org/docs/components
Supports all major Browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and above.
- Initial Release
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.