# Introduction

Laravue is a beautiful dashboard for Laravel inspired by vue-element-admin but beyond that. With the powerful Laravel framework as backend, Laravue appears to be a full-stack solution for an enterprise administrative application.

# Features

- Login / Logout

- ACL - Access Control List
  - Users management
  - Roles and permissions management
  - Directives for permission and role
  
- Global Features
  - I18n
  - Dynamic sidebar with ACL integration (supports multi-level routing)
  - Dynamic breadcrumb
  - Historical bar using Tags-view with right-click supported
  - Svg Sprite
  - Responsive Sidebar

- Editor
  - Rich Text Editor
  - Markdown Editor
  - JSON Editor

- Excel
  - Import/Export Excel
  - Export zip
  - Visualization Excel

- Table
  - Dynamic Table
  - Drag And Drop Table
  - Tree Table
  - Inline Edit Table

- Error Page
  - 401
  - 404

- Components
  - Avatar Upload
  - Back To Top
  - SplitPane
  - Dropzone
  - Sticky
  - BackToTop button
  - CountTo
  - Kanban board
  - Draggable list
  - Draggable popup dialog
  - And more... (https://laravue.dev/#/dashboard)

- Advanced Example
- Dashboard
- Guide Page
- ECharts
- Clipboard
- Layout elements (Form, Tab, Icons...)

# Preparation

Your machine needs to be ready for the latest Laravel and Node.js. Git and composer are required too.

Besides, the project is based on ES2015+, vue, vuex, vue-router, axios and element-ui. Understanding and learning this knowledge in advance will greatly help the use of this project.

# Project Structure

This project has built with following structure.

├── app                        // Laravel app folder
├── boostrap                   // Laravel boostrap folder
├── database                   // Laravel database folder
├── public                     // Laravel public folder
│   ├── fonts
│   │   └── css                
│   │       └── vendor         // Vendor fonts (element-ui...)
│   └── static                 // Configuration file for Laravue project
│       └── Tinymce            // rich text editor
├── resources                  // Laravel resources
│   ├── js                     // Main laravue source code
│   │   ├── api                // api service
│   │   ├── assets             // module assets like fonts,images (processed by webpack)
│   │   ├── components         // global components
│   │   ├── directive          // global directive
│   │   ├── filters            // global filter
│   │   ├── icons              // svg icons
│   │   ├── lang               // i18nlanguage
│   │   ├── router             // router
│   │   ├── store              // store
│   │   ├── styles             // global css
│   │   ├── utils              // global utils
│   │   ├── vendor             // vendor libraries (excels...)
│   │   ├── views              // views
│   │   ├── App.vue            // main app component
│   │   ├── app.js             // app entry file
│   │   └── permission.js      // permission authentication
│   └── views                  // Laravel blade templates
│       └── laravue.blade.php  // Main view for Laravue application
├── tests                      // Laravue tests
├── .babelrc                   // babel config
├── .eslintrc.js               // eslint config
├── .gitignore                 // sensible defaults for gitignore
└── package.json               // package.json

# Getting Started

# Clone the project with composer
composer create-project tuandm/laravue
cd laravue

# Migration and DB seeder (after changing your DB settings in .env)
php artisan migrate --seed

# Install dependency
npm install

# Build for development
npm run dev # or npm run watch

# Start local development server
php artisan serve

Now you can open Laravel at http://localhost:8000. After login with provided email/password, you should be able to see the Laravue dashboard

Login page:

Laravue has already setup for standard components, state management, i18n, global router, linter,.... You can continue exploring other documents for more details on those topics.

# Build for production

npm run production

# Change the path

Laravue can be easily moved to subfolder like /admin or /administrator by changing LARAVUE_PATH in .env file (ex: LARAVUE_PATH=admin). If it's empty, dashboard will be shown as the root folder, else the Laravel default landing page will show instead and it will have a link to go to Laravue dashboard:

# Analyze the build file size

If your build file is large, you can optimize your code by building and analyzing the size distribution of dependent modules using the webpack-bundle-analyzer.

npm run report

After running you can see the specific size distribution at http://127.0.0.1:8888 (it will automatically open).

With current demo, the minified sizes are:

       /js/app.js   1.81 MiB       0  [emitted]  [big]  /js/app
   /js/manifest.js  3.02 KiB       1  [emitted]         /js/manifest
     /js/vendor.js  4.43 MiB       2  [emitted]  [big]  /js/vendor

After compress with nginx:

# Docker

docker-compose up -d

Run database migration and seed within Docker container

# Get laravel docker container ID from containers list
docker ps

docker exec -it <container ID> php artisan migrate --seed 
# Where <container ID> is the "laravel" container name, ex: docker_laravel_1

npm commands are also support inside docker container:

docker exec -it <container ID> npm run watch 
# Where <container ID> is the "laravel" container name, ex: docker_laravel_1
...

Laravue can be accessed from http://localhost:8000. Please make sure that port is available or you have to change it on https://github.com/tuandm/laravue/blob/master/docker-compose.yml

# Contribution

The repository of documentation is laravue-doc based on vuepress development.

There will be many errors related to spelling or translation from original project. It is welcome to point out by issue or PR. My English is not too good.

This project is still on development to provide more and more awesome features, integrate with high-quality Laravel packages and apply the best practices of development to build an enterprise solution for back office. We are looking forward to your contribution and feedback.

# Browsers Support

Modern browsers and Internet Explorer 10+.

IE / Edge	Firefox	Chrome	Safari
IE10, IE11, Edge	last 2 versions	last 2 versions	last 2 versions