520 lines
31 KiB
HTML
520 lines
31 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>Setup | Skote - Vuejs Admin & Dashboard Template | Docs</title>
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<meta content="Skote Premium Multipurpose Admin & Dashboard Template documentation of vuejs" name="description" />
|
|||
|
|
<meta content="Themesbrand" name="author" />
|
|||
|
|
<meta name="keywords" content="Skote admin documentation, Skote Vuejs documentation">
|
|||
|
|
<!-- App favicon -->
|
|||
|
|
<link rel="shortcut icon" href="assets/images/favicon.ico">
|
|||
|
|
<!-- Bootstrap Css -->
|
|||
|
|
<link href="assets/css/bootstrap.min.css" id="bootstrap-style" rel="stylesheet" type="text/css" />
|
|||
|
|
<!-- Icons Css -->
|
|||
|
|
<link href="assets/css/icons.min.css" rel="stylesheet" type="text/css" />
|
|||
|
|
<!-- App Css-->
|
|||
|
|
<link href="assets/css/app.min.css" id="app-style" rel="stylesheet" type="text/css" />
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body data-topbar="dark" data-spy="scroll" data-target=".right-side-nav"
|
|||
|
|
data-offset="175">
|
|||
|
|
|
|||
|
|
<!-- Begin page -->
|
|||
|
|
<div id="layout-wrapper">
|
|||
|
|
|
|||
|
|
<header id="page-topbar">
|
|||
|
|
<div class="navbar-header">
|
|||
|
|
<div class="d-flex">
|
|||
|
|
<!-- LOGO -->
|
|||
|
|
<div class="navbar-brand-box">
|
|||
|
|
<a href="index.html" class="logo logo-light">
|
|||
|
|
<span class="logo-sm">
|
|||
|
|
<img src="assets/images/logo-light.svg" alt="" height="25">
|
|||
|
|
</span>
|
|||
|
|
<span class="logo-lg">
|
|||
|
|
<img src="assets/images/logo-light.png" alt="" height="20"> <span class="badge badge-soft-success ml-2">Vuejs & Laravel-vue</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<button type="button" class="btn btn-sm px-3 font-size-24
|
|||
|
|
header-item waves-effect d-lg-none" id="vertical-menu-btn">
|
|||
|
|
<i class="mdi mdi-menu"></i>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-flex">
|
|||
|
|
<div class="d-inline-block">
|
|||
|
|
<a
|
|||
|
|
href="https://themeforest.net/item/skote-vuejs-admin-dashboard-template/25444550"
|
|||
|
|
target="_blank" class="header-item">Support</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-none d-md-inline-block">
|
|||
|
|
<a
|
|||
|
|
href="https://docs.google.com/forms/d/e/1FAIpQLSfiP9bDHzIQdQoMXFrYvJx00wyFzSu_cqBWP0N0uUHpqjrbzQ/viewform"
|
|||
|
|
target="_blank" class="header-item">Need Customization?</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-inline-block">
|
|||
|
|
<a href="https://1.envato.market/skote-vuejs" target="_blank"
|
|||
|
|
class="header-item">Buy Now</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="d-inline-block">
|
|||
|
|
<h5 class="header-item m-0"><span class="badge badge-danger">v3.4.0</span></h5>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<!-- ========== Left Sidebar Start ========== -->
|
|||
|
|
<div class="vertical-menu">
|
|||
|
|
|
|||
|
|
<div data-simplebar class="h-100">
|
|||
|
|
|
|||
|
|
<!--- Sidemenu -->
|
|||
|
|
<div id="sidebar-menu">
|
|||
|
|
<!-- Left Menu Start -->
|
|||
|
|
<ul class="metismenu list-unstyled" id="side-menu">
|
|||
|
|
<li class="menu-title">Docs</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="index.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-text-box-outline"></i>
|
|||
|
|
<span>Introduction</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="setup-vue.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-cog-outline"></i>
|
|||
|
|
<span>Setup Vuejs</span>
|
|||
|
|
</a>
|
|||
|
|
|
|||
|
|
<a href="setup-laravel-vue.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-cog-outline"></i>
|
|||
|
|
<span>Setup Laravel-vue</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="create-new-page.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-card-plus-outline"></i>
|
|||
|
|
<span>Create a New page</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="menu-title">Layouts</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="vertical.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-flip-horizontal"></i>
|
|||
|
|
<span>Vertical</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="horizontal.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-flip-vertical"></i>
|
|||
|
|
<span>Horizontal</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="menu-title">Themes</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="light.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-white-balance-sunny"></i>
|
|||
|
|
<span>Light Version</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="dark.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-weather-night"></i>
|
|||
|
|
<span>Dark Version</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="rtl.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-web"></i>
|
|||
|
|
<span>RTL Version</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li class="menu-title">Other</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="plugins.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-format-list-bulleted"></i>
|
|||
|
|
<span>Plugins</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<a href="changelog.html" class="waves-effect">
|
|||
|
|
<i class="mdi mdi-format-list-bulleted"></i>
|
|||
|
|
<span>Changelog</span>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<!-- Sidebar -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- Left Sidebar End -->
|
|||
|
|
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<!-- Start right Content here -->
|
|||
|
|
<!-- ============================================================== -->
|
|||
|
|
<div class="main-content">
|
|||
|
|
|
|||
|
|
<div class="page-content">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-lg-12">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="p-lg-1">
|
|||
|
|
|
|||
|
|
<div class="d-xl-flex">
|
|||
|
|
|
|||
|
|
<div class="w-100">
|
|||
|
|
<div id="desc">
|
|||
|
|
<h5 class="">Introduction</h5>
|
|||
|
|
<p>
|
|||
|
|
Skote is a fully featured premium admin dashboard template in <strong>VueJs</strong>
|
|||
|
|
with developer-friendly codes. It is based on <strong> Vue CLI </strong> & <strong>
|
|||
|
|
Vuex </strong> component framework with Firebase authentication. We have not
|
|||
|
|
used jquery in this theme its pure VueJs admin theme with reusable components. We
|
|||
|
|
have added multi langauge support with <code>i18n</code> from which you can simply
|
|||
|
|
add new languages.
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
Skote is an admin dashboard template that is a beautifully crafted, clean & minimal
|
|||
|
|
designed admin template with Dark, Light Layouts with RTL options. You can build any
|
|||
|
|
type of web application like Saas based interface, eCommerce, Crypto, CRM, CMS,
|
|||
|
|
Project management apps, Admin Panels, etc.
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
It will help your team moving faster and saving development costs and valuable time.
|
|||
|
|
If you’re a developer and looking for an admin dashboard that is fully responsive
|
|||
|
|
with Bootstrap and VueJs without jquery then you are at the right place to start
|
|||
|
|
your project using Skote - Vuejs Responsive Bootstrap v5.1.1 Admin Dashboard.
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
Skote contains lots of new design widgets with responsive on all screens. Also,
|
|||
|
|
there are 6 different types of Layouts we have added. It is very easy to change any
|
|||
|
|
layout in your existing running application by changing couple of lines code only as
|
|||
|
|
its managed with scss. We have written standard and developer-friendly code to
|
|||
|
|
increase performance.
|
|||
|
|
</p>
|
|||
|
|
<p>
|
|||
|
|
If you have any questions that are beyond the scope of this documentation, please
|
|||
|
|
feel free to email or contact us via our profile page or sent email on
|
|||
|
|
<code>themesbrand@gmail.com</code>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div id="auth"
|
|||
|
|
class="mb-5">
|
|||
|
|
<h5>Setup Firebase or Fake-Backend authentication</h5>
|
|||
|
|
<p>
|
|||
|
|
Default we have set fake-backend authentication in this template. You can simply change to firebase or fakebackend by changing in <code>.env</code> file.<br />
|
|||
|
|
<strong>Fake-backend : </strong> VUE_APP_DEFAULT_AUTH=fakebackend
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
To setup firebase authentication fill the below details in the <code>.env</code> file.<br />
|
|||
|
|
<strong>Firebase : </strong> VUE_APP_DEFAULT_AUTH=firebase
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<pre class="bg-dark text-white p-3">
|
|||
|
|
VUE_APP_DEFAULT_AUTH=firebase
|
|||
|
|
VUE_APP_APIKEY=
|
|||
|
|
VUE_APP_AUTHDOMAIN=
|
|||
|
|
VUE_APP_DATABASEURL=
|
|||
|
|
VUE_APP_PROJECTId=
|
|||
|
|
VUE_APP_STORAGEBUCKET=
|
|||
|
|
VUE_APP_MESSAGINGSENDERID=
|
|||
|
|
VUE_APP_APPId=
|
|||
|
|
VUE_APP_MEASUREMENTID=
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div id="prerequisites" class="mb-5">
|
|||
|
|
<h4>Prerequisites</h4>
|
|||
|
|
<p>
|
|||
|
|
Please follow below steps to install and setup all prerequisites:
|
|||
|
|
</p>
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<strong>Yarn</strong>
|
|||
|
|
<p>
|
|||
|
|
Make sure to have the <a href="https://yarnpkg.com/"
|
|||
|
|
target="_blank">Yarn</a> installed & running in your computer. If
|
|||
|
|
you already have installed Yarn on your computer, you can skip this step.
|
|||
|
|
</p>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<strong>Git</strong>
|
|||
|
|
<p>Make sure to have the <a href="https://git-scm.com/" target="_blank">Git</a>
|
|||
|
|
installed globally &
|
|||
|
|
running on your computer. If you already have installed
|
|||
|
|
git on your computer, you can skip this step.
|
|||
|
|
</p>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<strong>Vue.js</strong>
|
|||
|
|
|
|||
|
|
<p>Make sure to have the <a href="https://cli.vuejs.org/guide/prototyping.html"
|
|||
|
|
target="_blank">Vue cli</a> installed globally in your computer. If you
|
|||
|
|
already have installed on your computer, you can skip this step.</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
<div id="installation">
|
|||
|
|
<h5 class="mt-4">Installation</h5>
|
|||
|
|
|
|||
|
|
<p>
|
|||
|
|
To setup the admin theme, follow below-mentioned steps:
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<ul>
|
|||
|
|
<li>
|
|||
|
|
<strong>Install Prerequisites</strong>
|
|||
|
|
<p>
|
|||
|
|
Make sure to have all above prerequisites installed & running on your
|
|||
|
|
computer.
|
|||
|
|
</p>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
<li>
|
|||
|
|
<strong>Install Dependencies</strong>
|
|||
|
|
|
|||
|
|
<p>Open your terminal at the root directory of the project, go to your folder
|
|||
|
|
and enter the command <code>yarn install</code>. This would install all the
|
|||
|
|
required dependencies in the <code>node_modules</code> folder.</p>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<p class="mt-4">
|
|||
|
|
After you finished
|
|||
|
|
with the above
|
|||
|
|
steps, you can run
|
|||
|
|
the
|
|||
|
|
following commands
|
|||
|
|
into the terminal /
|
|||
|
|
command prompt from
|
|||
|
|
the
|
|||
|
|
root directory of
|
|||
|
|
the project to run
|
|||
|
|
the project locally
|
|||
|
|
or
|
|||
|
|
build for
|
|||
|
|
production use:
|
|||
|
|
</p>
|
|||
|
|
<p class="mt-4">
|
|||
|
|
After you finished with the above steps, you can run the following commands to run
|
|||
|
|
the project locally or build for production use:
|
|||
|
|
</p>
|
|||
|
|
<table class="table table-bordered m-0">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th style="width: 20%;">
|
|||
|
|
<i class="ti-file"></i> Command
|
|||
|
|
</th>
|
|||
|
|
<th>Description</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<code>yarn</code>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
This would install all the required dependencies in the
|
|||
|
|
<code>node_modules</code> folder.
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<code>yarn serve</code>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Runs the project locally, starts the development server and watches for
|
|||
|
|
any changes in your code. The development server is accessible at <a
|
|||
|
|
href='http://localhost:8080'>http://localhost:8080</a>.
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>
|
|||
|
|
<code>yarn build</code>
|
|||
|
|
</td>
|
|||
|
|
<td>
|
|||
|
|
Generates a <code>/dist</code> directory with all the production files.
|
|||
|
|
</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<p class="mt-3">
|
|||
|
|
Widget loader is set on port 8080, if you are working on another port add your port in <code>.env</code> file VUE_APP_URL variable.
|
|||
|
|
</p>
|
|||
|
|
<div id="i18n" class="mb-5">
|
|||
|
|
<h5 class="mt-4">i18n
|
|||
|
|
Language translation
|
|||
|
|
settings</h5>
|
|||
|
|
<p>
|
|||
|
|
<b>How to add new
|
|||
|
|
language?</b>
|
|||
|
|
Let add French
|
|||
|
|
language in the
|
|||
|
|
existing language.
|
|||
|
|
</p>
|
|||
|
|
<ol>
|
|||
|
|
<li> Create <code>de.json</code> file in <code>src/locales</code> folder.
|
|||
|
|
</li>
|
|||
|
|
<li> <p class="mb-2">Add new language property in <code>/src/components/nav-bar.vue</code> file.</p>
|
|||
|
|
<pre class="bg-dark text-white p-3">
|
|||
|
|
languages = [{
|
|||
|
|
flag: require("~/assets/images/flags/germany.jpg"),
|
|||
|
|
language: "de",
|
|||
|
|
title: "German",
|
|||
|
|
}];
|
|||
|
|
</pre>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<p class="mb-2">To change default language to german? update below code in the <code>.env</code> file.</p>
|
|||
|
|
<pre class="bg-dark text-white p-3">
|
|||
|
|
VUE_APP_I18N_LOCALE=de
|
|||
|
|
VUE_APP_I18N_FALLBACK_LOCALE=de
|
|||
|
|
</pre>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ol>
|
|||
|
|
</div>
|
|||
|
|
<div id="tips">
|
|||
|
|
<h5 class="mt-4">Tips</h5>
|
|||
|
|
<p>
|
|||
|
|
SCSS: We suggest you
|
|||
|
|
to do not change any
|
|||
|
|
scss files from the
|
|||
|
|
src/assets/scss/_custom.scss
|
|||
|
|
folders because to
|
|||
|
|
get new updates will
|
|||
|
|
might be break your
|
|||
|
|
SCSS changes if any
|
|||
|
|
you have made. We
|
|||
|
|
strongly suggest you
|
|||
|
|
to use custom.scss
|
|||
|
|
file and use that
|
|||
|
|
instead of overwrite
|
|||
|
|
any theme's custom
|
|||
|
|
scss files.
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Start right-side-nav -->
|
|||
|
|
<div class="d-none d-xl-block">
|
|||
|
|
<div class="right-side-nav">
|
|||
|
|
<ul class="nav nav-pills
|
|||
|
|
flex-column">
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#desc" class="nav-link active">Description</a>
|
|||
|
|
</li>
|
|||
|
|
<li
|
|||
|
|
class="nav-item">
|
|||
|
|
<a
|
|||
|
|
href="#auth"
|
|||
|
|
class="nav-link">Authentication</a>
|
|||
|
|
</li>
|
|||
|
|
<li
|
|||
|
|
class="nav-item">
|
|||
|
|
<a href="#prerequisites"
|
|||
|
|
class="nav-link">Prerequisites</a>
|
|||
|
|
</li>
|
|||
|
|
<li
|
|||
|
|
class="nav-item">
|
|||
|
|
<a
|
|||
|
|
href="#installation"
|
|||
|
|
class="nav-link">Installation</a>
|
|||
|
|
</li>
|
|||
|
|
<li
|
|||
|
|
class="nav-item">
|
|||
|
|
<a href="#i18n"
|
|||
|
|
class="nav-link">Mulit
|
|||
|
|
Language
|
|||
|
|
setup</a>
|
|||
|
|
</li>
|
|||
|
|
<li
|
|||
|
|
class="nav-item">
|
|||
|
|
<a href="#tips"
|
|||
|
|
class="nav-link">Tips</a>
|
|||
|
|
</li>
|
|||
|
|
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- End right-side-nav -->
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div> <!-- end padding-->
|
|||
|
|
</div> <!-- end card-body-->
|
|||
|
|
</div> <!-- end card-->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- end row -->
|
|||
|
|
|
|||
|
|
</div> <!-- container-fluid -->
|
|||
|
|
</div>
|
|||
|
|
<!-- End Page-content -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<footer class="footer">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-sm-6">
|
|||
|
|
<script>document.write(new Date().getFullYear())</script> © Themesbrand.
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm-6">
|
|||
|
|
<div class="text-sm-right d-none d-sm-block">
|
|||
|
|
Crafted with <i class="mdi mdi-heart text-danger"></i> by <a href="https://themesbrand.com/" target="_blank" class="text-muted">Themesbrand</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
</div>
|
|||
|
|
<!-- end main content-->
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<!-- END layout-wrapper -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<!-- JAVASCRIPT -->
|
|||
|
|
<script src="assets/libs/jquery/jquery.min.js"></script>
|
|||
|
|
<script src="assets/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
|
|||
|
|
<script src="assets/libs/simplebar/simplebar.min.js"></script>
|
|||
|
|
<script src="assets/libs/jquery.easing/jquery.easing.min.js"></script>
|
|||
|
|
|
|||
|
|
<script src="assets/js/app.js"></script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
</html>
|