### Install and Import Alpine.js as a Module

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/essentials/installation.md

Install Alpine.js using NPM and import it into your JavaScript bundle. Initialize Alpine by calling Alpine.start(). Register extensions between import and start. Call Alpine.start() only once.

```shell
npm install alpinejs
```

```javascript
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()
```

--------------------------------

### Install Anchor via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/anchor.md

Install the package and initialize the plugin within your JavaScript bundle.

```shell
npm install @alpinejs/anchor
```

```js
import Alpine from 'alpinejs'
import anchor from '@alpinejs/anchor'

Alpine.plugin(anchor)

...
```

--------------------------------

### Alpine.js V3 Initialization: Importing and Starting

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/upgrade-guide.md

Shows the required change in how Alpine.js is imported and started when using it as a module in V3. Unlike V2, V3 requires an explicit `Alpine.start()` call after importing.

```javascript
// 🚫 Before
import 'alpinejs'

// ✅ After
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()
```

--------------------------------

### Install Anchor via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/anchor.md

Include the plugin script tag before the Alpine core script tag.

```alpine
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/anchor@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Install and Initialize Alpine.js Focus Plugin via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/focus.md

Install the Focus plugin using NPM and import it into your JavaScript bundle. This approach is recommended for projects using a module bundler.

```shell
npm install @alpinejs/focus
```

```javascript
import Alpine from 'alpinejs'
import focus from '@alpinejs/focus'

Alpine.plugin(focus)

...
```

--------------------------------

### Listening for Click Events with x-on in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

Shows how to attach event listeners to HTML elements using the x-on directive in Alpine.js. This example listens for a 'click' event to trigger an action that modifies component state.

```html
<button x-on:click="count++">Increment</button>
```

--------------------------------

### Install and Initialize Alpine.js Collapse Plugin via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/collapse.md

Install the Collapse plugin using NPM and import it into your JavaScript bundle. This approach is recommended for projects using a module bundler.

```shell
npm install @alpinejs/collapse
```

```javascript
import Alpine from 'alpinejs'
import collapse from '@alpinejs/collapse'

Alpine.plugin(collapse)

...
```

--------------------------------

### Alpine.js Morph Plugin NPM Installation and Initialization

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/morph.md

Installs and initializes the Alpine.js Morph plugin using NPM. This involves importing Alpine and the morph plugin, then registering the plugin with Alpine.

```shell
npm install @alpinejs/morph
```

```javascript
import Alpine from 'alpinejs'
import morph from '@alpinejs/morph'

window.Alpine = Alpine
Alpine.plugin(morph)

...
```

--------------------------------

### Example: Creating a '$clipboard' Magic Function

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/extending.md

Illustrates how to create a magic function '$clipboard' that copies text to the user's clipboard.

```APIDOC
## POST /alpine/magic/clipboard

### Description
Registers the `'$clipboard'` magic function. This function accepts a string argument and writes it to the user's clipboard using the `navigator.clipboard.writeText` API.

### Method
POST

### Endpoint
`/alpine/magic/clipboard`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **subject** (string) - Required - The text to be copied to the clipboard.

### Request Example
```json
{
  "subject": "hello world"
}
```

### Response
#### Success Response (200)
- **message** (string) - Confirmation message indicating the text was copied.

#### Response Example
```json
{
  "message": "Text copied to clipboard."
}
```

### Usage in Template
```html
<button @click="$clipboard('hello world')">Copy "Hello World"</button>
```
```

--------------------------------

### Basic Alpine.js HTML Structure

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

A minimal HTML file setup to include Alpine.js from a CDN and display a simple message. This serves as the entry point for using Alpine.js in a web project.

```html
<html>
<head>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body>
    <h1 x-data="{ message: 'I ❤️ Alpine' }" x-text="message"></h1>
</body>
</html>
```

--------------------------------

### Basic Alpine.js CSP Example

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/csp.md

Demonstrates a functional counter component using Alpine's CSP build, showcasing that most inline expressions work similarly to the standard build. This example includes basic CSP headers for context.

```html
<html>
    <head>
        <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'nonce-a23gbfz9e">
        <script defer nonce="a23gbfz9e" src="https://cdn.jsdelivr.net/npm/@alpinejs/csp@3.x.x/dist/cdn.min.js"></script>
    </head>
    <body>
        <div x-data="{ count: 0, message: 'Hello' }">
            <button x-on:click="count++">Increment</button>
            <button x-on:click="count = 0">Reset</button>

            <span x-text="count"></span>
            <span x-text="message + ' World'"></span>
            <span x-show="count > 5">Count is greater than 5!</span>
        </div>
    </body>
</html>
```

--------------------------------

### Example: Creating a '$now' Magic Property

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/extending.md

Demonstrates how to create a simple magic property '$now' that returns the current time.

```APIDOC
## POST /alpine/magic/now

### Description
Registers the `'$now'` magic property. When accessed in an Alpine.js template, it returns the current time formatted as a string.

### Method
POST

### Endpoint
`/alpine/magic/now`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **Alpine** (object) - Required - The Alpine global object.

### Request Example
```json
{
  "Alpine": "Alpine"
}
```

### Response
#### Success Response (200)
- **time** (string) - The current time formatted as a string (e.g., "12:00:00 PM").

#### Response Example
```json
{
  "time": "12:34:56 PM"
}
```

### Usage in Template
```html
<span x-text="$now"></span>
```
```

--------------------------------

### Install and Initialize Alpine.js Sort Plugin via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/sort.md

Install the Sort plugin using NPM and then import and initialize it within your JavaScript bundle. This is the recommended approach for projects using a build system.

```shell
npm install @alpinejs/sort
```

```javascript
import Alpine from 'alpinejs'
import sort from '@alpinejs/sort'

Alpine.plugin(sort)

...
```

--------------------------------

### Install and Initialize Alpine.js CSP Build via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/csp.md

Install the CSP-friendly build of Alpine.js using NPM and initialize it within your JavaScript bundle. This method is suitable for projects using module bundlers.

```shell
npm install @alpinejs/csp
```

```javascript
import Alpine from '@alpinejs/csp'

window.Alpine = Alpine

Alpine.start()
```

--------------------------------

### Example CSP Header for Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/csp.md

Provides an example of a Content Security Policy (CSP) header that is compatible with Alpine.js's CSP build. The key is to remove 'unsafe-eval' from the script-src directive while allowing nonce-based scripts.

```http
Content-Security-Policy: default-src 'self'; script-src 'nonce-[random]' 'strict-dynamic';
```

--------------------------------

### Install and Initialize Alpine.js Persist Plugin via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/persist.md

Install the Persist plugin using NPM and initialize it within your JavaScript bundle. This approach is for projects using a module bundler.

```shell
npm install @alpinejs/persist
```

```javascript
import Alpine from 'alpinejs'
import persist from '@alpinejs/persist'

Alpine.plugin(persist)

...
```

--------------------------------

### Install and Initialize Alpine.js Mask Plugin via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/mask.md

Install the Mask plugin using NPM and then import and initialize it within your JavaScript bundle. This approach is for projects using a module bundler.

```shell
npm install @alpinejs/mask
```

```javascript
import Alpine from 'alpinejs'
import mask from '@alpinejs/mask'

Alpine.plugin(mask)

...
```

--------------------------------

### Alpine.js Morph DOM Update and Logging

Source: https://github.com/alpinejs/alpine/blob/main/morph.html

The 'start' function initializes Alpine.js morph to update a DOM element based on provided HTML. It also sets up a logger to capture morphing details, including messages, source, and target elements, and displays them on the page. Dependencies include Alpine.js and basic DOM manipulation.

```javascript
function start() { Alpine.morph.log((message, from, to) => { console.log(message, from, to) document.querySelector('#log-from').innerHTML = escape(from.outerHTML) document.querySelector('#log-to').innerHTML = escape(to.outerHTML) let li = document.createElement('li') li.textContent = message message && document.querySelector('#log-message').appendChild(li) }) Alpine.morph( document.querySelector('#before').firstElementChild, document.querySelector('#after').firstElementChild.outerHTML, { debug: true, key(el) { return el.dataset.key } } ) }
```

--------------------------------

### Install and Initialize Alpine.js Intersect Plugin via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/intersect.md

Install the Intersect plugin using NPM and then import and initialize it within your JavaScript bundle before using Alpine.js.

```shell
npm install @alpinejs/intersect
```

```javascript
import Alpine from 'alpinejs'
import intersect from '@alpinejs/intersect'

Alpine.plugin(intersect)

...
```

--------------------------------

### Alpine.js Interactive Morph Example

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/morph.md

An interactive example showcasing the Morph plugin's functionality. It uses Alpine.js directives to control a slide counter and display an image, demonstrating state preservation.

```html
<div x-data="{ slide: 1 }" class="border rounded">
    <div>
        <img :src="'/img/morphs/morph'+slide+'.png'">
    </div>

    <div class="flex w-full justify-between" style="padding-bottom: 1rem">
        <div class="w-1/2 px-4">
            <button @click="slide = (slide === 1) ? 13 : slide - 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Previous</button>
        </div>
        <div class="w-1/2 px-4">
            <button @click="slide = (slide % 13) + 1" class="w-full bg-cyan-400 rounded-full text-center py-3 font-bold text-white">Next</button>
        </div>
    </div>
</div>
```

--------------------------------

### Initialize Alpine.js Resize Plugin via NPM

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/resize.md

Install the Resize plugin using NPM and then import and register it with Alpine.js in your JavaScript bundle. This is the recommended approach for projects using a build system.

```shell
npm install @alpinejs/resize
```

```javascript
import Alpine from 'alpinejs'
import resize from '@alpinejs/resize'

Alpine.plugin(resize)

...
```

--------------------------------

### Fetch Data on Initialization with x-init in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/init.md

This example demonstrates using x-init to fetch JSON data from an endpoint and store it in the component's state (x-data) before further processing. It utilizes async/await for the fetch operation.

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

--------------------------------

### Alpine.js x-effect Example

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/effect.md

Demonstrates the x-effect directive in Alpine.js. It logs the 'label' property to the console and re-logs it when the property changes. No external dependencies are required, only Alpine.js.

```alpine
<div x-data="{ label: 'Hello' }" x-effect="console.log(label)">
    <button @click="label += ' World!'">Change Message</button>
</div>
```

--------------------------------

### Install Alpine.js Focus Plugin via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/focus.md

Include the Focus plugin from a CDN before Alpine's core JS file. This method is suitable for quick integration without a build process.

```html
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Alpine.js: Initialize and Measure Performance

Source: https://github.com/alpinejs/alpine/blob/main/benchmarks/init.html

This snippet initializes Alpine.js and measures the performance of its initialization. It logs the time taken for Alpine to become ready after the DOM is loaded. No external dependencies are required beyond Alpine.js itself.

```javascript
window.start = performance.now()
document.addEventListener('alpine:initialized', () => {
  setTimeout(() => {
    console.log(performance.now() - window.start);
  })
})
```

--------------------------------

### Install Alpine.js Resize Plugin via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/resize.md

Include the Resize plugin from a CDN before Alpine's core JS file. This method is suitable for quick integration without a build process.

```html
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/resize@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Control Focus with Arrow Keys using Alpine.js $focus

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/focus.md

This example demonstrates how to use the $focus.next() and $focus.previous() utilities to navigate focus between buttons using the left and right arrow keys. It requires no external dependencies beyond Alpine.js.

```html
<div
    @keydown.right="$focus.next()"
    @keydown.left="$focus.previous()"
>
    <button>First</button>
    <button>Second</button>
    <button>Third</button>
</div>
```

--------------------------------

### Install Alpine.js Collapse Plugin via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/collapse.md

Include the Collapse plugin from a CDN before Alpine's core JS file. This method is suitable for quick integration without a build process.

```html
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Install Alpine.js Sort Plugin via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/sort.md

Include the Sort plugin from a CDN before Alpine.js core. This method is suitable for quick integration without a build process.

```html
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/sort@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Install Alpine.js CSP Build via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/csp.md

Include the CSP-friendly build of Alpine.js directly in your HTML using a script tag from a CDN. This is a straightforward way to enable CSP compliance for Alpine.

```html
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/csp@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Using Alpine.js without Reactive Data

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/essentials/state.md

This example demonstrates how to leverage Alpine.js functionality, like event listeners, without defining reactive data by omitting an expression in the `x-data` attribute.

```html
<button x-data @click="alert('I\'ve been clicked!')">Click Me</button>
```

--------------------------------

### Install Alpine.js Persist Plugin via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/persist.md

Include the Persist plugin from a CDN before Alpine's core JS file. This method is suitable for quick integration without a build process.

```html
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Alpine.js Plugin Bundle Module Consumption

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/extending.md

Demonstrates how to consume an Alpine.js plugin packaged as an NPM module. It involves importing Alpine.js, the plugin, registering the plugin using `Alpine.plugin()`, and then starting Alpine.

```javascript
import Alpine from 'alpinejs'

import foo from 'foo'
Alpine.plugin(foo)

window.Alpine = Alpine
window.Alpine.start()
```

--------------------------------

### Keyboard Event Handling with Modifiers

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/on.md

This example demonstrates listening for specific keyboard events using `x-on` modifiers. It shows how to trigger an action only when the 'Enter' key is pressed in an input field. Modifiers can be chained for more complex key combinations.

```html
<input type="text" @keyup.enter="alert('Submitted!')">
<input type="text" @keyup.shift.enter="alert('Submitted!')">
<input type="text" @keyup.page-down="alert('Submitted!')">
```

--------------------------------

### Dispatch and Listen for Custom Events in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/on.md

This Alpine.js example shows how to dispatch a custom DOM event from a button and listen for it on a parent element. It illustrates both the native dispatchEvent method and the more concise $dispatch helper.

```alpine
<div x-data @foo="alert('Button Was Clicked!')">
    <button @click="$event.target.dispatchEvent(new CustomEvent('foo', { bubbles: true }))">...</button>
</div>
```

```alpine
<div x-data @foo="alert('Button Was Clicked!')">
    <button @click="$dispatch('foo')">...</button>
</div>
```

--------------------------------

### Element Initialization with init() Method

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/essentials/lifecycle.md

Alpine automatically calls `init()` methods defined within data objects during element initialization. This allows for setup logic within data definitions.

```javascript
Alpine.data('dropdown', () => ({
    init() {
        // I get called before the element using this data initializes.
    }
}))

```

--------------------------------

### Displaying Reactive Data with x-text in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

Demonstrates how to dynamically update the text content of an HTML element based on component state using the x-text directive in Alpine.js. It binds the element's text to a JavaScript expression.

```html
<span x-text="count"></span>
```

--------------------------------

### Alpine.js x-data with Methods

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/data.md

Shows how to define JavaScript methods within the x-data object to encapsulate component logic. The example includes a 'toggle' method to manipulate the 'open' state, accessed via @click.

```html
<div x-data="{ open: false, toggle() { this.open = ! this.open } }">
    <button @click="toggle()">Toggle Content</button>

    <div x-show="open">
        Content...
    </div>
</div>
```

--------------------------------

### Reusable Alpine.js Data with Alpine.data

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/data.md

Demonstrates how to extract x-data logic into reusable components using `Alpine.data`. This example defines a 'dropdown' component with 'open' state and a 'toggle' method, then registers it for use in the HTML.

```html
<div x-data="dropdown">
    <button @click="toggle">Toggle Content</button>

    <div x-show="open">
        Content...
    </div>
</div>

<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('dropdown', () => ({
            open: false,

            toggle() {
                this.open = ! this.open
            },
        }))
    })
