8000 GitHub - Bulaimu/coreui-free-vue-laravel-admin-template at
[go: up one dir, main page]
Skip to content

Bulaimu/coreui-free-vue-laravel-admin-template

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

69 Commits
coreui
coreui
 
 
laravel
laravel
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 

Repository files navigation

CoreUI Free Vue Laravel Bootstrap Admin Template Tweet

License: MIT

Bootstrap Admin Template

Curious why I decided to create CoreUI? Please read this article: Jack of all trades, master of none. Why Bootstrap Admin Templates suck.

CoreUI offers 6 versions: Bootstrap, Angular, Laravel, React.js, Vue.js, and Vue.js + Laravel.

CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!

Table of Contents

Versions

CoreUI is built on top of Bootstrap 4 and supports popular frameworks.

CoreUI Pro

Admin Templates built on top of CoreUI Pro

Default Theme Legacy Theme Dark Layout
CoreUI Pro Bootstrap Admin Template CoreUI Pro Bootstrap Admin Template CoreUI Pro Bootstrap Admin Template

Installation

# clone the repo
$ git clone https://github.com/coreui/coreui-free-vue-laravel-admin-template.git my-project

# go into app's directory
$ cd my-project/laravel

# install app's dependencies
$ composer install

# install app's dependencies
$ npm install

If you choose SQLite

# create database
$ touch database/database.sqlite

Copy file ".env.example", and change its name to ".env". Then in file ".env" replace this database configuration:

  • DB_CONNECTION=mysql
  • DB_HOST=127.0.0.1
  • DB_PORT=3306
  • DB_DATABASE=laravel
  • DB_USERNAME=root
  • DB_PASSWORD=

To this:

DB_CONNECTION=sqlite
DB_DATABASE=/path_to_your_project/database/database.sqlite

If you choose PostgreSQL

  1. Install PostgreSQL

  2. Create user

$ sudo -u postgres createuser --interactive
enter name of role to add: laravel
shall the new role be a superuser (y/n) n
shall the new role be allowed to create database (y/n) n
shall the new role be allowed to create more new roles (y/n) n
  1. Set user password
$ sudo -u postgres psql
postgres= ALTER USER laravel WITH ENCRYPTED PASSWORD 'password';
postgres= \q
  1. Create database
$ sudo -u postgres createdb laravel
  1. Copy file ".env.example", and change its name to ".env". Then in file ".env" replace this database configuration:
  • DB_CONNECTION=mysql
  • DB_HOST=127.0.0.1
  • DB_PORT=3306
  • DB_DATABASE=laravel
  • DB_USERNAME=root
  • DB_PASSWORD=

To this:

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=5432
DB_DATABASE=laravel
DB_USERNAME=laravel
DB_PASSWORD=password

If you choose MySQL

  1. Install MySQL
  2. Create database (this way or another)
$ mysql -uroot -p
mysql> create database laravel;

Create a user with privileges to the laravel database (root user may not work while it requires a sudo)

  1. Update .env file Copy file ".env.example", and change its name to ".env". Then in file ".env" complete database configuration:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

Next step

# in your app directory
# generate laravel APP_KEY
$ php artisan key:generate

# generate jwt secret
$ php artisan jwt:secret

# run database migration and seed
$ php artisan migrate:refresh --seed

# go to coreui directory
$ cd ../coreui

# install app's dependencies
$ npm install

Usage

Test

# test
$ php vendor/bin/phpunit

If you need separate backend and frontend

# back to laravel directory
$ cd ../laravel

# start local server
$ php artisan serve

$ cd ../coreui

$ npm run serve

Open your browser with address: localhost:8080

If you need change backend adress go to file /coreui/src/main.js And change line:

Vue.prototype.$apiAdress = 'http://127.0.0.1:8000'

If you don't need separate backend and frontend

  1. Go to file /laravel/routes/web.php And uncomment this lines:
Route::get('/{any}', function () {
    return view('coreui.homepage');
})->where('any', '.*');
  1. Go to file /laravel/config/filesystems.php And change this line:
'root' => public_path() . '/../../coreui/public/public',

To this:

'root' => public_path('public'),
  1. Go to file /coreui/src/views/media/Media.vue And change this line:
changePort: 'localhost:8080',

To this:

changePort: 'localhost:8000',
# back to laravel directory
$ cd ../laravel

# generate mixing
$ npm run dev

# and repeat generate mixing
$ npm run dev

# start local server
$ php artisan serve

Open your browser with address: localhost:8000

When you have project open in browser

Click "Login" on sidebar menu and log in with credentials:

This user has roles: user and admin

How to add a link to the sidebar:

Instructions for CoreUI Free Vue Laravel admin template only. Pro version have separate instruction.

To add a link to the sidebar - modify seeds file:

my-project/database/seeds/MenusTableSeeder.php

In run() function - add insertLink():

$id = $this->insertLink( $rolesString, $visibleName, $href, $iconString);
  • $rolesString - a string with list of user roles this menu element will be available, ex. "guest,user,admin"
  • $visibleName - a string caption visible in sidebar
  • $href - a href, ex. /homepage or http://example.com
  • $iconString - a string containing valid CoreUI Icon name (kebab-case), ex. cil-speedometer or cil-pencil

To add a title to the sidebar - use function insertTitle():

$id = $this->insertTitle( $rolesString, $title );
  • $rolesString - a string with list of user roles this menu element will be available, ex. "guest,user,admin"
  • $title - a string caption visible in sidebar

To add a dropdown menu to the sidebar - use function beginDropdown():

$id = $this->beginDropdown( $rolesString, $visibleName, $href, $iconString);
  • $rolesString - a string with list of user roles this menu element will be available, ex. "guest,user,admin"
  • $visibleName - a string caption visible in sidebar
  • $href - a href, ex. /homepage or http://example.com
  • $iconString - a string containing valid CoreUI icon name (kebab-case). For example: cil-speedometer or cil-pencil

To end dropdown section - use function endDropdown().

To add link to dropdown call function insertLink() between function calls beginDropdown() and endDropdown(). Example:

$id = $this->beginDropdown('guest,user,admin', 'Some dropdown', 'http://example.com', 'cil-puzzle');
$id = $this->insertLink('guest,user,admin', 'Dropdown name', 'http://example.com');
$this->endDropdown();

IMPORTANT - At the end of run() function, call joinAllByTransaction() function:

$this->joinAllByTransaction();

Once done with seeds file edit, run:

$ php artisan migrate:refresh --seed
# This command also rollbacks database and migrates it again.

Features

Table of contents: