mhmiton / laravel-modules-livewire
Using Laravel Livewire in Laravel Modules package with automatically registered livewire components for every modules.
Installs: 378 586
Dependents: 12
Suggesters: 0
Security: 0
Stars: 230
Watchers: 6
Forks: 40
Open Issues: 4
pkg:composer/mhmiton/laravel-modules-livewire
Requires
- php: >=8.1
- laravel/framework: ^10.0|^11.0|^12.0
- livewire/livewire: ^3.0|^4.0
- nwidart/laravel-modules: >=11.0
Requires (Dev)
- mockery/mockery: ^1.3.1
- orchestra/testbench: ^8.21.0|^9.0|^10.0
- phpunit/phpunit: ^10.4|^11.5
README
Using Laravel Livewire in Laravel Modules package with automatically registered livewire components for every modules.
Example Source Code: https://github.com/mhmiton/laravel-modules-livewire-example
Example Live Demo: https://dev.mhmiton.com/laravel-modules-livewire-example
Installation:
Install through composer:
composer require mhmiton/laravel-modules-livewire
Publish the package's configuration file:
php artisan vendor:publish --tag=modules-livewire-config
Creating Single File Components (SFC):
Command Signature:
php artisan module:make-livewire {component} {module} {--sfc} {--force} {--emoji=} {--stub=}
Example:
php artisan module:make-livewire sfc.post.create Core --sfc
Force create component if the component already exists:
php artisan module:make-livewire sfc.post.create Core --sfc --force
Output:
COMPONENT CREATED - SFC 🤙
VIEW: modules/Core/resources/views/livewire/sfc/post/⚡create.blade.php
TAG: <livewire:core::sfc.post.create />
Option (--emoji):
Use emoji (âš¡) in file/directory names (true or false)
php artisan module:make-livewire sfc.post.create Core --sfc --emoji=false
Modifying Stubs:
Check the Modifying Stubs section for the --stub option.
Creating Multi File Components (MFC):
Command Signature:
php artisan module:make-livewire {component} {module} {--mfc} {--force} {--emoji=} {--test} {--js} {--stub=}
Example:
php artisan module:make-livewire mfc.post.create Core --mfc
Force create component if the component already exists:
php artisan module:make-livewire mfc.post.create Core --mfc --force
Output:
COMPONENT CREATED - MFC 🤙
CLASS: modules/Core/resources/views/livewire/mfc/post/⚡create/create.php
VIEW: modules/Core/resources/views/livewire/mfc/post/⚡create/create.blade.php
TAG: <livewire:core::mfc.post.create />
Option (--emoji):
Use emoji (âš¡) in file/directory names (true or false)
php artisan module:make-livewire mfc.post.create Core --mfc --emoji=false
Option (--test): Create MFC with test file.:
php artisan module:make-livewire mfc.post.create Core --mfc --test
Option (--js): Create MFC with js file:
php artisan module:make-livewire mfc.post.create Core --mfc --js
Modifying Stubs:
Check the Modifying Stubs section for the --stub option.
Creating Class-based Components:
Command Signature:
php artisan module:make-livewire {component} {module} {--class} {--view=} {--force} {--inline} {--stub=}
Example:
php artisan module:make-livewire Pages/AboutPage Core --class
php artisan module:make-livewire Pages\\AboutPage Core --class
php artisan module:make-livewire pages.about-page Core --class
Force create component if the class already exists:
php artisan module:make-livewire Pages/AboutPage Core --class --force
Output:
COMPONENT CREATED - CLASS BASED 🤙
CLASS: Modules/Core/app/Livewire/Pages/AboutPage.php
VIEW: Modules/Core/resources/views/livewire/pages/about-page.blade.php
TAG: <livewire:core::pages.about-page />
Inline Component:
php artisan module:make-livewire Pages/AboutPage Core --class --inline
Output:
COMPONENT CREATED - CLASS BASED 🤙
CLASS: Modules/Core/app/Livewire/Pages/AboutPage.php
TAG: <livewire:core::pages.about-page />
Extra Option (--view):
You're able to set a custom view path for component with (--view) option.
Example:
php artisan module:make-livewire Pages/AboutPage Core --class --view=pages/about
php artisan module:make-livewire Pages/AboutPage Core --class --view=pages.about
Output:
COMPONENT CREATED - CLASS BASED 🤙
CLASS: Modules/Core/app/Livewire/Pages/AboutPage.php
VIEW: Modules/Core/resources/views/livewire/pages/about.blade.php
TAG: <livewire:core::pages.about-page />
Rendering Components:
<livewire:{module-lower-name}::component-class-kebab-case />
Example:
<livewire:core::pages.about-page />
Modifying Stubs:
Publish the package's stubs:
php artisan vendor:publish --tag=modules-livewire-stub
After publishing the stubs, will create these files. And when running the make command, will use these stub files by default.
// For Single File Component (SFC)
stubs/modules-livewire/livewire-sfc.stub
// For Multi File Component (MFC)
stubs/modules-livewire/livewire-mfc-class.stub
stubs/modules-livewire/livewire-mfc-view.stub
stubs/modules-livewire/livewire-mfc-test.stub
stubs/modules-livewire/livewire-mfc-js.stub
// For Class-based Component
stubs/modules-livewire/livewire.inline.stub
stubs/modules-livewire/livewire.stub
stubs/modules-livewire/livewire.view.stub
// For Volt
stubs/modules-livewire/volt-component-class.stub
stubs/modules-livewire/volt-component.stub
You're able to set a custom stub directory for component with (--stub) option.
php artisan module:make-livewire Pages/AboutPage Core --class --stub=about
php artisan module:make-livewire Pages/AboutPage Core --class --stub=modules-livewire/core
php artisan module:make-livewire Pages/AboutPage Core --class --stub=./
Creating Form Components:
Command Signature:
php artisan module:make-livewire-form {component} {module} {--force} {--stub=}
Example:
php artisan module:make-livewire-form Forms/PostForm Core
php artisan module:make-livewire-form Forms\\PostForm Core
php artisan module:make-livewire-form forms.post-form Core
Force create component if the class already exists:
php artisan module:make-livewire-form Forms/PostForm Core --force
Output:
COMPONENT CREATED 🤙
CLASS: Modules/Core/app/Livewire/Forms/PostForm.php
Volt:
Creating Volt Components:
Command Signature:
php artisan module:make-volt {component} {module} {--view=} {--class} {--functional} {--force} {--stub=}
Example:
php artisan module:make-volt volt.counter Core
Force create component if the view already exists:
php artisan module:make-volt volt.counter Core --force
Output:
VOLT COMPONENT CREATED 🤙
VIEW: modules/Core/resources/views/livewire/volt/counter.blade.php
TAG: <livewire:core::volt.counter />
Option (--view):
You're able to set a registered view namespace for component with (--view) option.
php artisan module:make-volt volt.counter Core --view=livewire
php artisan module:make-volt volt.counter Core --view=pages
Note: Only registered view namespace will be support from the "volt_view_namespaces" config. By default registered view namespaces are 'livewire' and 'pages' in the config.
/*
|--------------------------------------------------------------------------
| View namespaces for volt
|--------------------------------------------------------------------------
|
*/
'volt_view_namespaces' => ['livewire', 'pages'],
Option (--class):
You're able to create class based volt component with (--class) option.
php artisan module:make-volt volt.counter Core --class
Option (--functional):
You're able to create functional (API style) volt component with (--functional) option.
php artisan module:make-volt volt.counter Core --functional
Note:: By default will be create class based or functional component by registered view namespace's files. If any class based component exists on the view namespace, then will be create class based component.
Modifying Stubs:
Check the Modifying Stubs section for the --stub option.
Rendering Volt Components:
<livewire:{module-lower-name}::component-view />
Tag:
<livewire:core::volt.counter />
Route:
use Livewire\Volt\Volt;
Volt::route('/volt-counter', 'core::volt.counter');
Custom Module:
To create components for the custom module, should be add custom modules in the config file.
The config file is located at config/modules-livewire.php after publishing the config file.
Remove comment for these lines & add your custom modules.
/*
|--------------------------------------------------------------------------
| Custom modules setup
|--------------------------------------------------------------------------
|
*/
'custom_modules' => [
// 'Chat' => [
// 'name_lower' => 'chat',
// 'path' => base_path('libraries/Chat'),
// 'app_path' => 'src',
// 'module_namespace' => 'Libraries\\Chat',
// 'namespace' => 'Livewire',
// 'view' => 'resources/views/livewire',
// 'views_path' => 'resources/views',
// 'volt_view_namespaces' => ['livewire', 'pages'],
// ],
],
Custom module config details
name_lower: Module name in lower case (required).
path: Add module full path (required).
module_namespace: Add module namespace (required).
namespace: By default using
config('modules-livewire.namespace')value. You can set a different value for the specific module.view: By default using
config('modules-livewire.view')value. You can set a different value for the specific module.views_path: Module resource view path (required).
volt_view_namespaces: By default using
config('modules-livewire.volt_view_namespaces')value. You can set a different value for the specific module.
License
Copyright (c) 2021 Mehediul Hassan Miton mhmiton.dev@gmail.com
The MIT License (MIT). Please see License File for more information.