</script>
```

--------------------------------

### Shorthand Event Handling with @

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/on.md

This example shows the shorthand syntax for `x-on`, using the `@` symbol instead of `x-on:`. This achieves the same functionality as the full `x-on` directive but with less verbosity. It's important to have a parent element with `x-data` defined for this to work.

```html
<button @click="alert('Hello World!')">Say Hi</button>
```

--------------------------------

### Alpine.js CSP Supported Features: Basic Operations

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/csp.md

Shows examples of basic arithmetic, comparison, conditional (ternary), and string concatenation operations supported by Alpine's CSP build. These operations can be freely used in your Alpine expressions.

```html
<div x-data="{ count: 5, name: 'Alpine' }">
    <span x-text="count + 10"></span>
    <span x-text="count > 3"></span>
    <span x-text="count === 5 ? 'Yes' : 'No'"></span>
    <span x-text="'Hello ' + name"></span>
    <div x-show="!loading && count > 0"></div>
</div>
```

--------------------------------

### Apply dynamic transition classes

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/manual-transition-test.html

Use x-transition with dynamic classes for custom transition behavior.

```html
x-transition with dynamic classes
```

--------------------------------

### Computed Properties with Getters in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

Demonstrates using JavaScript getters within an x-data object to create computed properties. This allows for dynamic data manipulation that automatically updates the template. It requires the 'get' keyword and uses 'this.' to reference properties within the x-data scope.

```javascript
{
    items: ['foo', 'bar', 'baz'],

    get filteredItems() {
        return this.items.filter(
            i => i.startsWith(this.search)
        )
    }
}
```

--------------------------------

### Apply basic transitions

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/manual-transition-test.html

Use x-transition to handle element visibility toggling.

```html
x-transition
```

--------------------------------

### Looping Elements with x-for in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

Shows how to iterate over an array (like 'filteredItems') using the x-for directive in Alpine.js. The directive is applied to a <template> element, and expressions within the template have access to the current iteration item. This enables dynamic rendering of lists.

```html
<ul>
    <template x-for="item in filteredItems">
        <li x-text="item"></li>
    </template>
</ul>
```

--------------------------------

### Alpine.js CSP Unsupported Features: Global Variables and Functions

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/csp.md

Lists examples of global variables and built-in JavaScript functions that are not accessible within Alpine's CSP build. This restriction is in place to enhance security and prevent unintended side effects.

```html
<div x-data>
    <button x-on:click="console.log('hi')"></button>
    <span x-text="document.title"></span>
    <span x-text="window.innerWidth"></span>
    <span x-text="Math.max(count, 100)"></span>
    <span x-text="parseInt('123') + count"></span>
    <span x-text="JSON.stringify({ value: count })"></span>
</div>
```

--------------------------------

### Apply collapse transition

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/manual-transition-test.html

Use x-collapse to animate height changes.

```html
x-collapse with no overflow hidden when expanded
```

--------------------------------

### Customizing Alpine.js Transition Delay

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/transition.md

Illustrates how to introduce a delay before a transition starts using the .delay modifier. This applies to both entering and leaving the element.

```html
<div ... x-transition.delay.50ms></div>
```

--------------------------------

### Alpine.js Search Input with Filtering using x-data, x-model, and x-for

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

Illustrates creating a search input component with live filtering. It uses `x-data` to manage the search query and the list of items, defining a computed property `filteredItems` for the search logic. `x-model` binds the input to the `search` state, and `x-for` iterates over `filteredItems` to display results.

```alpine
<div
    x-data="{
        search: '',

        items: ['foo', 'bar', 'baz'],

        get filteredItems() {
            return this.items.filter(
                i => i.startsWith(this.search)
            )
        }
    }"
>
    <input x-model="search" placeholder="Search...">

    <ul>
        <template x-for="item in filteredItems" :key="item">
            <li x-text="item"></li>
        </template>
    </ul>
