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

Alefe Souza

Last update: Jan 3, 2023

Related tags

Starter Projects sass graphql docker boilerplate pusher jwt laravel typescript vue jest ci phpunit pug

Overview

Laravel Vue Boilerplate

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'

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
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

Can you help me?

Thank you
opened by ThunderPaul 2
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
⚠️ 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 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

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
⚠️ 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 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
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 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
$ 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

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

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

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

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

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.

GitHub

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

62 Dec 5, 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

19 Dec 20, 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

1 Oct 29, 2021

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

23 Dec 14, 2022

TweetNow is a Twitter clone created with Vue.js and Laravel. It is a social media platform that allows users to post short messages, follow other users, and engage in conversations through comments and likes.

TweetNow TweetNow is a opensource social media created with Vue.js+Inertia SSR and Laravel. It is a social media platform that allows users to post sh

12 Jun 16, 2023

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.

11 Dec 30, 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

1k Jan 3, 2023

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

1k Jan 3, 2023

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

3k Jan 6, 2023

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

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

56 Dec 16, 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

5.4k Jan 4, 2023

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

1.5k Dec 29, 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

1.8k Jan 3, 2023

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

Related tags

Overview

Laravel Vue Boilerplate

Main dependencies

Steps to run it:

With Docker

Common way

Comments

v4.4.13

v4.4.12

v4.4.11

v4.4.10

v4.4.9

v4.4.8

v4.4.7

v4.4.6

v4.4.5

v4.4.7

v4.4.6

v4.4.5

Owner

Alefe Souza

A Laravel 8 and Vue 3 SPA boilerplate using tailwind styling and sanctum for authentication :ghost:

A Laravel 9, Vite, Svelte SPA, Tailwind CSS (w/ Forms Plugin & Aspect Ratio Plugin), Axios & TypeScript starter template.

Laravel Starter With Laravel, Vite, Vue 2, Inertia.js, Ziggy, Typescript

A preconfigured Laravel, React, Typescript, Docker boilerplate to save you time!

TweetNow is a Twitter clone created with Vue.js and Laravel. It is a social media platform that allows users to post short messages, follow other users, and engage in conversations through comments and likes.

A simple and clean boilerplate to start a new SPA project with authentication and more features from fortify

Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

Laravel Vue SPA, Bulma themed. For demo login use `[email protected]` & `password` -

A Laravel-Vue SPA starter kit.

High scalable boilerplate for Laravel - Vue using laravel-mix.

Laravel 8 + React + Typescript + React Router v4 + Hot Module Reloading

The Laravel Boilerplate Project - https://laravel-boilerplate.com

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.

A Laravel 5 package that switchs default Laravel scaffolding/boilerplate to AdminLTE template and Pratt Landing Page with Bootstrap 3.0

A simple boilerplate for Laravel + Vue with authentication through Sanctum/Fortify

Laravel and Vue js CRUD

Building Student Management CRUD with LARAVEL VUE and INERTIA

lara setups is a new star kit for installing latest and greetest version of vue js and bootstrap

This is a Starter Laravel 8 project with Vue 3 and Bootstrap 5 installed for you.