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:

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

Project Name	Stars	Repos Using This	Packages Using This	Most Recent Commit	Total Releases	Latest Release	Open Issues	License	Language
Generator Angular Fullstack	6,128	8	4	a month ago	115	August 11, 2018	254		JavaScript
Yeoman generator for an Angular app with an Express server
Ihover	3,481	20		10 months ago		April 05, 2014	14		Pug
iHover is a collection of hover effects using pure CSS, inspired by codrops article, powered by Sass.
Wordless	1,386			2 years ago			3		PHP
All the power of Pug, Sass, Coffeescript and WebPack in your WordPress theme. Stop writing themes like it's 1998.
Generator Yeogurt	548		2	2 months ago	127	February 01, 2020		mit	JavaScript
A generator for creating static sites. Helps you harness the power of your favorite tools: Pug or Nunjucks, Gulp, ES6/2015, and much more!
Laravel Vue Boilerplate	482			2 years ago				mit	PHP
:elephant: A Laravel 8 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.
Pingy Cli	387	32	2	4 months ago	46	June 09, 2018	42	mit	JavaScript
The Simple Frontend Build Tool. No Configuration, No Plugins.
Pug Starter	338			11 days ago	2	May 18, 2019		gpl-3.0	JavaScript
Simple pug (jade) starter [framework] enabling faster delivery of HTML & CSS projects to a private server and/or automatic deployment of GitHub pages.
Kratos Boilerplate	316			23 days ago				mit	JavaScript
:fire: A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Gulp Pug Starter	262			a year ago	9	September 29, 2018	2	gpl-3.0	JavaScript
Frontend development with pleasure. Pug + SCSS version
48tools	239			a day ago			8	gpl-3.0	TypeScript
48工具，提供公演、口袋48直播录源，公演、口袋48录播下载，封面下载，B站直播抓取，B站视频下载，A站直播抓取，A站视频下载，抖音视频下载，视频截取，视频导出gif，视频合并等功能。口袋48的pc版，可以看成员的直播、弹幕和录播。