</div>
```

--------------------------------

### Apply opacity transitions

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/manual-transition-test.html

Use the .opacity modifier to transition element opacity.

```html
x-transition.opacity
```

--------------------------------

### Initialize Element with x-init in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/init.md

The x-init directive executes JavaScript code when an Alpine.js component is initialized. This example logs a message to the console upon initialization.

```alpine
<div x-init="console.log('I'm being initialized!')"></div>
```

--------------------------------

### Initialize Alpine Store with init() Method

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/globals/alpine-store.md

Registers an Alpine.js store named 'darkMode' and initializes its state using an `init()` method. The `init()` method sets the 'on' property based on the browser's preferred color scheme. This ensures the store has a sensible starting value before the application renders.

```javascript
document.addEventListener('alpine:init', () => {
    Alpine.store('darkMode', {
        init() {
            this.on = window.matchMedia('(prefers-color-scheme: dark)').matches
        },

        on: false,

        toggle() {
            this.on = ! this.on
        }
    })
})
```

--------------------------------

### Alpine.js Morph Plugin CDN Installation

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/morph.md

Includes the Alpine.js Morph plugin via a CDN script tag. Ensure this script is included before the core Alpine.js file.

```html
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/morph@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Install Alpine.js Intersect Plugin via CDN

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/intersect.md

Include the Intersect plugin's CDN build in your HTML before Alpine's core JavaScript file to enable its functionality.

```html
<!-- Alpine Plugins -->
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>

<!-- Alpine Core -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

--------------------------------

### Alpine.js Counter Component

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

An interactive counter component built with Alpine.js. It demonstrates state management using x-data and event handling with x-on to increment a count displayed using x-text.

```html
<div x-data="{ count: 0 }">
    <button x-on:click="count++">Increment</button>

    <span x-text="count"></span>
</div>
```

--------------------------------

### Basic Usage of x-intersect Directive

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/intersect.md

Use the `x-intersect` directive on an element to execute an Alpine.js expression when that element scrolls into the viewport. The provided example toggles a 'shown' data property.

```html
<div x-data="{ shown: false }" x-intersect="shown = true">
    <div x-show="shown" x-transition> 
        I'm in the viewport!
    </div>
</div>
```

--------------------------------

### Initialize Alpine.js and Load Scripts (JavaScript)

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/spec.html

This JavaScript function initializes Alpine.js and loads custom scripts. It expects the root element to be pre-populated with HTML. It can inject additional JavaScript via a data URI and processes existing script tags. Finally, it loads the Alpine.js CDN and sets up an event listener for 'alpine:initialized'.

```javascript
let root = document.querySelector('#root') // We aren't loading Alpine directly because we are expecting // Cypress to inject HTML into "#root", THEN we'll call // this function from Cypress to boot everything up. root.evalScripts = (extraJavaScript) => { // Load bespoke JavaScript. if (extraJavaScript) { let script = document.createElement('script') script.src = `data:text/javascript;base64,${btoa(` document.addEventListener('alpine:init', () => { ${extraJavaScript} }) `)}` root.after(script) } // Load all injected script tags. root.querySelectorAll('script').forEach(el => { eval(el.innerHTML) }) // Load Alpine. let script = document.createElement('script') script.src = '/../../packages/alpinejs/dist/cdn.js' root.after(script) document.addEventListener('alpine:initialized', () => { let readyEl = document.createElement('blockquote') readyEl.setAttribute('alpine-is-ready', true) readyEl.style.width = '1px' readyEl.style.height = '1px' document.querySelector('blockquote').after(readyEl) }) }
```

--------------------------------

### Standalone x-init Directive in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/init.md

The x-init directive can be applied to any element, whether it's inside or outside an x-data block. This example shows its usage on both nested and top-level elements.

```alpine
<div x-data>
    <span x-init="console.log('I can initialize')"></span>
</div>

<span x-init="console.log('I can initialize too')"></span>
```

--------------------------------

### Conditionally Bind Classes with x-bind

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/bind.md

Dynamically apply or remove CSS classes to an element based on Alpine state. This example toggles a 'hidden' class for a dropdown's content.

```alpine
<div x-data="{ open: false }">
    <button x-on:click="open = ! open">Toggle Dropdown</button>

    <div :class="open ? '' : 'hidden'">
        Dropdown Contents...
    </div>
