Wire Extender allows you to embed any Livewire component on any website or even within a static HTML file. Imagine embedding your Livewire-powered forms, chat widgets, or any other interactive components across different web platforms!
Create a new HTML file on your local machine with the following contents to get a Livewire-powered click counter:
<html>
<head>
<script src="https://unpkg.com/@wire-elements/wire-extender" data-uri="https://wire-elements.dev"></script>
</head>
<body>
<livewire data-component="counter" data-params='{"count":10}'></livewire>
</body>
</html>Note: Wire Extender is currently in development. Pull requests and feedback are welcome! 😄
-
Require the package via Composer:
composer require wire-elements/wire-extender
-
Configure CSRF token verification:
- For Livewire 10, open
app/Http/Middleware/VerifyCsrfToken.phpand add theIgnoreForWireExtendertrait. - For Livewire 11, create a new middleware and replace the default one. (See full documentation for details)
- For Livewire 10, open
-
Adjust CORS settings:
Open
config/cors.phpand addlivewire/*to thepathsarray.
Add the #[Embeddable] attribute to your Livewire component class:
use WireElements\WireExtender\Attributes\Embeddable;
#[Embeddable]
class Counter extends Component
{
// Your component logic here
}-
Publish the
wire-extender.jslibrary:php artisan vendor:publish --tag=wire-extender
-
Include the script on the website where you want to embed your Livewire component:
<script src="//your-domain.com/vendor/wire-elements/wire-extender.js"></script>
-
Define the component you want to embed:
<livewire data-component="counter" data-params='{"count":10}'> <!-- Placeholder... --> </livewire>
- Custom asset URLs
- CDN usage
- Placeholder content
For more details on these advanced topics, please refer to the full documentation.
We welcome contributions! Please feel free to submit pull requests or open issues on our GitHub repository.
Wire Extender is open-sourced software licensed under the MIT license.