Laravel 5.5 & Vue.js 2.4 + Vuex Sample Project

Laravel & Vue Sample Project is a tutorial Single Page Application (SPA) for Laravel 5.5 and Vue.js 2.4 Frontend

Installation

composer install # Install php dependencies

# Prepare enviroment variables
cp .env.example .env # Copy configuration file
php artisan key:generate # Generate unique key

# Prepare database
touch database/database.sqlite # Create sqlite database
php artisan migrate --seed # Create DB Schema and seed sample data
php artisan passport:install # Install Passport

# Compile assets
yarn # Install Javascript dependencies
yarn prod # Compile assets

# Start server
php artisan serve # Start server

Open http://localhost:8000 to view site

If you don't have installed yarn, run npm install -g yarn

Main features

• Fully separate Backend and Frontend
• Authentication based on Laravel Passport
• List pages with filters and CRUD editing
• Backend validation
• Admin panel
• Simple widgets
• Simple reports
• Full Phpunit test coverage
• Sample E2E tests using Nightwatch and Cypress

Includes

• Laravel Passport API Authentication
• API Docs Gerator Laravel API Documentation Generator
• Laravel DebugBar Debug bar for Laravel
• Vue.js The Progressive JavaScript Framework
• Vuex State management pattern + library for Vue.js
• Vue-Router Router library for Vue.js

Other Features

• Front page
• Authentication (registration, login, logout, throttle)
• Users roles: administrator (all access), manager (manage records)
• User dashborad with widgets and charts
• Entries list with filter by date (list, show, edit, delete, create)
• Report page with chart
• User profile page
• Admin dashboard with widgets
• Users admin (list, show, edit, delete, create)
• Entries admin (list, show, edit, delete, create)
• Global loader overlay for all requests
• Eslint code standard check
• Lodash-es to allow tree shaking for bundle size optimization

Development

To run convenient development server with hot reloading:

php artisan serve # Will serve backend on localhost:8000
yarn hot # Will serve frontend on loaclhost:8080 and proxy api requests to localhost:8000

And open http://localhost:8080

Alternatively you can use watch method:

yarn watch

And open http://localhost:8000

To compile assets for production run:

yarn prod

# Or to display bundle analyzer run:
yarn production -- --env.analyzer true

Tests

To run all Phpunit tests:

./vendor/bin/phpunit 

To run Cypress E2E tests:

php artisan serve
yarn test
# Or you can open GUI with
yarn test-gui

To run Nightwatch E2E tests:

php artisan serve
yarn test-nw

Credentials

For testing application the database is seeded with sample users:

• Administrator: email = [email protected], password = 123456
• Manager: email = [email protected], password = 123456
• User: email = [email protected], password = 123456

TODO

• Replace Vue Resource with Axios
• Add more E2E tests