Show Menu
Cheatography
  1. Home >
  2. Programming >

Alpine Cheat Sheet (DRAFT) by

This is a test.fddsfdsafdsa

This is a draft cheat sheet. It is a work in progress and is not finished yet.

x-data

<div x-data="{ open: false }"></div>

Scope

<div x-data="{ 
     name: 'Christine', 
     age:47 
}">
    <span x-text="name">
      <!-- Outputs: "Christine" -->
    </span>
 
    <div x-data="{ name: 'Lewis' }">
        <span x-text="name">
          <!-- Outputs: "Lewis" -->
        </span>
         <span x-text="age">
          <!-- Outputs: 47 -->
        </span>
      </div>
</div>

Methods

<div x-data="{ 
   open: false, 
   toggle() { this.open = ! this.open } 
}">
    <button @click="toggle()">
      Toggle Content
    </button>
 
    <div x-show="open">
        Content...
    </div>
</div>
You can leave off the parent­hesis
@click­="to­ggl­e"

Getters

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

Data-less Components

<div x-data="{}">
<div x-data>

Single Element Components

<button x-data="{ 
    open: true 
}" @click="open = false" x-show="open">
    Hide Me
</button>

Re-usable Data

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

Re-usable Data

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