Laravel Vue Boilerplate
A Laravel 8 Single Page Application boilerplate using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass and Pug with:
- A users CRUD if the current user is an admin written in RESTful and GraphQL.
- i18n for English, Portuguese and Spanish, based on browser language settings.
- Authentication using Laravel Sanctum.
- WebSockets with Laravel Echo and Pusher.
- Working service worker with Workbox for better PWA development.
- Dockerfile configured with PHP 7.4, Node.js 12 and Composer, with MySQL and phpMyAdmin on Docker Compose.
You can check it live on this website, with the credentials:
Admin user
E-mail: [email protected]
Password: admin
Normal user
E-mail: [email protected]
Password: normal
Notice that all the changed data on that website sample, such as password and CRUD actions, won't be stored.
Main dependencies
Front-end:
- Vue
- VueRouter
- Vuex
- vue-apollo
- vuex-i18n
- Bootstrap 4
- BootstrapVue
- Workbox
- TypeScript
- Pug
- Sass
- Laravel Echo
- Laravel Mix
The TypeScript code tries to follow the Airbnb JavaScript Style Guide, the linters are already included and configured.
Back-end:
Steps to run it:
Remember to search for "TODO change" on the files to change example code.
With Docker
Run:
docker-compose up --build
After it starts, just on the first time, run on another terminal:
docker exec laravel-vue-boilerplate bash -c "composer start && npm start"
The application will be available on http://localhost:8000 and the phpMyAdmin on http://localhost:8081
Common way
Rename the .env.example file to .env, and fill it with your local info, then:
Install PHP and JavaScript dependencies:
composer install
npm install
Generate Laravel keys:
php artisan key:generate
Generate i18n string for Vue, based on Laravel i18n files:
php artisan vue-i18n:generate
Migrate and seed the database:
php artisan migrate --seed
Compile all the front-end stuff:
npm run prod