包简介

Enabling Livewire in Twig templates

README 文档

README

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:

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.

<html>
<head>
    ...
    {{ livewireStyles() }}
</head>
<body>
    ...
    {{ livewireScripts() }}
</body>
</html>

In your body you may include the component like:

{# 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(<expression>) #}
{% livewire.component 'counter' key('counterkey') %}

{# The Twig version of '@persist' #}
{% livewire.persist 'name' %}
<div>
    ...
</div>
{% 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(<options>) }}

Example

Add the following to resources/views/livewire/counter.twig

<div>
    <div wire:click="add">+</div>
    <div>{{ count }}</div>
    <div wire:click="subtract">-</div>
</div>

Add the following to app/Http/Livewire/Counter.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Counter extends Component
{
    public int $count = 1;

    public function add()
    {
        $this->count++;
    }

    public function subtract()
    {
        $this->count--;
    }
}

Todo

Moar tests.

Testing

$ composer test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email michel@enflow.nl instead of using the issue tracker.

Credits

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.

License

The MIT License (MIT). Please see License File for more information.

enflow/livewire-twig 适用场景与选型建议

enflow/livewire-twig 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 67.81k 次下载、GitHub Stars 达 28，最近一次更新时间为 2020 年 09 月 29 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 enflow/livewire-twig 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 enflow/livewire-twig 我们能提供哪些服务？

定制开发 / 二次开发

基于 enflow/livewire-twig 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

enflow/livewire-twig

包简介