Vue + Laravel typical cases

What is it?

Here you can see how to create single page application based on Vue and Laravel with most common features.

Frontend

Cases:

• Registration/login
• Pagination
• Navigation
• Flash messages
• Simple CRUD (example for articles)
• Laravel validation (backend validation)
• Preloader for async actions

What was used:

• ES6 (including stage-3)
• Bootstrap
• Vue
• Vuex (common FLUX implementation for Vue)
• Vue Router
• Axios
• Laravel Mix (API for Webpack)

Backend

Cases:

• Auth controllers based on default auth controllers, but for the JWT (JSON Web Tokens)
• Simple typical Laravel migrations, seeds, models, controllers, routes, tests, middlewares, requests etc

What was used:

• Laravel 5.4
• Package "tymon/jwt-auth" - laravel JWT implementation
• Packages "laravel-debugbar", "laravel-ide-helper" - just for development

What can you see

Backend:

• Routes
• Controllers
• Jwt middleware
• Validation via request
• Models
• Tests
• Migrations
• Factories
• Seeds
• Docker

Frontend:

• File webpack.mix.js
• Laravel views
• App initializing
• App structure
• Vue components
• Main component
• Vue store structure
• Vue router

Vue components

• Login/register
• CRUD example
• Flash messages
• Navigation bar
• Pagination (via Laravel pagination)
• Form inputs
• Mixin for auth checking in component

GraphQL

There is the GraphQL branch

How to install (Docker)

Just copy and past:

git clone [email protected]:dima-loburec/laravel-vue.git
cd laravel-vue/

# frontend:
docker run -v "$PWD":/usr/src/app -w /usr/src/app node:8 npm rebuild node-sass --force && yarn install && yarn run dev

# backend:
cd docker/
docker-compose up -d
# ensure the container name "docker_app_1" via "docker-compose ps" command and run:
docker exec docker_app_1 bash -c "sh docker/app/install.sh"

# open http://localhost:8081/

How to install (Manually)

You need any LAMP/LEMP with PHP5.6+ and MySQL 5.7+

git clone [email protected]:dima-loburec/laravel-vue.git
# copy .env.example to .env and add your database credentials
# add vhost to your web-server for public folder
# run your composer, artisan, npm/yarn:
sh sh/run.sh
npm run watch

If "npm run" doesn't work:

rm -rf node_modules
npm install

Or just try to update node and npm:

sudo npm install n -g
sudo n stable
sudo npm install npm@latest -g

Tests

/vendor/bin/phpunit