You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 27, 2025. It is now read-only.
[](https://packagist.org/packages/jonassiewertsen/statamic-livewire)
Include the Livewire styles and scripts __on every page__ that will be using Livewire:
28
+
Livewire injects its styles and scripts automatically into the page. However, if you want to include them [manually](https://livewire.laravel.com/docs/installation#manually-including-livewires-frontend-assets), you can do so by using the respective tags `{{ livewire:styles }}` and`{{ livewire:scripts }}`.
29
29
30
-
```html
31
-
...
32
-
<!-- If using Antlers -->
33
-
{{ livewire:styles }}
30
+
In case you need to include some custom Alpine plugins, you can [bundle the assets yourself](https://livewire.laravel.com/docs/installation#manually-bundling-livewire-and-alpine) and disable the automatic injection by using the `{{ livewire:scriptConfig }}` tag. Do not forget to include the `{{ livewire:styles }}` tag as well.
You can create Livewire components as described in the general documentation. To include your Livewire component:
54
+
You can create Livewire components as described in the [general documentation](https://livewire.laravel.com/docs/components).
55
+
To include your Livewire component:
52
56
```html
53
57
<body>
54
58
<!-- If using Antlers -->
@@ -62,7 +66,7 @@ You can create Livewire components as described in the general documentation. To
62
66
### Blade or Antlers? Both!
63
67
If creating a Livewire component, you need to render a template file
64
68
65
-
```
69
+
```php
66
70
namespace App\Http\Livewire;
67
71
68
72
use Livewire\Component;
@@ -75,10 +79,10 @@ class Counter extends Component
75
79
}
76
80
}
77
81
```
78
-
More Information: (https://laravel-livewire.com/docs/quickstart#create-a-component)
82
+
More Information: (https://livewire.laravel.com/docs/components)
79
83
80
84
Normally your template file would be a blade file, named `counter.blade.php`. Great, but what about Antlers?
81
-
Rename your template to `counter.antlers.html`, use Antlers syntax and do wathever you like. **No need to change** anything inside your component Controller. How cool is that?
85
+
Rename your template to `counter.antlers.html`, use Antlers syntax and do whatever you like. **No need to change** anything inside your component Controller. How cool is that?
82
86
83
87
### Passing Initial Parameters
84
88
You can pass data into a component by passing additional parameters
@@ -110,13 +114,13 @@ class ShowContact extends Component
110
114
}
111
115
```
112
116
113
-
The [Official Livewire documentation](https://laravel-livewire.com/docs/rendering-components)
117
+
The [Official Livewire documentation](https://livewire.laravel.com/docs/components#rendering-components)
114
118
115
119
### Paginating Data
116
120
You can paginate results by using the WithPagination trait.
117
121
118
122
#### Blade
119
-
To use pagination with Blade, please use the `Livewire\WithPagination` namespace for your trait as described in the [Livewire docs](https://laravel-livewire.com/docs/2.x/pagination#paginating-data).
123
+
To use pagination with Blade, please use the `Livewire\WithPagination` namespace for your trait as described in the [Livewire docs](https://livewire.laravel.com/docs/pagination#basic-usage).
120
124
121
125
### Antlers
122
126
Pagination with Antlers does work similar. Make sure to use the `Jonassiewertsen\Livewire\WithPagination` namespace for your trait if working with Antlers.
@@ -154,46 +158,68 @@ class ShowArticles extends Component
154
158
```
155
159
156
160
### Entangle: Sharing State Between Livewire And Alpine
157
-
In case you want to share state between Livewire and Alpine, there is a Blade directive called @entangle:\
To be usable with Antlers, we do provide an dedicated Tag:
161
+
In case you want to share state between Livewire and Alpine, there is a Blade directive called `@entangle`. To be usable with Antlers, we do provide a dedicated tag:
It's worth mentioning that, since Livewire v3 now builds on top of Alpine, the `@entangle` directive is not documented anymore. Instead, it's possible to entangle the data via [the `$wire` object](https://livewire.laravel.com/docs/javascript#the-wire-object).
You can access and perform actions on the Livewire component like this:
171
176
172
177
```html
173
-
<!-- With Antlers -->
174
-
{{ livewire:this set="('name', 'Jack')" }}
178
+
<script>
179
+
document.addEventListener('livewire:initialized', function () {
180
+
// With Antlers
181
+
{{ livewire:this set="('name', 'Jack')" }}
182
+
183
+
// With Blade
184
+
@this.set('name', 'Jack')
185
+
})
186
+
</script>
187
+
```
188
+
It's worth mentioning that, since Livewire v3 now builds on top of Alpine, the `@this` directive is not used widely anymore. Instead, it's possible to [access and manipulate the state directly via JavaScript](https://livewire.laravel.com/docs/properties#accessing-properties-from-javascript) / [the `$wire` object](https://livewire.laravel.com/docs/javascript#the-wire-object).
189
+
```html
190
+
<script>
191
+
document.addEventListener('livewire:initialized', function () {
192
+
// `{{ livewire:this }}` returns the instance of the current component
193
+
{{ livewire:this }}.set('name', 'Jack')
194
+
})
195
+
</script>
196
+
```
197
+
### Lazy Components
198
+
Livewire allows you to [lazy load components](https://livewire.laravel.com/docs/lazy) that would otherwise slow down the initial page load. For this you can simply pass `lazy="true"` as argument to your component tag.
0 commit comments