Alpine.js Integration

Chorus provides a lightweight Alpine.js plugin with magic methods for building real-time, reactive applications with minimal JavaScript.

Setup

Using the Blade Directive (Recommended)

Add the @chorus directive to your layout:

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html>
<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @chorus
</head>
<body>
    <!-- Your content -->
</body>
</html>

Initialize Alpine with the Chorus plugin:

// resources/js/app.js
import Alpine from 'alpinejs'
import chorus from '@pixelsprout/chorus-alpine'

window.Alpine = Alpine
Alpine.plugin(chorus)
Alpine.start()

Configuration options:

@chorus([
    'debugMode' => config('app.debug'),
    'endpoint' => '/api/custom',
    'websocketUrl' => 'ws://localhost:8080'
])

Manual Initialization

For more control, initialize manually:

document.addEventListener('alpine:init', async () => {
  await Alpine.magic('chorus')().init({
    userId: 1,
    debugMode: true
  })
})

Magic Methods

$table(tableName)

Returns a reactive array that automatically updates in real-time:

<div x-data="{ users: $table('users') }">
  <ul>
    <template x-for="user in users" :key="user.id">
      <li x-text="user.name"></li>
    </template>
  </ul>
</div>

$chorus

Access the Chorus instance:

$chorus.instance - The underlying ChorusCore instance
$chorus.init(config) - Initialize or reconfigure Chorus
$chorus.isInitialized - Check initialization status

Usage Examples

Filtered Data with Computed Properties

<div x-data="{
  users: $table('users'),
  search: '',

  get filteredUsers() {
    return this.users.filter(user =>
      user.name.toLowerCase().includes(this.search.toLowerCase())
    )
  }
}">
  <input x-model="search" placeholder="Search users...">

  <template x-for="user in filteredUsers" :key="user.id">
    <div x-text="user.name"></div>
  </template>
</div>

Multiple Tables

<div x-data="{
  users: $table('users'),
  posts: $table('posts')
}">
  <h2>Users: <span x-text="users.length"></span></h2>
  <h2>Posts: <span x-text="posts.length"></span></h2>
</div>

Configuration

Blade directive options:

@chorus([
    'debugMode' => config('app.debug'),
    'endpoint' => '/api',
    'websocketUrl' => 'ws://localhost:8080'
])

Manual init options:

await $chorus.init({
  userId: 1,
  debugMode: true,
  onRejectedHarmonic: (harmonic) => console.error(harmonic),
  onSchemaVersionChange: (oldVer, newVer) => console.log('Schema updated')
})

TypeScript Support

Import types for magic method auto-completion:

import '@pixelsprout/chorus-alpine/types'

Next Steps

React Integration

Learn about React hooks and patterns

Vue Integration

Explore Vue composables and components

Chorus Actions

Master server-side write operations

Core Concepts

Understand how Chorus works under the hood

Overview

Integrations

Core Concepts

Advanced

Setup

Using the Blade Directive (Recommended)

Manual Initialization

Magic Methods

$table(tableName)

$chorus

Usage Examples

Filtered Data with Computed Properties

Multiple Tables

Configuration

TypeScript Support

Next Steps

React Integration

Vue Integration

Chorus Actions

Core Concepts

​Setup

​Using the Blade Directive (Recommended)

​Manual Initialization

​Magic Methods

​$table(tableName)

​$chorus

​Usage Examples

​Filtered Data with Computed Properties

​Multiple Tables

​Configuration

​TypeScript Support

​Next Steps

React Integration

Vue Integration

Chorus Actions

Core Concepts

Setup

Using the Blade Directive (Recommended)

Manual Initialization

Magic Methods

$table(tableName)

$chorus

Usage Examples

Filtered Data with Computed Properties

Multiple Tables

Configuration

TypeScript Support

Next Steps