Responsive Bootstrap 3 Admin Template based on AdminLTE with vue.js

Overview

CoPilot is a fully responsive admin template that is forked from AdminLTE. The difference here is that this repo is tailored to use with Vue.js. The UI is based on the Bootstrap 3 framework. Highly customizable and easy to use. Fits many screen resolutions from small mobile devices to large desktops.

✈️ ️ Take it for a spin.

Build Status Build status

"CoPilot Screenshot"

In an attempt to keep the project clean I have not included every plugin/feature that AdminLTE offers. You simply need to add the plugin in the /static/js/plugin folder to include them or use npm. I've included the popular ones.

The structure of the app is scaffolded by vue-cli. Which is a simple CLI tool that setups our environment. CoPilot uses the webpack package. So we get a full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.

We leverage all the goodies that vue.js offers. Vue-Router for routing. Vue-Resource for AJAX calls. Vuex for state management. This project is using VueJS 2.0! Earlier versions can be found under the vue 1.0 branch.

I also recommend that you install vue-devtools for Chrome so that you can easily inspect that state of vue. vue-devtools

The data that is being pulled uses faker.js to make it dynamic. This is for demo purposes. Look for demo.* for information that is generated dynamically.

Installation

Installing CoPilot is easy.

Download:

Download from Github

Using The Command Line:

git clone https://github.com/misterGF/CoPilot.git

Build Setup

# install dependencies
sudo npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

Documentation

Depending on the component you are working on you should have the following links handy.

Information and tips about CoPilot can be found in the wiki.

Browser Support

  • IE 9+
  • Firefox (latest)
  • Chrome (latest)
  • Safari (latest)
  • Opera (latest)

Contribution

Contribution are always welcome and recommended! Here is how:

  • Fork the repository (here is the guide).
  • Clone to your machine git clone https://github.com/YOUR_USERNAME/CoPilot.git
  • Make your changes
  • Create a pull request

TODOS

The purpose of this project is to provide a full example of how to leverage Vue. If you find anything that can be Vue-ified please send me a PR.

License

CoPilot is an open source project by Gil Ferreira that is licensed under MIT.

Image Credits

Pixeden

Graphicsfuel

Pickaface

Unsplash

Uifaces

