Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alefesouza/laravel-vue-boilerplate
:elephant: A Laravel 8 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.
https://github.com/alefesouza/laravel-vue-boilerplate
boilerplate ci docker graphql laravel pug pusher sass typescript vue
Last synced: 2 months ago
JSON representation
:elephant: A Laravel 8 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.
- Host: GitHub
- URL: https://github.com/alefesouza/laravel-vue-boilerplate
- Owner: alefesouza
- License: mit
- Created: 2017-12-27T07:54:27.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2021-10-27T18:40:03.000Z (about 3 years ago)
- Last Synced: 2024-10-01T06:35:00.624Z (2 months ago)
- Topics: boilerplate, ci, docker, graphql, laravel, pug, pusher, sass, typescript, vue
- Language: PHP
- Homepage:
- Size: 2.02 MB
- Stars: 541
- Watchers: 30
- Forks: 146
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- awesome-laravel - Laravel Vue Boilerplate - Un modelo de aplicación de una sola página de Laravel 8 que utiliza Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass y Pug (Starter Projects)
README
# 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](https://lvb.as.dev), with the credentials:
Admin user
E-mail: [email protected]
Password: adminNormal user
E-mail: [email protected]
Password: normalNotice that all the changed data on that website sample, such as password and CRUD actions, won't be stored.
## Main dependencies
Front-end:
* [Vue](https://github.com/vuejs/vue)
* [VueRouter](https://github.com/vuejs/vue-router)
* [Vuex](https://github.com/vuejs/vuex)
* [vue-apollo](https://github.com/vuejs/vue-apollo)
* [vuex-i18n](https://github.com/dkfbasel/vuex-i18n)
* [Bootstrap 4](https://github.com/twbs/bootstrap)
* [BootstrapVue](https://github.com/bootstrap-vue/bootstrap-vue)
* [Workbox](https://github.com/GoogleChrome/workbox)
* [TypeScript](https://github.com/microsoft/typescript)
* [Pug](https://github.com/pugjs/pug)
* [Sass](https://github.com/sass/node-sass)
* [Laravel Echo](https://github.com/laravel/echo)
* [Laravel Mix](https://github.com/JeffreyWay/laravel-mix)The TypeScript code tries to follow the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript), the linters are already included and configured.
Back-end:
* [Laravel](https://github.com/laravel/laravel)
* [Laravel GraphQL](https://github.com/rebing/graphql-laravel)
* [Laravel Sanctum](https://github.com/laravel/sanctum)
* [laravel-vue-i18n-generator](https://github.com/alefesouza/laravel-vue-i18n-generator)## 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 installGenerate 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