## Documentation

### Introduction

Corona Vue Admin is a responsive Vuejs template that is based on the CSS framework Bootstrap 4 and it is built with Sass. Sass compiler makes it easier to code and customize. If you are unfamiliar with Bootstrap or Sass, visit their website and read through the documentation. All of Bootstrap components have been modified to fit the style of Corona Vue Admin and provide a consistent look throughout the template.

Before you start working with the template, we suggest you go through the pages that are bundled with the theme. Most of the template example pages contain quick tips on how to create or use a component which can be really helpful when you need to create something on the fly.

### File Structure

Once you have download the package you will see the following folder structure inside the folder.

Corona/ ├── Vue ├── template ├── public/ ├── src/ ├── assets/ ├── components/ ├── layout/ ├── pages/ ├── router/ ├── index.html ├── App.vue ├── main.js ├── babel.config.js ├── package.json ├── README.md ├── CHANGELOG.md ├── .gitignore ├── CHANGELOG.md ├── documentation

### Installation

#### Set up the Development Environment

Install Node.js and npm if they are not already on your machine.

Vue CLI is a command line interface for the latest Vue. Install it before start with the Vuejs app.

npm install --global @vue/cli

If you have Vue CLI installed previously, update it to the latest Vue CLI. Remove the older version and re-install it.

npm uninstall --global @vue/cli npm install --global @vue/cli@latest

#### Template Installation

Go to the project directory and install the Vuejs local project dependencies.

Run `npm install`. This command install the dependencies in the local `node_modules` folder. By default, `npm install` will install all modules listed as dependencies in `package.json`.

npm install npm run serve

The `npm run serve` command launches the server, watches your files, and rebuilds the app as you make changes to those files. Using the `--open` (or just `-o`) option will automatically open your browser on http://localhost:8080/.

For more detailed information to install the Vuejs application, visit this official Vuejs documentation website.

### Deployment

#### Deploy Vuejs app

For the simplest deployment, create a production build and copy the output directory to a web server.

1. Start with the production build:

npm run build

2. Copy everything within the output folder (dist/) to a folder on the server.

### Basic Structure

#### Layout

<template> <section class="main-view"> <div class="container-scroller"> <Header/> <div class="container-fluid page-body-wrapper"> <Sidebar/> <div class="main-panel"> <div class="content-wrapper"> <router-view></router-view> </div> <!-- content wrapper ends --> <Footer/> </div> <!-- main panel ends --> </div> <!-- page-body-wrapper ends --> </div> </section> </template> <script> import Header from "./partials/Header"; import Sidebar from "./partials/Sidebar"; import Footer from "./partials/Footer"; export default { name: "layout", components: { Header, Sidebar, Footer } } </script>

#### Header

