init
x-init
The x-init
directive allows you to hook into the initialization phase of any element in Alpine.
<div x-init="console.log('I\'m being initialized!')"></div>
In the above example, "I'm being initialized!" will be output in the console before it makes further DOM updates.
Consider another example where x-init
is used to fetch some JSON and store it in x-data
before the component is processed.
<div
x-data="{ posts: [] }"
x-init="posts = await (await fetch('/posts')).json()"
>...</div>
$nextTick
Sometimes, you want to wait until after Alpine has completely finished rendering to execute some code.
This would be something like useEffect(..., [])
in react, or mount
in Vue.
By using Alpine's internal $nextTick
magic, you can make this happen.
<div x-init="$nextTick(() => { ... })"></div>
x-init
Standalone You can add x-init
to any elements inside or outside an x-data
HTML block. For example:
<div x-data>
<span x-init="console.log('I can initialize')"></span>
</div>
<span x-init="console.log('I can initialize too')"></span>
Auto-evaluate init() method
If the x-data
object of a component contains an init()
method, it will be called automatically. For example:
<div x-data="{
init() {
console.log('I am called automatically')
}
}">
...
</div>
This is also the case for components that were registered using the Alpine.data()
syntax.
Alpine.data('dropdown', () => ({
init() {
console.log('I will get evaluated when initializing each "dropdown" component.')
},
}))