Introduction

Endless Vue Admin Theme is pure Vue theme, Yes! you read correct, it's No Jquery Vue admin theme including all feature and functionality with ease of integration for your project.Endless theme document will help you to understand Vue from scratch to making perfect real time dream application.

Follow the documentation carefully for solving your issues in minutes, Apart from that if you don't find solution when you following the docs you can raise a support ticket for your issue from pixelstrap.freshdesk.com

Yes! again No Jquery dependency.

Getting started

Welcome to Vue! Vue helps you build modern applications for the web, mobile, or desktop.

For getting started an Vue application you needs two things as Prerequisites.

Prerequisites

Before you begin, make sure your development environment includes Node and an npm package manager.

Node.js

Download latest version of node.js i.e. node 16 from nodejs.org.

Npm package manager

Vue CLI, and Vue apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager. This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run npm -v in a terminal/console window.

For better understanding Vue we suggest you to once go through official documentation of Vue from Vuejs.org

Vue setup

Installing Vue CLI

You use the Vue CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks as it is a progressive framework for building user interfaces.

Install the Vue CLI globally.

To install the CLI using npm, open a terminal/console window and enter the following command:

npm install -g @vue/cli 
                      

Create Initial application

vue create my-app
                      

Serve Application

cd my-app
                      

 npm run serve
                       
                      

Build Application

 npm run build
                      

 
  Options -MultiViews
  RewriteEngine On
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [QSA,L]
                        
                        

Making Sub-folder on Server

 
  module.exports = {
    baseUrl: "/endless/",
    publicPath: "/endless/"
  };
                        
                        

 
    base: '/endless/'
                          
                          

 npm run build
                        

 
  Options -MultiViews
  RewriteEngine On
  RewriteBase /endless/
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteRule ^ index.html [QSA,L]
                          
                          

Endless setup

If you have already download and install node.js and Vue CLI then ignore prerequisites accordingly.

Prerequisites

Node.js

Download latest version of node.js from nodejs.org.

Vue CLI

Install Vue CLI Using:

npm install -g @vue/cli 
                        

Setup an Endless theme by

• 1) Download and extract an endless themes from themeforest
• 2) Extract it and then go in to theme folder.

cd  theme
                      

• 3) Import all dependency by installing npm command

npm install
                      

• 4) Now you are in stage to successfully run endless using below command:

npm run serve
                      

Theme Customize

Layouts

We have provided a bunch of page layouts and menu layouts that can be implemented with just a options change to body!

For creating your dream layout open customizer by click on setting icon

You can change your theme by clicking particular setting

Then you just need to click on configuration button

Configuration popup will be open then just click on copy json button which will copy configuration of theme which you want

Now go to our theme >> src >> data >> layout.json and then just replace complete layout.json with your new configuration and re-run theme using npm run serve.

Please refer the below table for corresponding classes. it is just for your inforamation you do not need to bother about this it's dynamically take particular classes according to your needs.

Theme options

We have some inbuilt themes for sidebar that can be switched with just a class change

HTML Structured

                          <div class="page-main-header">

  <div class="main-header-right row">

    <div class="main-header-left d-lg-none">

      ........

    </div>

  <div class="nav-right col p-0">

    ........

  </div>

 </div>

</div>

                              <div class="page-body">

  <div class="container-fluid">

    ........

  </div>

<!-- Container-fluid starts-->

<div class="container-fluid">

    .......

</div>

  <!-- Container-fluid Ends-->

</div>

                              <footer class="footer">


  <div class="container-fluid">

    .............

  </div>


</footer>

                            

                                <button class="btn btn-primary" type="button" data-bs-toggle="tooltip"
                                  title="btn btn-primary">Primary Button</button>

<button class="btn btn-secondary" type="button" data-bs-toggle="tooltip"
title="btn btn-secondary">Secondary Button</button>

<button class="btn btn-success" type="button" data-bs-toggle="tooltip"
title="btn btn-success">Success Button</button>

<button class="btn btn-info" type="button" data-bs-toggle="tooltip" title="btn btn-info">Info
Button</button>

<button class="btn btn-warning" type="button" data-bs-toggle="tooltip"
title="btn btn-warning">Warning Button</button>

<button class="btn btn-danger" type="button" data-bs-toggle="tooltip"
title="btn btn-danger">Danger Button</button>

<button class="btn btn-light" type="button" data-bs-toggle="tooltip" title="btn btn-light">Light Button</button>


                          

                                <span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-success">Success</span>

<span class="badge badge-info">Info</span>

<span class="badge badge-warning">Warning</span>

<span class="badge badge-danger">Danger</span>

<span class="badge badge-light">Light</span>

<span class="badge badge-dark tag-pills-sm-mb">Dark</span>
                          

                                <div class="progress">

  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
</div>

    <div class="progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
</div>

      <div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">
</div>

    <div class="progress">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
</div>

  <div class="progress">

<div class="progress-bar bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
</div>
                            

                                <div class="alert alert-primary dark" role="alert">This is a info alert—check it out!</div>

  <div class="alert alert-secondary dark" role="alert">This is a light alert—check it out!</div>

    <div class="alert alert-success dark" role="alert">This is a success alert—check it out!</div>

      <div class="alert alert-info dark" role="alert">This is a danger alert—check it out!</div>

      <div class="alert alert-warning dark" role="alert">This is a secondary alert—check it out!</div>

    <div class="alert alert-danger dark" role="alert">This is a warning alert—check it out!</div>

  <div class="alert alert-light dark" role="alert">This is a dark alert—check it out!</div>

<div class="alert alert-dark dark" role="alert">This is a dark alert—check it out!</div>
                            

                                  <div class="shadow-lg p-25 shadow-showcase text-center">

    <h6 class="m-0 f-18">Larger shadow</h5>

  </div>

    <h6 class="sub-title mb-5 mt-5">Regular shadow</h6>

  <div class="shadow shadow-showcase p-25 text-center">

    <h6 class="m-0 f-18">Regular shadow</h5>

  </div>

    <h6 class="sub-title mb-5 mt-5">small shadow</h6>

  <div class="shadow-sm shadow-showcase p-25 text-center mb-5">

    <h6 class="m-0 f-18">Small shadow</h5>

  </div>