:elephant: A Laravel 6 SPA boilerplate with a users CRUD using Vue.js 2.6, GraphQL, Bootstrap 4, TypeScript, Sass, and Pug.

Overview

Laravel Vue Boilerplate

Travis CI CircleCI AppVeyor

A Laravel 6 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 JWT.
  • WebSockets with Laravel Echo and Pusher.
  • Vue component tests using Jest and API tests using PHPUnit.
  • Already configured to run tests on Docker, GitLab CI (with continuous deploy), Travis CI, CircleCI, AppVeyor and VSTS CI on Windows, Linux and macOS.
  • Dockerfile configured with PHP 7.2, 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 JWT keys

php artisan jwt:secret

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

Test:

composer test
npm test
Comments
  • Work with 'yarn hot'

    Work with 'yarn hot'

    I am using yarn watch to work with frontend because i couldn't get the yarn hot. It says compiled successfully but when i reload the page, the changes are not there.

    opened by jashanbhullar 2
  • Laravel Echo private channel

    Laravel Echo private channel

    Hi, I'm using Pusher as live notification system in your boilerplate, with public channel working fine, but I can't use private channel.

    This is my code:

    TheHeader.vue

    (<any>window).Echo.private('App.User.' + this.userId)
        .listen('.job', (e) => {
            console.log(e.message);
        });
    

    Event.php

    public function broadcastOn()
        {
            return new PrivateChannel('App.User.'.$this->user->id);
        }
    

    channel.php

    Broadcast::channel('App.User.{id}', function ($user, $id) {
        return (int) $user->id === (int) $id;
    });
    

    When frontend call URL http://pusher.localhost/broadcasting/auth I have this error:

    Symfony \ Component \ HttpKernel \ Exception \ AccessDeniedHttpException No message

    image

    Can you help me?

    Thank you

    opened by ThunderPaul 2
  • User Password added is PlainText

    User Password added is PlainText

    Hello, I don't know if it is a Bug or I'am missing something in configuration but, I noticed that When I add new user from Administrator panel, the user password in User table on DB is saved on plaintext.

    I have added

    public function setPasswordAttribute($value)
            {
                if($value != ""){
                    $this->attributes['password'] = bcrypt($value);
                }
            }
    

    on User Model, but I guess I missed something. I Doubt that there is a bug so much big.

    opened by loreberti89 1
  • build(deps): bump symfony/http-kernel from 4.4.4 to 4.4.13

    build(deps): bump symfony/http-kernel from 4.4.4 to 4.4.13

    ⚠️ Dependabot is rebasing this PR ⚠️

    If you make any changes to it yourself then they will take precedence over the rebase.


    Bumps symfony/http-kernel from 4.4.4 to 4.4.13.

    Release notes

    Sourced from symfony/http-kernel's releases.

    v4.4.13

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.12...v4.4.13)

    • no changes

    v4.4.12

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.11...v4.4.12)

    • bug #37841 Backport handler lock when using VAR_DUMPER_FORMAT (ogizanagi)

    v4.4.11

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.10...v4.4.11)

    • bug #37341 Fix support for PHP8 union types (nicolas-grekas)

    v4.4.10

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.9...v4.4.10)

    • bug #37182 Fix regression where Store does not return response body correctly (mpdude)

    v4.4.9

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.8...v4.4.9)

    • bug #36891 Address deprecation of ReflectionType::getClass() (derrabus)
    • bug #36833 Fix that the Store would not save responses with the X-Content-Digest header present (mpdude)
    • bug #36855 Fix error logger when stderr is redirected to /dev/null (fabpot)
    • bug #36838 Bring back the debug toolbar (derrabus)
    • bug #36789 Change priority of KernelEvents::RESPONSE subscriber (marcw)

    v4.4.8

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.7...v4.4.8)

    • bug #36434 silence E_NOTICE triggered since PHP 7.4 (xabbuh)
    • bug #36342 fix compat with Debug component (nicolas-grekas)
    • bug #36239 Prevent keys collisions in the sanitized logs processing (fancyweb)

    v4.4.7

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.6...v4.4.7)

    • no changes

    v4.4.6

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.5...v4.4.6)

    • bug #36169 fix locking for PHP 7.4+ (nicolas-grekas)
    • bug #36103 fix preloading script generation (nicolas-grekas)

    v4.4.5

    Changelog (https://github.com/symfony/http-kernel/compare/v4.4.4...v4.4.5)

    Commits
    • 2bb7b90 Update VERSION for 4.4.13
    • cdf1e9b security #cve-2020-15094 Remove headers with internal meaning from HttpClient...
    • 8e8d0ed Remove headers with internal meaning from HttpClient responses
    • a5ed890 Bump Symfony version to 4.4.13
    • f93f6b3 Update VERSION for 4.4.12
    • 98fb210 minor #37831 stop using deprecated PHPUnit APIs (xabbuh)
    • 4b232e3 stop using deprecated PHPUnit APIs
    • ce729cd Fix CS
    • b8542b3 Merge branch '3.4' into 4.4
    • 3ab83d2 Fix CS
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Messages seem to be not working

    Messages seem to be not working

    Hi there, it seems as if the broadcasting of messages through pusher is currently broken, even on the test application @ https://lvb.as.dev/. What is supposed to happen, when reloading the second page?

    opened by patsa 1
  • build(deps): bump symfony/http-foundation from 4.4.4 to 4.4.7

    build(deps): bump symfony/http-foundation from 4.4.4 to 4.4.7

    ⚠️ Dependabot is rebasing this PR ⚠️

    If you make any changes to it yourself then they will take precedence over the rebase.


    Bumps symfony/http-foundation from 4.4.4 to 4.4.7.

    Release notes

    Sourced from symfony/http-foundation's releases.

    v4.4.7

    Changelog (https://github.com/symfony/http-foundation/compare/v4.4.6...v4.4.7)

    • no changes

    v4.4.6

    Changelog (https://github.com/symfony/http-foundation/compare/v4.4.5...v4.4.6)

    • bug #36173 Fix clear cookie samesite (guillbdx)
    • bug #36103 fix preloading script generation (nicolas-grekas)

    v4.4.5

    Changelog (https://github.com/symfony/http-foundation/compare/v4.4.4...v4.4.5)

    • bug #35709 fix not sending Content-Type header for 204 responses (Tobion)
    • bug #35583 Add missing use statements (fabpot)
    Commits
    • 62f9250 [HttpFoundation] Do not set the default Content-Type based on the Accept header
    • 67d0196 add missing gitattributes for phpunit-bridge
    • 0a3b771 Merge branch '3.4' into 4.4
    • a8833c5 [Http Foundation] Fix clear cookie samesite
    • 109ac25 [DI] fix preloading script generation
    • ff006c7 Fix more quotes in exception messages
    • f4dc52b Fix quotes in exception messages
    • 2d4d118 Merge branch '3.4' into 4.4
    • 13f9b08 Fix quotes in exception messages
    • 01887e8 Add missing dots at the end of exception messages
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • build(deps): bump symfony/http-foundation from 3.4.2 to 3.4.37

    build(deps): bump symfony/http-foundation from 3.4.2 to 3.4.37

    Bumps symfony/http-foundation from 3.4.2 to 3.4.37.

    Commits
    • f3abd07 Update links to documentation
    • 45285ab Update year in license files
    • de7e6cd X-Accel Nginx URL updated
    • 5b932ee Fix typo
    • 7d2f82a use utf8mb4_bin to align code with documentation
    • 723b5ca [HttpFoundation] Use Cache-Control: must-revalidate only if explicit lifeti...
    • d2d0cfe [HttpFoundation] Fixed typo
    • f7efd0b Simpler example for Apache basic auth workaround
    • ef5fed4 [HttpFoundation] Allow redirecting to URLs that contain a semicolon
    • c9425ba Fix MySQL column type definition.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 1
  • Error when run # php artisan migrate --seed

    Error when run # php artisan migrate --seed

    $ php artisan migrate --seed


    • Application In Production!     *
      

    Do you really wish to run this command? (yes/no) [no]:

    yes

    In Connection.php line 664:

    SQLSTATE[HY000] [1044] Access denied for user ''@'localhost' to database 'forge' (SQL: select * from inf ormation_schema.tables where table_schema = forge and table_name = migrations)

    In Connector.php line 67:

    SQLSTATE[HY000] [1044] Access denied for user ''@'localhost' to database 'forge'

    opened by ElectroArmy 1
  • Vue i18n not working

    Vue i18n not working

    Getting [ts] Cannot find module '@/vue-i18n-locales.generated'from: resources/assets/vue/utils/i18n.ts on line 6 import Locales from '@/vue-i18n-locales.generated';

    Any ideas??

    opened by Yomanz 1
  • CSS doesn't load with yarn hot

    CSS doesn't load with yarn hot

    When i load css with yarn hot it doesn't work. I am talking about the style in <style> tag. If i do the production build it works fine. I am using scss inside style.

    opened by jashanbhullar 1
  • [docker] The `/var/www/html/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly

    [docker] The `/var/www/html/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly

    Hi, just downloaded it and tried to run with docker config, got this error:

    [4/4] Building fresh packages...
    error /var/www/html/node_modules/pngquant-bin: Command failed.
    Exit code: 1
    Command: node lib/install.js
    Arguments:
    Directory: /var/www/html/node_modules/pngquant-bin
    Output:
    ⚠ The `/var/www/html/node_modules/pngquant-bin/vendor/pngquant` binary doesn't seem to work correctly
      ⚠ pngquant pre-build test failed
      ℹ compiling from source
      ✔ pngquant pre-build test passed successfully
      ✖ Error: pngquant failed to build, make sure that libpng-dev is installed
        at Promise.all.then.arr (/var/www/html/node_modules/pngquant-bin/node_modules/bin-build/node_modules/execa/index.js:231:11)
        at <anonymous>
        at process._tickCallback (internal/process/next_tick.js:188:7)
    info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
    error Command failed with exit code 1.
    info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
    

    According to this link I added libpng-dev to the Dockerfile:

    RUN apt-get update \
      && apt-get install -y nodejs \
      && apt-get install -y yarn \
      && apt-get install -y libpng-dev
    

    Also an maybe unreleated question. Am I supposed to run all yarn and php artisan commands in the docker bash? E.g. docker exec laravel-vue-boilerplate bash -c "yarn run watch" for developing?

    Because if not, cross-env needs to be replaced with a different path in package.json, to work on Win10: node node_modules/cross-env/dist/bin/cross-env.js

    opened by TheJoeSchr 1
  • Admin Login

    Admin Login

    I have just installed it. When I try to login as admin, it gives me error. Email: [email protected] Password: admin I also tried to login normal user, but it is also giving error.

    opened by ugintl 0
  • Session store not set on request

    Session store not set on request

    500 internal server errors when logging in.

    {message: "Session store not set on request.", exception: "RuntimeException",…} exception: "RuntimeException" file: "E:\php\laravel-vue-boilerplate\vendor\laravel\framework\src\Illuminate\Http\Request.php" line: 483 message: "Session store not set on request." trace: [{file: "E:\php\laravel-vue-boilerplate\app\Http\Controllers\Auth\LoginController.php", line: 72,…},…]

    opened by devstorm321 2
Owner
Alefe Souza
Full Stack Developer.
Alefe Souza
A Laravel 8 and Vue 3 SPA boilerplate using tailwind styling and sanctum for authentication :ghost:

Laravel Vue Sanctum SPA Laravel and vue spa using tailwind (laravel/ui looks) for styling and sanctum for authentification Features Laravel 8 Vue + Vu

Hijen EL Khalifi 62 Nov 2, 2022
A Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios & TypeScript starter template.

Laravel 9 + Vite + Svelte + Tailwind CSS This starter template includes: Laravel 9 Vite Svelte Tailwind CSS (w/ @tailwindcss/forms and @tailwindcss/as

Ronnie 18 Dec 5, 2022
A preconfigured Laravel, React, Typescript, Docker boilerplate to save you time!

Laravel - React - Docker - Boilerplate This repo is built with the following: Laravel 9 React 17 Vite 3 ESLint 8 TypeScript 4.7 Husky/Commit lint PHP

Lockhinator 22 Sep 28, 2022
Laravel Starter With Laravel, Vite, Vue 2, Inertia.js, Ziggy, Typescript

About Laravel Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experie

Oskars Germovs 1 Oct 29, 2021
A simple and clean boilerplate to start a new SPA project with authentication and more features from fortify

A simple and clean boilerplate to start a new SPA project with authentication and more features from fortify. Its like the little sister of Jetstream, but as SPA.

Tobias Schulz 8 Nov 28, 2022
Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

Laravel Enso Hit the ground running when building your new Laravel SPA project with boilerplate and extra functionality out of the box! click on the p

Laravel Enso 1k Nov 27, 2022
Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

Laravel Enso Hit the ground running when building your new Laravel SPA project with boilerplate and extra functionality out of the box! click on the p

Laravel Enso 1k Nov 30, 2022
A Laravel-Vue SPA starter kit.

Laravel-Vue SPA A Laravel-Vue SPA starter kit. Features Laravel 8 Vue + VueRouter + Vuex + VueI18n + ESlint Pages with dynamic import and custom layou

Cretu Eusebiu 3k Dec 2, 2022
High scalable boilerplate for Laravel - Vue using laravel-mix.

Why use this ? This boilerplate make developer easier to make monolith Laravel project which integrated with Vue.js and vue-router as default front-en

Carvel Saputra Martaloho 5 Sep 21, 2022
Laravel 8 + React + Typescript + React Router v4 + Hot Module Reloading

Laravel React Typescript Boilerplate An opinionated boilerplate based on Laravel 8.*, React 16 and Typescript empowering you to get off the ground qui

George Cameron 57 May 26, 2022
The Laravel Boilerplate Project - https://laravel-boilerplate.com

Laravel Boilerplate (Current: Laravel 8.*) (Demo) Demo Credentials Admin: [email protected] Password: secret User: [email protected] Password: secret Offici

Anthony Rappa 5.4k Dec 2, 2022
LaraAdmin is a Open source Laravel Admin Panel / CMS which can be used as Admin Backend, Data Management Tool or CRM boilerplate for Laravel with features like Advanced CRUD Generation, Module Manager, Backups and many more.

LaraAdmin 1.0 LaraAdmin is a Open source CRM for quick-start Admin based applications with features like Advanced CRUD Generation, Schema Manager and

Dwij IT Solutions 1.5k Nov 3, 2022
A Laravel 5 package that switchs default Laravel scaffolding/boilerplate to AdminLTE template and Pratt Landing Page with Bootstrap 3.0

AdminLTE template Laravel package A Laravel package that switch default Laravel scaffolding / boilerplate to AdminLTE template with Bootstrap 3.0 and

Sergi Tur Badenas 1.8k Nov 4, 2022
A simple boilerplate for Laravel + Vue with authentication through Sanctum/Fortify

About this boilerplate Basic boilerplate to quickly and easy get started with a Laravel API and a Vue SPA frontend. Nothing has been done, so everythi

ikoncept 1 Dec 2, 2021
Laravel + Angularjs + Bootstrap + AdminLTE binded by Gulp workflow Admin Dashboard Boilerplate / Starter.

Laravel Angular Admin Laravel + Angularjs + Bootstrap + AdminLTE binded by Gulp workflow Admin Dashboard Boilerplate. Plus Oauth and JWT authenticatio

Alex Quiambao 927 Nov 4, 2022
Laravel and Vue js CRUD

Laravel and Vue js PhoneBook app In this project I have done a simple CRUD using Laravel and Vue Js. Here I have used : Vue router Sweetalert2 Resourc

AR Shahin 4 Jun 11, 2022
Building Student Management CRUD with LARAVEL VUE and INERTIA

Building Student Management CRUD with LARAVEL VUE and INERTIA. the amazing thing about I got by combining these technologies is we ca build single page application or SPA .

Tauseed 3 Apr 4, 2022
This is a Starter Laravel 8 project with Vue 3 and Bootstrap 5 installed for you.

Laravel8-Vue3-Bootstrap5 This is a Starter Laravel 8 project with Vue 3 and Bootstrap 5. Instalation Guide: As always you need to: composer install Th

Mohamed Hafidi 7 Oct 19, 2022
lara setups is a new star kit for installing latest and greetest version of vue js and bootstrap

Lara setups Introduction lara setups helps you to install latest bootstrap and vue.js version on your laravel project laravel team no longer supports

Mohammad khazaee 11 Jul 12, 2022