361 lines
18 KiB
HTML
361 lines
18 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<title>Getting Started | 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="d-xl-flex">
|
|||
|
|
|
|||
|
|
<div class="w-100">
|
|||
|
|
<div class="p-lg-1">
|
|||
|
|
|
|||
|
|
<div id="intro" class="mb-5">
|
|||
|
|
<h4 class="mt-0 mb-4">Introduction Vuejs</h4>
|
|||
|
|
<p>
|
|||
|
|
Skote is a fully featured premium admin dashboard template in <strong>VueJs</strong> with <strong>firebase/fake-backend </strong> plus <strong>Multi Language support</strong> and 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 the vuejs its pure <strong>VueJs</strong> admin theme with reusable components.
|
|||
|
|
<br>
|
|||
|
|
Now its available in <strong>Laravel + vuejs</strong> version too. You can quick start with <strong>starterkit</strong> of both the versions.
|
|||
|
|
</p><p>
|
|||
|
|
Skote is an admin dashboard template that is a beautifully crafted, clean & minimal designed admin template with <strong>Dark, Light Layouts</strong> with <strong>RTL</strong> options. You can build any type of web application like Saas based interface, eCommerce, 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 <strong>VueJs without jQuery</strong> then you are at the right place to start your project using Skote - Vuejs Responsive Bootstrap v5.1.3 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 contact us <a href="https://themeforest.net/item/skote-vuejs-admin-dashboard-template/25444550/support" target="_blank">https://themeforest.net/item/skote-vuejs-admin-dashboard-template/25444550/support</a>.
|
|||
|
|
</p>
|
|||
|
|
<p>Its very easy to change any layout quickly and we have added Starterkit to quick start with your new as well as existing projects.</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="p-lg-1">
|
|||
|
|
<h5 class="mt-0 mb-2">Introduction Laravel + Vuejs</h5>
|
|||
|
|
<p>We have added Laravel + vuejs version for you so you can quick start with Laravel + vuejs version with Laravel 8.</p>
|
|||
|
|
<p>We have used jQuery in the Laravel + vuejs version. We have created few reusable components.</p>
|
|||
|
|
<p>
|
|||
|
|
If you have any questions that are beyond the scope of this documentation, please feel free to contact us <a href="https://themeforest.net/item/skote-vuejs-admin-dashboard-template/25444550/support" target="_blank">https://themeforest.net/item/skote-vuejs-admin-dashboard-template/25444550/support</a>.
|
|||
|
|
</p>
|
|||
|
|
</div> <!-- end padding-->
|
|||
|
|
|
|||
|
|
<div id="structure"
|
|||
|
|
class="mb-5">
|
|||
|
|
<h5 class="mt-0 mb-2">📁
|
|||
|
|
Folder & Files
|
|||
|
|
Structure</h5>
|
|||
|
|
|
|||
|
|
<div class="row">
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<p class="text-muted mb-4">
|
|||
|
|
<strong>Vuejs</strong>
|
|||
|
|
</p>
|
|||
|
|
<pre class="mb-0">
|
|||
|
|
├── public
|
|||
|
|
├── src
|
|||
|
|
├── assets
|
|||
|
|
├── components
|
|||
|
|
├── design
|
|||
|
|
├── helpers
|
|||
|
|
├── locales
|
|||
|
|
├── router
|
|||
|
|
├── state
|
|||
|
|
├── app.config.json
|
|||
|
|
├── App.vue
|
|||
|
|
├── authUtils.js
|
|||
|
|
├── i18n.js
|
|||
|
|
└── main.js
|
|||
|
|
├── babel.config.js
|
|||
|
|
├── package.json
|
|||
|
|
├── README.md
|
|||
|
|
├── vue.config.js
|
|||
|
|
├── yarn.lock
|
|||
|
|
├── .env
|
|||
|
|
└── .env.production
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-md-6">
|
|||
|
|
<p class="text-muted mb-4">
|
|||
|
|
<strong>Laravel + Vuejs</strong>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<pre class="mb-0">
|
|||
|
|
├── app
|
|||
|
|
├── bootstrap
|
|||
|
|
├── config
|
|||
|
|
├── database
|
|||
|
|
├── public
|
|||
|
|
├── resources
|
|||
|
|
├── css
|
|||
|
|
├── js
|
|||
|
|
├── components
|
|||
|
|
├── layouts
|
|||
|
|
├── locales
|
|||
|
|
├── mixins
|
|||
|
|
├── views
|
|||
|
|
├── app.js
|
|||
|
|
├── i18n.js
|
|||
|
|
└── bootstrap.js
|
|||
|
|
├── lang
|
|||
|
|
├── sass
|
|||
|
|
└── views
|
|||
|
|
├── auth
|
|||
|
|
├── layouts
|
|||
|
|
└── home.blade.php
|
|||
|
|
├── routes
|
|||
|
|
├── storage
|
|||
|
|
├── .env
|
|||
|
|
├── composer.json
|
|||
|
|
├── composer.lock
|
|||
|
|
├── package-lock.json
|
|||
|
|
├── package.json
|
|||
|
|
├── server.php
|
|||
|
|
└── webpack.mix.js
|
|||
|
|
</pre>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div> <!-- end padding-->
|
|||
|
|
</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="#intro"
|
|||
|
|
class="nav-link">Introduction</a>
|
|||
|
|
</li>
|
|||
|
|
<li class="nav-item">
|
|||
|
|
<a href="#structure"
|
|||
|
|
class="nav-link">Folder
|
|||
|
|
& Files
|
|||
|
|
Structure</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</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>
|