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.

x-data="{ posts: [] }"
x-init="posts = await (await fetch('/posts')).json()"


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>

Standalone x-init

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>
<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')

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.')

If you have both an x-data object containing an init() method and an x-init directive, the x-data method will be called before the directive.

init() {
console.log('I am called first')
x-init="console.log('I am called second')"

Code highlighting provided by Torchlight