</div>
```

--------------------------------

### Shorthand for x-bind Attribute Binding

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/bind.md

Utilize the shorthand ':' syntax for x-bind to reduce verbosity when binding HTML attributes. This example shows the same input placeholder binding using the shorthand.

```alpine
<input type="text" :placeholder="placeholderText">

```

--------------------------------

### Declaring Data with x-data in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/start-here.md

Illustrates how to declare reactive data within an Alpine.js component using the x-data directive. The JavaScript object defined in x-data becomes the component's state.

```html
<div x-data="{ count: 0 }">

```

--------------------------------

### Alpine.js CSP Supported Features: Method Calls

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/csp.md

Provides an example of calling methods on data properties within Alpine's CSP build. This includes array methods like `push`, enabling manipulation of data structures directly from your HTML.

```html
<div x-data="{ items: ['a', 'b'] }">
    <button x-on:click="items.push('c')">Add Item</button>
</div>
```

--------------------------------

### Apply scale transitions

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/manual-transition-test.html

Use the .scale modifier to transition element scale.

```html
x-transition.scale
```

--------------------------------

### Alpine.js x-data with Getters

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/data.md

Demonstrates the use of JavaScript getters within x-data to create computed properties. The example refactors the toggle functionality to use an 'isOpen' getter for more expressive syntax.

```html
<div x-data="{
    open: false,
    get isOpen() { return this.open },
    toggle() { this.open = ! this.open },
}">
    <button @click="toggle()">Toggle Content</button>

    <div x-show="isOpen">
        Content...
    </div>
</div>
```

--------------------------------

### Configure enter and leave transitions

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/manual-transition-test.html

Define specific enter and leave transitions with duration modifiers.

```html
x-transition:enter.opacity.duration.500ms

x-transition:leave.scale.duration.250ms
```

--------------------------------

### Set HTML Attributes with x-bind

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/bind.md

Use x-bind to dynamically set HTML attributes on elements based on JavaScript expressions. This example demonstrates setting the 'placeholder' attribute of an input element.

```alpine
<div x-data="{ placeholderText: 'Type here...' }">
    <input type="text" x-bind:placeholder="placeholderText">
</div>
```

--------------------------------

### Sortable List with Item Keys and Alert Handler

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/sort.md

Shows how to assign keys to sortable items using `x-sort:item` and trigger an alert with the item's key and new position when sorting occurs. The `$item` and `$position` magic properties are used within the handler.

```html
<ul x-sort="alert($item + ' - ' + $position)">
    <li x-sort:item="1">foo</li>
    <li x-sort:item="2">bar</li>
    <li x-sort:item="3">baz</li>
</ul>
```

```html
<div x-data>
    <ul x-sort="alert($item + ' - ' + $position)">
        <li x-sort:item="1" class="cursor-pointer">foo</li>
        <li x-sort:item="2" class="cursor-pointer">bar</li>
        <li x-sort:item="3" class="cursor-pointer">baz</li>
    </ul>
</div>
```

--------------------------------

### Alpine.js V2 vs V3: Automatic init() Evaluation

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/upgrade-guide.md

Illustrates how Alpine.js V3 automatically evaluates `init()` functions defined within an `x-data` object, removing the need for manual invocation. This simplifies component initialization compared to V2.

```html
<!-- 🚫 Before -->
<div x-data="foo()" x-init="init()"></div>

<!-- ✅ After -->
<div x-data="foo()"></div>

<script>
    function foo() {
        return {
            init() {
                //
            }
        }
    }
</script>
```

--------------------------------

### Prepare Request Headers for Livewire Uploads

Source: https://github.com/alpinejs/alpine/blob/main/benchmarks/giant.html

This snippet illustrates how to construct request headers for file uploads in a Livewire component, including fetching the CSRF token and setting the 'Accept' header. It ensures that necessary authentication and content type information is included in the request.

```javascript
let headers = {
  'X-CSRF-TOKEN': getCsrfToken(),
  'Accept': 'application/json',
}

