Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/enflow/livewire-twig
Add Livewire components in your Twig templates
https://github.com/enflow/livewire-twig
livewire twig
Last synced: 2 months ago
JSON representation
Add Livewire components in your Twig templates
- Host: GitHub
- URL: https://github.com/enflow/livewire-twig
- Owner: enflow
- License: mit
- Created: 2020-09-29T18:17:52.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-03-15T12:28:41.000Z (9 months ago)
- Last Synced: 2024-03-16T13:36:28.892Z (9 months ago)
- Topics: livewire, twig
- Language: PHP
- Homepage:
- Size: 59.6 KB
- Stars: 22
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# Livewire for Twig
[](https://packagist.org/packages/enflow/livewire-twig)
[](https://packagist.org/packages/enflow/livewire-twig)
The `enflow/livewire-twig` package provides the option to load Livewire components in your Twig templates.
## Versions
### <= 3.x.x
Version 3.x.x supports Livewire 2.
### >= 4.x.x
Version 4.xxx supports Livewire 3.
This version changes from the `{% livewire.component test %}` syntax to the `{% livewire.component 'test' %}` syntax.
The name argument for {% livewire.component %} and the other directives is now interpreted as an expression, allowing the use of variables or Twig expressions as a name. Note that for this reason a constant name now must be enclosed in quotes.
## Installation
You can install the package via composer:
``` bash
composer require enflow/livewire-twig
```
## Usage
The Twig extension will automatically register when `rcrowe/twigbridge` is used.
If you're using another configuration, you may wish to register the extension manually by loading the extension `Enflow\LivewireTwig\LivewireExtension`.
This package provides wrappers for the `@livewireScripts`, `@livewireStyles`, `@livewireScriptConfig`, `@livewire`, `@entangle`, `@this` and `@persist`, directives. Everything else under the hood is powered by `livewire/livewire`.
You can register your Livewire components like normal.
To use Livewire, add the following tags in the `head` tag, and before the end `body` tag in your template.
```twig
...
{{ livewireStyles() }}
...
{{ livewireScripts() }}
```
In your body you may include the component like:
```twig
{# The Twig version of '@livewire' #}
{% livewire.component 'counter' %}
{# If you wish to pass along variables to your component #}
{% livewire.component 'counter' with {'count': 3} %}
{# To include a nested component (or dashes), you need to use '' #}
{% livewire.component 'nested.component' %}
{# To use key tracking, you need to use key() #}
{% livewire.component 'counter' key('counterkey') %}
{# The Twig version of '@persist' #}
{% livewire.persist 'name' %}
...
{% livewire.endpersist %}
{# The Twig version of '@entangle' (as of Livewire 3.01 poorly documented, need to check the source code) #}
{% livewire.entangle 'expression' %}
{# The Twig version of '@this' (Can only be used after Livewire initialization is complete) #}
{% livewire.this %}
{# The Twig version of '@livewireScriptConfig' (as of Livewire 3.01 poorly documented, need to check the source code) #}
{{ livewireScriptConfig() }}
```
### Example
Add the following to `resources/views/livewire/counter.twig`
```twig
+
{{ count }}
-
```
Add the following to `app/Http/Livewire/Counter.php`
```php
count++;
}
public function subtract()
{
$this->count--;
}
}
```
## Todo
- [ ] Moar tests.
## Testing
``` bash
$ composer test
```
## Contributing
Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
## Security
If you discover any security related issues, please email [email protected] instead of using the issue tracker.
## Credits
- [Michel Bardelmeijer](https://github.com/mbardelmeijer)
- [All Contributors](../../contributors)
## About Enflow
Enflow is a digital creative agency based in Alphen aan den Rijn, Netherlands. We specialize in developing web applications, mobile applications and websites. You can find more info [on our website](https://enflow.nl/en).
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.