-
Notifications
You must be signed in to change notification settings - Fork 221
/
Copy pathquickstart.blade.php
156 lines (126 loc) · 3.52 KB
/
quickstart.blade.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
* [Install Livewire](#install-livewire)
* [Create a component](#create-a-component)
* [Include the component](#include-the-component)
* [View it in the browser](#view-in-browser)
* [Add "counter" functionality](#add-counter)
* [View it in the browser](#view-in-browser-finally)
## Install Livewire {#install-livewire}
Include the PHP.
@component('components.code', ['lang' => 'shell'])
composer require livewire/livewire
@endcomponent
Include the JavaScript (on every page that will be using Livewire).
@component('components.code', ['lang' => 'blade'])
@verbatim
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>
@endverbatim
@endcomponent
## Create a component {#create-a-component}
Run the following command to generate a new Livewire component called `counter`.
@component('components.code', ['lang' => 'shell'])
php artisan make:livewire counter
@endcomponent
Running this command will generate the following two files:
@component('components.code-component', [
'className' => 'app/Http/Livewire/Counter.php',
'viewName' => 'resources/views/livewire/counter.blade.php',
])
@slot('class')
@verbatim
namespace App\Http\Livewire;
use Livewire\Component;
class Counter extends Component
{
public function render()
{
return view('livewire.counter');
}
}
@endverbatim
@endslot
@slot('view')
@verbatim
<div>
...
</div>
@endverbatim
@endslot
@endcomponent
Let's add some text to the view so we can see something tangible in the browser.
@component('components.tip')
Livewire components MUST have a single root element.
@endcomponent
@component('components.code-component', [
'viewName' => 'resources/views/livewire/counter.blade.php',
])
@slot('view')
@verbatim
<div>
<h1>Hello World!</h1>
</div>
@endverbatim
@endslot
@endcomponent
## Include the component {#include-the-component}
@verbatim
Think of Livewire components like Blade includes. You can insert `<livewire:some-component />` anywhere in a Blade view and it will render.
@endverbatim
@component('components.code', ['lang' => 'blade'])
@verbatim
<head>
...
@livewireStyles
</head>
<body>
<livewire:counter /> {{-- [tl! highlight] --}}
...
@livewireScripts
</body>
</html>
@endverbatim
@endcomponent
## View it in the browser {#view-in-browser}
Load the page you included Livewire on in the browser. You should see "Hello World!".
## Add "counter" functionality {#add-counter}
Replace the generated content of the `counter` component class and view with the following:
@component('components.code-component', [
'className' => 'app/Http/Livewire/Counter.php',
'viewName' => 'resources/views/livewire/counter.blade.php',
])
@slot('class')
@verbatim
class Counter extends Component
{
public $count = 0;
public function increment()
{
$this->count++;
}
public function render()
{
return view('livewire.counter');
}
}
@endverbatim
@endslot
@slot('view')
@verbatim
<div style="text-align: center">
<button wire:click="increment">+</button>
<h1>{{ $count }}</h1>
</div>
@endverbatim
@endslot
@endcomponent
## View it in the browser {#view-in-browser-finally}
Now reload the page in the browser, you should see the `counter` component rendered. If you click the "+" button, the page should automatically update without a page reload. Magic 🧙♂.️
@component('components.tip')
In general, something as trivial as this "counter" is more suited for something like AlpineJS, however it's one of the best ways to easily understand the way Livewire works.
@endcomponent