let csrfToken = getCsrfToken()

if (csrfToken) headers['X-CSRF-TOKEN'] = csrfToken

this.makeRequest(name, formData, 'post', url, headers, response => {
  return response.paths
})
```

--------------------------------

### Alpine.js V2 vs V3: x-show.transition to x-transition

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/upgrade-guide.md

Details the transition from using `x-show.transition` in Alpine.js V2 to the unified `x-transition` directive in V3. This change consolidates transition-related attributes under a single directive for improved consistency.

```html
<!-- 🚫 Before -->
<div x-show.transition="open"></div>
<!-- ✅ After -->
<div x-show="open" x-transition></div>

<!-- 🚫 Before -->
<div x-show.transition.duration.500ms="open"></div>
<!-- ✅ After -->
<div x-show="open" x-transition.duration.500ms></div>

<!-- 🚫 Before -->
<div x-show.transition.in.duration.500ms.out.duration.750ms="open"></div>
<!-- ✅ After -->
<div
    x-show="open"
    x-transition:enter.duration.500ms
    x-transition:leave.duration.750ms
></div>
```

--------------------------------

### Alpine.js Plugin Bundle Module Export

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/advanced/extending.md

The exported structure of an Alpine.js plugin designed for NPM installation. It's a default export function that receives the Alpine instance as an argument, allowing for directive and magic registration.

```javascript
export default function (Alpine) {
    Alpine.directive('foo', ...)
    Alpine.magic('foo', ...)
}
```

--------------------------------

### Basic Collapse Functionality with x-collapse

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/collapse.md

Demonstrates the core usage of the `x-collapse` directive in conjunction with `x-show` to animate element visibility. The element smoothly collapses and expands by animating its height.

```html
<div x-data="{ expanded: false }">
    <button @click="expanded = ! expanded">Toggle Content</button>

    <div x-show="expanded" x-collapse>
        <div class="pt-4">
            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.
        </div>
    </div>
</div>
```

--------------------------------

### Customizing Collapse Duration with .duration Modifier

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/plugins/collapse.md

Shows how to control the animation speed of the collapse/expand transition using the `.duration` modifier. The example sets the transition to last 1000 milliseconds (1 second).

```html
<div x-data="{ expanded: false }">
    <button @click="expanded = ! expanded">Toggle Content</button>

    <div x-show="expanded" x-collapse.duration.1000ms>
        <div class="pt-4">
            Reprehenderit eu excepteur ullamco esse cillum reprehenderit exercitation labore non. Dolore dolore ea dolore veniam sint in sint ex Lorem ipsum. Sint laborum deserunt deserunt amet voluptate cillum deserunt. Amet nisi pariatur sit ut id. Ipsum est minim est commodo id dolor sint id quis sint Lorem.
        </div>
    </div>
</div>
```

--------------------------------

### Alpine.js Data-less and Empty x-data Components

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/data.md

Provides examples of creating Alpine.js components without initial data. It shows both the explicit empty object `{}` and the shorthand syntax of omitting the attribute value entirely.

```html
<div x-data="{}">
</div>
```

```html
<div x-data>
</div>
```

--------------------------------

### Order of Execution: init() Method vs. x-init Directive in Alpine.js

Source: https://github.com/alpinejs/alpine/blob/main/packages/docs/src/en/directives/init.md

When both an x-data object with an init() method and an x-init directive are present on the same element, the init() method is executed first, followed by the x-init directive. This ensures core data setup precedes directive logic.

```alpine
<div
    x-data="{
        init() {
            console.log('I am called first')
        }
    }"
    x-init="console.log('I am called second')"
    >
    ...
</div>
```

--------------------------------

### Handle leave transitions with click outside

Source: https://github.com/alpinejs/alpine/blob/main/tests/cypress/manual-transition-test.html

Combine x-transition:leave with @click.outside for specific exit behavior.

```html
x-transition.leave only with @click.outside
```