View Source Pinegeist (pinegeist v0.2.1-alpha)

Documentation for Pinegeist. To get started, check the Overview Guide.

Summary

Components

Renders an Alpine component.

Components

Renders an Alpine component.

Attributes

  • id (:string) (required) - Unique identifier for the island component.

Slots

  • prop - Declare a reactive data in Alpine. The value will be synchronized with the server side LiveView state. Accepts attributes:
    • name (:string) (required) - The property name of the reactive data. You can access it via $props Alpine magic.
    • value (:any) (required) - The value of the reactive data. It must be a JSON serializable value.
  • inner_block (required) - The content rendered inside the island. It will ignore LiveView DOM updates and should be managed by Alpine.

Examples

A simple counter which has a count property lives in Alpine reactive data and is synchronized with the server side LiveView state.

<.island id="counter-example">
  <:prop name="count" value={@count} />
  <div>
    count: <span x-text="$props.count"><%= @count %></span>
  </div>
</.island>