<template> <b-navbar id="template-header" class="p-0 fixed-top d-flex flex-row" toggleable="lg"> <div class="navbar-brand-wrapper d-flex d-lg-none align-items-center justify-content-center"> <router-link class="navbar-brand brand-logo-mini" to="/"> <img src="@/assets/images/logo-mini.svg" alt="logo" /> </router-link> </div> <div class="navbar-menu-wrapper d-flex align-items-center ml-auto ml-lg-0"> <button class="navbar-toggler navbar-toggler align-self-center d-lg-block" type="button" @click="toggleSidebar()"> <span class="mdi mdi-menu"></span> </button> <ul class="navbar-nav w-100"> <li class="nav-item w-100"> <form class="nav-link mt-2 mt-md-0 d-none d-lg-flex search"> <input type="text" class="form-control" placeholder="Search products"> </form> </li> </ul> <b-navbar-nav class="navbar-nav-right ml-auto"> <b-nav-item-dropdown right class="preview-list d-none d-lg-block"> <template slot="button-content"> <div class="count-indicator dropdown-toggle"> <a class="btn btn-success create-new-button" id="createbuttonDropdown" data-toggle="dropdown" aria-expanded="false" href="#">+ Create New Project</a> </div> </template> <h6 class="p-3 mb-0">Projects</h6> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-file-outline text-primary"></i> </div> </div> <div class="preview-item-content"> <p class="preview-subject ellipsis mb-1">Software Development</p> </div> </b-dropdown-item> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-web text-info"></i> </div> </div> <div class="preview-item-content"> <p class="preview-subject ellipsis mb-1">UI Development</p> </div> </b-dropdown-item> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-layers text-danger"></i> </div> </div> <div class="preview-item-content"> <p class="preview-subject ellipsis mb-1">Software Testing</p> </div> </b-dropdown-item> <h6 class="p-3 mb-0 text-center border-top">See all projects</h6> </b-nav-item-dropdown> <b-nav-item class="nav-logout d-none d-lg-block"> <i class="mdi mdi-view-grid"></i> </b-nav-item> <b-nav-item-dropdown right class="preview-list border-left"> <template slot="button-content"> <div class="count-indicator"> <i class="mdi mdi-email"></i> <span class="count-symbol bg-success"></span> </div> </template> <h6 class="p-3 mb-0">Messages</h6> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <img src="@/assets/images/faces/face1.jpg" alt="image" class="profile-pic rounded-circle"> </div> <div class="preview-item-content d-flex align-items-start flex-column justify-content-center"> <p class="preview-subject ellipsis mb-1 font-weight-normal">Cregh send you a message</p> <p class="text-gray mb-0">15 Minutes ago</p> </div> </b-dropdown-item> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <img src="@/assets/images/faces/face2.jpg" alt="image" class="profile-pic rounded-circle"> </div> <div class="preview-item-content d-flex align-items-start flex-column justify-content-center"> <p class="preview-subject ellipsis mb-1 font-weight-normal">Profile picture updated</p> <p class="text-gray mb-0">18 Minutes ago</p> </div> </b-dropdown-item> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <img src="@/assets/images/faces/face3.jpg" alt="image" class="profile-pic rounded-circle"> </div> <div class="preview-item-content d-flex align-items-start flex-column justify-content-center"> <p class="preview-subject ellipsis mb-1 font-weight-normal">Mark send you a message</p> <p class="text-gray mb-0">1 Minutes ago</p> </div> </b-dropdown-item> <p class="p-3 mb-0 text-center border-top">4 new messages</p> </b-nav-item-dropdown> <b-nav-item-dropdown right class="preview-list border-left"> <template slot="button-content"> <div class="count-indicator"> <i class="mdi mdi-bell"></i> <span class="count-symbol bg-danger"></span> </div> </template> <h6 class="p-3 mb-0">Notifications</h6> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-calendar text-success"></i> </div> </div> <div class="preview-item-content d-flex align-items-start flex-column justify-content-center"> <p class="preview-subject font-weight-normal mb-1">Event today</p> <p class="text-gray ellipsis mb-0"> Just a reminder that you have an event today </p> </div> </b-dropdown-item> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-settings text-danger"></i> </div> </div> <div class="preview-item-content d-flex align-items-start flex-column justify-content-center"> <p class="preview-subject font-weight-normal mb-1">Settings</p> <p class="text-gray ellipsis mb-0"> Update dashboard </p> </div> </b-dropdown-item> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-link-variant text-warning"></i> </div> </div> <div class="preview-item-content d-flex align-items-start flex-column justify-content-center"> <p class="preview-subject font-weight-normal mb-1">Launch Admin</p> <p class="text-gray ellipsis mb-0"> New admin wow! </p> </div> </b-dropdown-item> <p class="p-3 mb-0 text-center border-top">See all notifications</p> </b-nav-item-dropdown> <b-nav-item-dropdown right class="preview-list nav-profile"> <template slot="button-content"> <div class="navbar-profile"> <img class="img-xs rounded-circle" src="@/assets/images/faces/face15.jpg" alt=""> <p class="mb-0 d-none d-sm-block navbar-profile-name">Henry Klein</p> <i class="mdi mdi-menu-down d-none d-sm-block"></i> </div> </template> <h6 class="p-3 mb-0">Profile</h6> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-settings text-success"></i> </div> </div> <div class="preview-item-content"> <p class="preview-subject ellipsis mb-1">Settings</p> </div> </b-dropdown-item> <b-dropdown-item class="preview-item"> <div class="preview-thumbnail"> <div class="preview-icon bg-dark rounded-circle"> <i class="mdi mdi-logout text-danger"></i> </div> </div> <div class="preview-item-content"> <p class="preview-subject ellipsis mb-1">Log out</p> </div> </b-dropdown-item> <p class="p-3 mb-0 text-center border-top">Advanced settings</p> </b-nav-item-dropdown> </b-navbar-nav> <button class="navbar-toggler navbar-toggler-right align-self-center" type="button" @click="toggleMobileSidebar()"> <span class="mdi mdi-menu"></span> </button> </div> </b-navbar> </template> <script> export default { name: 'app-header', methods: { toggleSidebar: () => { document.querySelector('body').classList.toggle('sidebar-icon-only'); }, toggleMobileSidebar: () => { document.querySelector('#sidebar').classList.toggle('active'); } } } </script> <style scoped> </style>

