https://github.com/webuni/twig-components
Define reusable components in Twig as in Vue/React style via Twital
https://github.com/webuni/twig-components
Last synced: about 1 month ago
JSON representation
Define reusable components in Twig as in Vue/React style via Twital
- Host: GitHub
- URL: https://github.com/webuni/twig-components
- Owner: webuni
- Created: 2020-06-29T21:04:57.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-01-19T22:28:50.000Z (over 5 years ago)
- Last Synced: 2025-12-27T14:31:20.117Z (5 months ago)
- Language: PHP
- Size: 9.77 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Twig and Twital Components
===========================
Define reusable components in Twig/Twital as in Vue/React style.
Installation
------------
Install this library via composer:
```shell script
composer install webuni/twig-components
```
and enable in Twig environment:
```php
use Twig\Environment;
use Webuni\TwigComponents\Twig\ComponentsExtension;
$twig = new Environment($loader, $options);
$twig->addExtension(new ComponentsExtension());
```
Usage
-----
### Scope
Everything in the parent template is compiled in parent scope;
everything in the child template is compiled in the child scope.
### Twital
Add `c:` prefix to a Twital attribute to indicate value as a Twig code.
### Import components
https://github.com/vuejs/rfcs/pull/182
TwigTwital
```twig
{% component "button.html.twig" as "button" %}
{% component "button" %}
…
{% endcomponent %}
```
```html
…
```
### Dynamic components
https://v3.vuejs.org/guide/component-basics.html#dynamic-components
TwigTwital
```twig
{% component "button.html.twig" as "button" %}
{% component "group_button.html.twig" as "group_button" %}
{% component current_component %}
…
{% endcomponent %}
```
```html
…
```
### Slots
TwigTwital
```twig
-
{% slot bind "item" %}{{ item }}{% endslot %}
{% for index, item in items %}
{% endfor %}
```
```twig
{% component "todo-list" %}
{% template bind "slot_context" %}
{{ slot_context.item }}
{% endtemplate %}
{% endcomponent %}
```
```twig
{% component "todo-list" %}
{% template bind "{item}" %}
{{ item }}
{% endtemplate %}
{% endcomponent %}
```
```html
-
{{ item }}
```
```html
{{ slot_context.item }}
```
```html
{{ item }}
```
### Bind
```html
```
Multiple
```html
```
Dynamic bind
```html
{{ item }}
```
Inspiration
-----------
- https://v3.vuejs.org/guide/component-slots.html
- https://github.com/vuejs/rfcs/pull/182
- https://github.com/giuseppeg/xm