Comments
  • Current master branch fails to run

    Current master branch fails to run

    Everything but the "build" run option fails. running the most current node.js and npm

    17 error Windows_NT 6.3.9600 18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev" 19 error node v6.10.2 20 error npm v3.10.10 21 error code ELIFECYCLE 22 error [email protected] dev: node build/dev-server.js 22 error Exit status 1 23 error Failed at the [email protected] dev script 'node build/dev-server.js'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the copilot package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error node build/dev-server.js 23 error You can get information on how to open an issue for this project with: 23 error npm bugs copilot 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls copilot 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]

    opened by byronferguson 11
  • Cannot run project

    Cannot run project

    I run the commands: git clone https://github.com/misterGF/CoPilot.git cd CoPilot npm install

    Then a message appears:

    added 1271 packages from 1602 contributors and audited 8206 packages in 89.456s found 318 vulnerabilities (269 low, 29 moderate, 16 high, 4 critical) run npm audit fix to fix them, or npm audit for details

    A just ignore the message and try to run:

    npm run dev

    Then a message appears:

    Module build failed: Error: Failed to find '/static/js/plugins/datatables/dataTables.bootstrap.css'

    But the file exists. So I try change permissions for a more permissive: cd .. chmod 777 -R CoPilot

    But not working... So I try:

    npm audit fix

    But still not working... Any ideas ?

    opened by InsiderTI 9
  • help me

    help me

    Error: EACCES: permission denied, open 'geckodriver.tar.gz' Emitted 'error' event at: at WriteStream.onerror (/Users/yoga/frontend/CoPilot-master/node_modules/readable-stream/lib/_stream_readable.js:633:52) at WriteStream.emit (events.js:182:13) at fs.open (fs.js:2233:12) at FSReqWrap.oncomplete (fs.js:152:20) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] postinstall: node index.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] postinstall script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in: npm ERR! /var/root/.npm/_logs/2018-05-28T18_22_23_668Z-debug.log

    opened by yogaaaaa 8
  • Uncaught SyntaxError: Unexpected token import

    Uncaught SyntaxError: Unexpected token import

    For SOME reason, this project works on one PC but NOT on another. I have same versions of OS, node, npm on both.

    Any idea why I get Uncaught SyntaxError: Unexpected token import when I launch the page? Thank You :)

    Uncaught SyntaxError: Unexpected token import
        at Object.<anonymous> (app.js:1710)
        at __webpack_require__ (app.js:556)
        at fn (app.js:87)
        at eval (eval at <anonymous> (app.js:1482), <anonymous>:8:19)
        at Object.<anonymous> (app.js:1482)
        at __webpack_require__ (app.js:556)
        at fn (app.js:87)
        at eval (eval at <anonymous> (app.js:1386), <anonymous>:7:13)
        at Object.<anonymous> (app.js:1386)
        at __webpack_require__ (app.js:556)
    
    opened by LarryEitel 8
  • Tables with many columns not displayed correctly in iPhone.

    Tables with many columns not displayed correctly in iPhone.

    I found that tables in Copilot with rows more than like 5+ are not displayed correctly on my iPhone -- some of the rows on the right are hidden, also I am not able to scroll the hidden rows into the viewport.

    Please check the image below. img_3075

    opened by hifall 7
  • Table data not formatted,search bar, pagination gone.Using Axios to fetch data

    Table data not formatted,search bar, pagination gone.Using Axios to fetch data

    Hi, After installing CoPilet i am trying to customise it. As of now just changed table data and replaced it with my own data fetched with Axios. Table data is not formatted correctly,search bar and pagination also gone. Any suggestions will be highly useful. Also find attached screen shot

                       <div v-if="loading">Please wait while data loading..</div>
                          <div v-else>
                        <tbody>                      
                        <tr class="even" role="row"v-for="policy in tempData">
                        <td class="sorting_1">{{policy.name}}</td>
                        <td>{{policy.amount}}</td>
                        <td>{{policy.baseCost}}</td>
                        <td>{{policy.cancelRefund}}</td>
                        <td>{{policy.minDays}}</td>
                        </tr>                      
                        </tbody>
                          </div>
    

    copilettable

    opened by vishwasrao 6
  • Selecting an item from the navbar and then hitting F5/refresh gives page not found

    Selecting an item from the navbar and then hitting F5/refresh gives page not found

    When I select an item from the navbar and then hit F5, I got page not found.

    I suggest to either 1. use hash-tag urls (#dashboard instead of /dashboard), 2. put a notification inside the readme that a backend has to be written that mimics the urls/entry points.

    opened by gabn88 6
  • General improvements

    General improvements

    opened by euvl 6
  • when I run the demo, it throw the Exception..

    when I run the demo, it throw the Exception..

    TypeError: (0 , _jquery2.default)(...).DataTable is not a function at VueComponent.eval (eval at (app.js:1734), :21:42) at Array.eval (eval at (app.js:612), :511:20) at nextTickHandler (eval at (app.js:612), :460:16)

    opened by ice-2022 5
  • dataTables error on startup

    dataTables error on startup

    Also got this when trying to run in DEV mode...

    Screen is black and no components appear

    Uncaught TypeError: Cannot read property 'defaults' of undefined at dataTables.bootstrap.js:47 at Object. (dataTables.bootstrap.js:17) at dataTables.bootstrap.js:18 at Object. (dataTables.bootstrap.js:18) at r (bootstrap a4b0d69444e1d649ceb3:54) at Object.175 (app.9bd52aad5b9238b43a1c.js:3032) at r (bootstrap a4b0d69444e1d649ceb3:54) at Object.1227 (Tables.vue?785d:7) at r (bootstrap a4b0d69444e1d649ceb3:54) at Object.135 (app.9bd52aad5b9238b43a1c.js:2148)

    opened by rflaperuta 4
  • "npm run dev" failed in Windows 7

    when i run “npm install” ,two packages lost . " +-- UNMET PEER DEPENDENCY [email protected] +-- UNMET PEER DEPENDENCY [email protected] "

    "

    copilot@0.5.0 dev D:\phpStudy\WWW\back\CoPilot node build/dev-server.js

    Listening at http://localhost:8080

    webpack built ac839404a9d6118544b5 in 22660ms Hash: ac839404a9d6118544b5 Version: webpack 1.14.0 Time: 22660ms Asset Size Chunks Chunk Names app.js 10.2 MB 0 [emitted] app index.html 2.15 kB [emitted] Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 1.47 MB 0 webpack: Compiled successfully. " when I connect to "http://localhost:8080/" ,it's wrong " 502 Server dropped connection The following error occurred while trying to access http://localhost:8080/: 502 Server dropped connection "

    npm-debug.log 0 info it worked if it ends with ok 1 verbose cli [ 'C:\Program Files\nodejs\node.exe', 1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js', 1 verbose cli 'run', 1 verbose cli 'dev' ] 2 info using [email protected] 3 info using [email protected] 4 verbose run-script [ 'predev', 'dev', 'postdev' ] 5 info lifecycle [email protected]~predev: [email protected] 6 silly lifecycle [email protected]~predev: no script for predev, continuing 7 info lifecycle [email protected]~dev: [email protected] 8 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true 10 verbose lifecycle [email protected]~dev: CWD: D:\phpStudy\WWW\back\CoPilot 11 silly lifecycle [email protected]~dev: Args: [ '/d /s /c', 'node build/dev-server.js' ] 12 silly lifecycle [email protected]~dev: Returned: code: 3221225786 signal: null 13 info lifecycle [email protected]~dev: Failed to exec dev script 14 verbose stack Error: [email protected] dev: node build/dev-server.js 14 verbose stack Exit status 3221225786 14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:255:16) 14 verbose stack at emitTwo (events.js:106:13) 14 verbose stack at EventEmitter.emit (events.js:191:7) 14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14) 14 verbose stack at emitTwo (events.js:106:13) 14 verbose stack at ChildProcess.emit (events.js:191:7) 14 verbose stack at maybeClose (internal/child_process.js:877:16) 14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5) 15 verbose pkgid [email protected] 16 verbose cwd D:\phpStudy\WWW\back\CoPilot 17 error Windows_NT 6.1.7601 18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "dev" 19 error node v6.9.4 20 error npm v3.10.10 21 error code ELIFECYCLE 22 error [email protected] dev: node build/dev-server.js 22 error Exit status 3221225786 23 error Failed at the [email protected] dev script 'node build/dev-server.js'. 23 error Make sure you have the latest version of node.js and npm installed. 23 error If you do, this is most likely a problem with the copilot package, 23 error not with npm itself. 23 error Tell the author that this fails on your system: 23 error node build/dev-server.js 23 error You can get information on how to open an issue for this project with: 23 error npm bugs copilot 23 error Or if that isn't available, you can get their info via: 23 error npm owner ls copilot 23 error There is likely additional logging output above. 24 verbose exit [ 1, true ]

    opened by jinchaojian 4
  • Taiwan is part of China, you guys should learn history hardly!👎

    Taiwan is part of China, you guys should learn history hardly!👎

    READ A BIT MORE, please! 🖕🖕🏻🖕🏼🖕🏾🖕🏿🖕🏻

    Please DO REMEMBER, If you are against China's territory, you are against 1.4 billion people. This is not a wise idea.

    ✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖ ✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖ ✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖ 0TxV2lHNU0

    W0XuDFMc9y ✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖ ✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖ ✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖

    opened by caofanCPU 1
  • jQuery is not defined

    jQuery is not defined

    Hi, I want to run the project on the tomcat Server, then I npm run build the project. When the project finished build, I copy all the file in the 'dist' to tomcat 's webapps. But when I open the website, it only showed the background color and run bugs. Uncaught ReferenceError: jQuery is not defined. 12345 Can you help me to solve the problem? Thanks!

    opened by willy-jaygur 0
Owner
Gil Ferreira
Turning coffee into code.
Gil Ferreira
CoreUI Vue is free Vue admin template based on Bootstrap 4

CoreUI Free Vue Bootstrap Admin Template Description Why we decided to create CoreUI? Please read this article: Jack of all trades, master of none. Wh

CoreUI 3.1k Jan 3, 2023
:bar_chart: adminLTE to vuejs v2.x converting project

vue2-admin-lte (Demo) AdminLTE of Admin control panel template Based on Vuejs 2.x Front-end Framework. Documentation https://devjin0617.gitbooks.io/vu

developerjin 1.1k Nov 11, 2022
AdminLTE + VueJS 2

AdminLTE + VueJS 2 AdminLTE + VueJS 2 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build f

Seto Kuslaksono 89 Nov 8, 2022
CoreUI is free bootstrap admin template

CoreUI Free Bootstrap Admin Template Please help us on Product Hunt. Thanks in advance! Curious why I decided to create CoreUI? Please read this artic

CoreUI 11.5k Dec 30, 2022
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js

Vuemmerce - Ecommerce Template Responsive ecommerce template built with Vue.js and Nuxt.js Installing # clone repository git clone https://github.com/

Ivan Lori 379 Dec 29, 2022
Responsive ecommerce template built with Vue.js and Nuxt.js

Vue-ecommerce - Ecommerce Template Responsive ecommerce template built with Vue.js and Nuxt.js Installing install dependencies yarn install serve with

Abhishek Kumar 1 Dec 30, 2021
Vue-quasar-template - Initial template of an app using vuejs and quasar-ui plugin

vue-template Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Li

Joseph 0 Jan 1, 2022
A responsive and configurable Marmoset Viewer component for Vue.

A responsive and configurable Marmoset Viewer component for Vue.

Jan Müller 6 Dec 12, 2022
A mobile first, handwritten, responsive web app for music fans.

neteast-music-vue Deployed link: https://neteast.netlify.com/ It is a mobile first responsive web app for listening music from Neteast cloud platform

Tato 62 Dec 2, 2022
A responsive movie preview web app

Movie Paradise 简体中文 This project is for learning and communication purposes only, not for commercial use. The data comes from third-party websites. In

wenjie 23 Dec 31, 2022
PWA Responsive CRUD Application - Register, login in your existing account or sign in with Google

PWA Responsive CRUD Application - Register, login in your existing account or sign in with Google. After you login you can: Add new Events, Edit Events, List Events and Delete Events from the front-end also from Firebase. You can check the demo on the link below!

Robert Gjorgjioski 0 Jan 21, 2022
This app allows you to consult relevant information from Github users through their username, it is fully responsive and has light and dark themes that adapt according to your preferences.

This app allows you to consult relevant information from Github users through their username, it is fully responsive and has light and dark themes that adapt according to your preferences.

Javier Salcedo 4 Nov 18, 2022
A simple responsive website that displays all of the countries and their details.

Countreez This is a solution to the REST Countries API with color theme switcher challenge on Frontend Mentor. Frontend Mentor challenges help you imp

Abdullah Adel 11 Jun 13, 2022
Lightweight to-do program, simple and fresh ui style, responsive page layout, easy to adapt to various clients.

Lightweight to-do program, simple and fresh ui style, responsive page layout, easy to adapt to various clients, making to-do records easy and pleasant.

不绿 3 Oct 21, 2022
✔️ A simple Todo PWA built with Vue 3 + Vuex + Bootstrap 5.

vue-todo-pwa This project is a simple Todo PWA (Progressive Web App) based on the Vuex TodoMVC example. Perfect to learn the basics about Vue 3, Vuex

David 14 Nov 10, 2022
VUE Countries With Bootstrap

VUE Countries With Bootstrap CANLI UYGULAMA (http://manolya.online/countries/) Ülkeleri listeler, şehirlere göre spesifik arama gerçekleştirebilir. Ar

Alper Çöğürcü 0 Dec 8, 2021
Example of SPA made with Vue 3 and Bootstrap 5 to create a portfolio from public repos

Lista de Repos en Github Este ejemplo utiliza la API de Github para obtener la i

adrian.larage 0 Dec 22, 2021
Vuetube - a simple project to learn and practice Vue js, Vuex state management, Bootstrap 4, and Firebase

Vuetube is a simple project to learn and practice Vue js, Vuex state management, Bootstrap 4, and Firebase. In this app you can save videos in categories to find them quickly later.

Shafeeq Barram 2 Mar 28, 2022
App that performs CRUD operations in which users can track projects, tasks under projects, total duration of each project and task. Project is being build with Nuxt js 3, Axios, Pinia, Bootstrap 5 and Vue composition API

Nuxt 3 Minimal Starter Look at the nuxt 3 documentation to learn more. Setup Make sure to install the dependencies: # yarn yarn install # npm npm ins

Sergio Terrero 2 Nov 1, 2022