AlpineJS Skill: Running Code on Init (`x-init`)

x-init="expressionOrMethodCall()": This is the core syntax. You provide a JavaScript expression or a call to a method defined within your component's x-data.

For example, you might in-line a simple assignment or log:

<div x-data="{ message: '' }" x-init="message = 'Component initialized!'; console.log('Component ready.')">
  <p x-text="message"></p>
</div>

Or, more commonly, call a method defined in your component:

<div x-data="myComponent" x-init="setupComponent()">
  ...
</div>

<script>
  document.addEventListener('alpine:init', () => {
    Alpine.data('myComponent', () => ({
      setupComponent() {
        console.log('Component setup logic running from x-init call.');
        // Perform initial tasks here
      }
    }));
  });
</script>

Can access component data: Code within x-init has full access to the component's reactive data properties defined in x-data. You can read and modify these properties directly.

<div x-data="{ count: 0, initialMessage: 'Loading...' }" x-init="count = 10; initialMessage = 'Ready!'">
  <p>Initial Count: <span x-text="count"></span></p>
  <p>Status: <span x-text="initialMessage"></span></p>
</div>

Runs after initial data is set up from x-data: AlpineJS first processes x-data to establish the initial state of your component. Then, x-init is executed. This ensures that any properties you defined in x-data are available when your x-init code runs.

Placing x-init on an element outside an x-data scope: x-init operates within the context of the closest parent element that has an x-data directive. If you place x-init on an element that isn't a child of an x-data-defined component, it might not have access to the intended component data. In some cases, it might attempt to run in the global JavaScript scope, which is generally not what you want for component-specific logic. Always ensure x-init is within an Alpine component's scope.

<!-- Incorrect: x-init has no component data context here -->
<div x-init="console.log('This might not work as expected or access component data')">
  <div x-data="{ foo: 'bar' }">...</div>
</div>

<!-- Correct: x-init is within the x-data scope -->
<div x-data="{ foo: 'bar' }" x-init="console.log('Accessing foo:', foo)">
  ...
</div>

Trying to access DOM elements that are conditionally rendered by x-if or x-show (initially false) from within x-init before they exist: x-init runs when its own element is initialized and added to the DOM. If x-init tries to interact with a child DOM element that is conditionally rendered (e.g., inside a <template x-if="false">...</template>), that child element won't exist yet. If you need to wait for the initial render cycle to complete and for all Alpine-managed DOM updates to take effect before interacting with such elements, use $nextTick inside your x-init logic.

<div x-data="{ showDetails: false }" x-init="$nextTick(() => { console.log('DOM is updated, can access #details if showDetails becomes true later and it renders') })">
  <button @click="showDetails = true">Show Details</button>
  <template x-if="showDetails">
    <div id="details">Detail content here...</div>
  </template>
</div>

Note: For accessing elements rendered by `x-if`, you'd typically put initialization logic specific to that block *inside* the `x-if` template, perhaps on its root element with another `x-init`, or use `$watch` if initialization depends on the condition changing.

Overusing x-init for things that could be simple x-data initial values: If you're just setting a static initial value for a property, it's cleaner and more direct to do it within x-data itself. Reserve x-init for actions that genuinely need to run, such as:

• Fetching initial data from a server (as shown in the example below).
• Calling methods that perform setup logic.
• Setting up event listeners on non-Alpine elements or the `window`/`document`.
• Initializing third-party libraries that require a DOM element reference.

Instead of:

<div x-data="{ name: '' }" x-init="name = 'Alice'">...</div>

Prefer:

<div x-data="{ name: 'Alice' }">...</div>