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

x-init="expressionOrMethodCall()": This is the core directive. You place it on the same HTML element as your x-data directive, or on any element within an Alpine component's scope.

• It can execute a simple JavaScript expression directly:

  <div x-data="{ isActive: false }" x-init="isActive = true; console.log('Component initialized, isActive is now true.')">...</div>

• More commonly, it calls a method defined within your component's data:

  <div x-data="myComponent()" x-init="setup()">...</div>
  <script>
    function myComponent() {
      return {
        message: 'Hello',
        setup() {
          console.log('Setup method called on init!');
          this.message = 'Component initialized!';
          // Perform other setup tasks like fetching data, etc.
        }
      }
    }
  </script>

Accessing Component Data: Code within x-init has full access to the component's data properties and methods defined in x-data. You can read and modify these properties just like any other method within the component.

<div x-data="{ count: 0, initialValue: 5 }" x-init="count = initialValue * 2">
  Count is: <span x-text="count"></span> <!-- Will display 10 -->
</div>

Execution Timing: x-init functions run *after* AlpineJS has processed the x-data directive and set up the initial reactive data for the component, but *before* child components (if any) are initialized. It's the first piece of your custom logic that executes for that specific component instance once its basic structure is ready.

Think of it like this sequence:

1. Alpine encounters an element with x-data.
2. Alpine initializes the data object defined by x-data, making it reactive.
3. Alpine looks for an x-init directive on that element (or its children within the scope).
4. Alpine executes the JavaScript expression or method call specified in x-init.
5. Alpine continues processing, initializing child components, handling bindings, etc.

Placing x-init on an element outside an x-data scope: x-init operates within the context of the closest parent Alpine component (defined by x-data). If you place x-init on an element that isn't inside an x-data scope, it might try to run in the global JavaScript scope, which is usually not what you intend, or it won't find the component data it expects.

<!-- Problematic: 'message' is not defined in any Alpine scope here -->
<div x-init="message = 'This might cause an error or use a global `message`'">...</div>

<!-- Correct: `x-init` is within an `x-data` scope -->
<div x-data="{ message: '' }" x-init="message = 'Initialized successfully!'">
  <p x-text="message"></p>
</div>

Trying to access DOM elements that are conditionally rendered (e.g., by x-if or x-show) from within x-init before they exist: x-init runs when its *own* element is initialized. If it tries to interact with a child DOM element that is conditionally rendered (e.g., inside a <template x-if="condition"> where condition is initially false), that child element won't be in the DOM yet.

Solution: Use this.$nextTick() inside your x-init logic (or in a method called by x-init). $nextTick waits for Alpine to complete its current reactive updates and for the DOM to be updated accordingly.

<div x-data="{ showInput: false, inputValue: '' }"
     x-init="
        showInput = true; // We change the condition
        this.$nextTick(() => {
            // Now the input should be in the DOM
            if (this.$refs.myDynamicInput) {
                this.$refs.myDynamicInput.focus();
                this.inputValue = 'Focused!';
            }
        });
     ">
    <template x-if="showInput">
        <input type="text" x-ref="myDynamicInput" x-model="inputValue">
    </template>
    <p x-text="inputValue"></p>
</div>

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 often cleaner and more straightforward to do it directly in x-data.

Less Ideal:

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

Preferred for simple static initialization:

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

Reserve x-init for actions that need to *run*, such as:

• Calling methods to perform setup logic.
• Fetching initial data from a server (as shown in the example below).
• Interacting with the wider DOM/BOM (e.g., focusing an element, setting up non-Alpine event listeners if necessary).
• Dispatching custom events.