> ## Documentation Index
> Fetch the complete documentation index at: https://chorus.pixelsprout.dev/llms.txt
> Use this file to discover all available pages before exploring further.
# Alpine.js Integration
> Integrate Laravel Chorus with Alpine.js for real-time, reactive applications.
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:
```html theme={null}
@vite(['resources/css/app.css', 'resources/js/app.js'])
@chorus
```
Initialize Alpine with the Chorus plugin:
```javascript theme={null}
// resources/js/app.js
import Alpine from 'alpinejs'
import chorus from '@pixelsprout/chorus-alpine'
window.Alpine = Alpine
Alpine.plugin(chorus)
Alpine.start()
```
**Configuration options:**
```php theme={null}
@chorus([
'debugMode' => config('app.debug'),
'endpoint' => '/api/custom',
'websocketUrl' => 'ws://localhost:8080'
])
```
### Manual Initialization
For more control, initialize manually:
```javascript theme={null}
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:
```html theme={null}
```
### \$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
```html theme={null}
```
### Multiple Tables
```html theme={null}
Users:
Posts:
```
## Configuration
**Blade directive options:**
```php theme={null}
@chorus([
'debugMode' => config('app.debug'),
'endpoint' => '/api',
'websocketUrl' => 'ws://localhost:8080'
])
```
**Manual init options:**
```javascript theme={null}
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:
```typescript theme={null}
import '@pixelsprout/chorus-alpine/types'
```
## Next Steps
Learn about React hooks and patterns
Explore Vue composables and components
Master server-side write operations
Understand how Chorus works under the hood