#### Sidebar

<template> <section class="app-sidebar"> <nav class="sidebar sidebar-offcanvas" id="sidebar"> <div class="sidebar-brand-wrapper d-none d-lg-flex align-items-center justify-content-center fixed-top text-center"> <router-link class="sidebar-brand brand-logo" to="/"> <img src="@/assets/images/logo.svg" alt="logo" /> </router-link> <router-link class="sidebar-brand brand-logo-mini" to="/"> <img src="@/assets/images/logo-mini.svg" alt="logo" /> </router-link> </div> <ul class="nav"> <li class="nav-item account-dropdown"> <a class="nav-link" v-b-toggle="'account-dropdown'"> <img class="img-xs rounded-circle" src="@/assets/images/faces-clipart/pic-1.png" alt=""> <p class="mb-0 text-light">Stella Johnson</p> <i class="menu-arrow"></i> </a> <b-collapse accordion="sidebar-accordion" id="account-dropdown"> <ul class="nav flex-column sub-menu pl-0"> <li class="nav-item"> <a class="nav-link pl-5" href="#"> <span class="menu-icon"> <i class="mdi mdi-account"></i> </span> <span class="menu-title">Profile</span> </a> </li> <li class="nav-item"> <a class="nav-link pl-5" href="#"> <span class="menu-icon"> <i class="mdi mdi-email"></i> </span> <span class="menu-title">Inbox</span> </a> </li> <li class="nav-item"> <a class="nav-link pl-5" href="#"> <span class="menu-icon"> <i class="mdi mdi-wrench"></i> </span> <span class="menu-title">Settings</span> </a> </li> <li class="nav-item"> <a class="nav-link pl-5" href="#"> <span class="menu-icon"> <i class="mdi mdi-power"></i> </span> <span class="menu-title">Logout</span> </a> </li> </ul> </b-collapse> </li> <li class="nav-item nav-category"> <span class="nav-link">Navigation</span> </li> <li class="nav-item menu-items" v-on:click="collapseAll"> <router-link class="nav-link" to="/"> <span class="menu-icon"> <i class="mdi mdi-speedometer"></i> </span> <span class="menu-title">Dashboard</span> </router-link> </li> <li class="nav-item menu-items"> <span class="nav-link" v-b-toggle="'ui-basic'" :class="{'active': subIsActive('/basic-ui')}"> <span class="menu-icon"> <i class="mdi mdi-laptop"></i> </span> <span class="menu-title">Basic UI Elements</span> <i class="menu-arrow"></i> </span> <b-collapse accordion="sidebar-accordion" id="ui-basic"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <router-link class="nav-link" to="/basic-ui/buttons/">Buttons</router-link> </li> <li class="nav-item"> <router-link class="nav-link" to="/basic-ui/dropdowns/">Dropdowns</router-link> </li> <li class="nav-item"> <router-link class="nav-link" to="/basic-ui/typography/">Typography</router-link> </li> </ul> </b-collapse> </li> <li class="nav-item menu-items"> <span class="nav-link" v-b-toggle="'charts-dropdown'" :class="{'active': subIsActive('/charts')}"> <span class="menu-icon"> <i class="mdi mdi-chart-bar"></i> </span> <span class="menu-title">Charts</span> <i class="menu-arrow"></i> </span> <b-collapse accordion="sidebar-accordion" id="charts-dropdown"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <router-link class="nav-link" to="/charts/chartjs/">Chart js</router-link> </li> </ul> </b-collapse> </li> <li class="nav-item menu-items"> <span class="nav-link" v-b-toggle="'table-dropdown'" :class="{'active': subIsActive('/tables')}"> <span class="menu-icon"> <i class="mdi mdi-table-large"></i> </span> <span class="menu-title">Tables</span> <i class="menu-arrow"></i> </span> <b-collapse accordion="sidebar-accordion" id="table-dropdown"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <router-link class="nav-link" to="/tables/basic-tables/">Basic Table</router-link> </li> </ul> </b-collapse> </li> <li class="nav-item menu-items"> <span class="nav-link" v-b-toggle="'user-page-dropdown'" :class="{'active': subIsActive('/auth-pages')}"> <span class="menu-icon"> <i class="mdi mdi-security"></i> </span> <span class="menu-title">User Pages</span> <i class="menu-arrow"></i> </span> <b-collapse accordion="sidebar-accordion" id="user-page-dropdown"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <router-link class="nav-link" to="/auth-pages/login/">Login</router-link> </li> <li class="nav-item"> <router-link class="nav-link" to="/auth-pages/register/">Register</router-link> </li> </ul> </b-collapse> </li> <li class="nav-item menu-items"> <span class="nav-link" v-b-toggle="'error-page-dropdown'" :class="{'active': subIsActive('/error-pages')}"> <span class="menu-icon"> <i class="mdi mdi-lock"></i> </span> <span class="menu-title">Error pages</span> <i class="menu-arrow"></i> </span> <b-collapse accordion="sidebar-accordion" id="error-page-dropdown"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <router-link class="nav-link" to="/error-pages/error-404/">404</router-link> </li> <li class="nav-item"> <router-link class="nav-link" to="/error-pages/error-500/">500</router-link> </li> </ul> </b-collapse> </li> <li class="nav-item menu-items"> <span class="nav-link" v-b-toggle="'form-elements'" :class="{'active': subIsActive('/forms')}"> <span class="menu-icon"> <i class="mdi mdi-playlist-play"></i> </span> <span class="menu-title">Forms</span> <i class="menu-arrow"></i> </span> <b-collapse accordion="sidebar-accordion" id="form-elements"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <router-link class="nav-link" to="/forms/basic-elements/">Basic Elements</router-link> </li> </ul> </b-collapse> </li> <li class="nav-item menu-items"> <span class="nav-link" v-b-toggle="'icons-dropdown'" :class="{'active': subIsActive('/icons')}"> <span class="menu-icon"> <i class="mdi mdi-contacts"></i> </span> <span class="menu-title">Icons</span> <i class="menu-arrow"></i> </span> <b-collapse accordion="sidebar-accordion" id="icons-dropdown"> <ul class="nav flex-column sub-menu"> <li class="nav-item"> <router-link class="nav-link" to="/icons/mdi-icons/">MDI</router-link> </li> </ul> </b-collapse> </li> <li class="nav-item menu-items" v-on:click="collapseAll"> <a class="nav-link" target="_blank" href="http://www.bootstrapdash.com/demo/corona-vue-free/documentation/documentation.html"> <span class="menu-icon"> <i class="mdi mdi-file-document-box"></i> </span> <span class="menu-title">Documentation</span> </a> </li> </ul> </nav> </section> </template> <script> export default { name: 'sidebar', data () { return { collapses: [ { show: false }, { show: false }, { show: false } ] } }, mounted () { const body = document.querySelector('body') // add class 'hover-open' to sidebar navitem while hover in sidebar-icon-only menu document.querySelectorAll('.sidebar .nav-item').forEach(function (el) { el.addEventListener('mouseover', function () { if (body.classList.contains('sidebar-icon-only')) { el.classList.add('hover-open') } }) el.addEventListener('mouseout', function () { if (body.classList.contains('sidebar-icon-only')) { el.classList.remove('hover-open') } }) }) }, methods: { collapseAll() { var exp_element = document.getElementsByClassName("show"); if (exp_element.length > 0) { var elm_id = exp_element[0].id; this.$root.$emit("bv::toggle::collapse", elm_id); } }, subIsActive(input) { const paths = Array.isArray(input) ? input : [input] return paths.some(path => { return this.$route.path.indexOf(path) === 0 // current path starts with this path string }) } }, watch:{ $route () { document.querySelector('#sidebar').classList.toggle('active'); } } } </script>

#### Footer

<template> <section class="app-footer"> <footer class="footer"> <div class="container-fluid clearfix"> <span class="text-muted d-block text-center text-sm-left d-sm-inline-block">Copyright © <a href="http://www.bootstrapdash.com/" target="_blank">bootstrapdash.com </a> 2020.</span> <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">Free <a href="https://www.bootstrapdash.com/vue-admin-templates/" target="_blank"> vue admin templates </a> from BootstrapDash.com</span> </div> </footer> </section> </template> <script> export default { name: 'app-footer' } </script>

### Customer Support

We will assist you any problem you encounter while buidling your dashboard via Corona Vuejs Admin.

Email: support@bootstrapdash.com

We will respond to you as quickly as we can. Thank you.