Introduction

Laravel vue element-ui Build Status license GitHub release GitHub stars

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.

TIP

The project is positioned as an enterprise solution and it's highly recommended to start from scratch. You should start project from simple layout and add components one by one depending on your system. This is to avoid redundant code as this project provides lot of features that you may not use.


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.

TIP

This project does not support low-level browsers (such as IE). If you need to, please add polyfills yourself.

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

# Generate JWT secret key
php artisan jwt:secret

# Install dependency - we recommend using Yarn instead of NPM since we get errors while using NPM
yarn install

# Build for development
yarn run dev # or yarn 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.


TIP

Suggestion: You should try laravue-core package if you want to integrate Laravue to your current Laravel projects. Laravue itself will be a good guideline for you.

Build for production

yarn 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:

Landing page

WARNING

Changing .env requires running yarn run ... again to be affected.

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.

yarn 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:

      /css/app.css   215 KiB       0  [emitted]         /js/app
        /js/app.js   2.9 MiB       0  [emitted]  [big]  /js/app
   /js/manifest.js  1.46 KiB       1  [emitted]         /js/manifest
     /js/vendor.js  4.17 MiB       2  [emitted]  [big]  /js/vendor

After compress with nginx:

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE10, IE11, Edge last 2 versions last 2 versions last 2 versions