This package is available in the npm registry.
npm install adonisjs-livewireNext, configure the package by running the following command.
node ace configure adonisjs-livewireEnable ALS in config/app.ts https://docs.adonisjs.com/guides/async-local-storage#usage
// config/app.ts
export const http: ServerConfig = {
useAsyncLocalStorage: true,
}now you can use this.ctx in your Livewire components.
node ace make:livewire Counter
# or
node ace make:livewire Counter --inline// views/welcome.edge
<!DOCTYPE html>
<html lang="en">
<head>
@livewireStyles
</head>
<body>
@livewire('counter') or @livewire('Counter') or <livewire:counter />
@livewire('search-users') or @livewire('SearchUsers') or <livewire:search-users />
@livewireScripts
</body>
</html>Create layout file
node ace livewire:layout
node ace livewire:layout <name>Add routes
// start/routes.ts
Route.livewire('/', 'Counter') // App/Livewire/Counter.ts
Route.livewire('/', 'counter', { initialCounter: 10 })
Route.livewire('/search-users', 'search-users') // App/Livewire/SearchUsers.ts
Route.livewire('/search-users') // App/Livewire/SearchUsers.ts
Route.livewire('/search-users', 'search-users.index') // App/Livewire/SearchUsers/Index.tsYou may manually register components using the Livewire::component method. This can be useful if you want to provide Livewire components from a composer package. Typically this should be done in the ready method of a service provider.
import type { ApplicationService } from '@adonisjs/core/types'
import { Component } from 'adonisjs-livewire'
export default class AppProvider {
constructor(protected app: ApplicationService) {}
public async ready() {
const Livewire = await this.app.container.make('livewire')
Livewire.component(
'custom-component',
class extends Component {
public title = ''
public mount({ title }) {
this.title = title
}
async render() {
return '<div>{{ title }}</div>'
}
}
)
}
}Now, applications with your package installed can consume your component in their views like so:
@livewire('custom-component', {
title: 'My Component'
})
// or
<livewire:custom-component title="My Component" />// app/livewire_mixins/my_mixin.ts
import { Component } from 'adonisjs-livewire'
export MyMixin extends Component {}
export class MyMixin {
public foo = 'bar'
public baz() {
return 'baz'
}
}
// or (not recommended)
export class MyMixin extends Component {
public foo = 'bar'
public baz() {
return 'baz'
}
}// app/Livewire/Counter.ts
import { Component, Mixin } from 'adonisjs-livewire'
import MyMixin from '#app/livewire_mixins/my_mixin'
export default class Counter extends Mixin(Component, MyMixin) {
public count = 0
public increment() {
this.count++
}
public decrement() {
this.count--
}
public render() {
return `
<div>
<button wire:click="increment">+</button>
<h1>{{ count }}</h1>
<button wire:click="decrement">-</button>
<h2>{{ foo }}</h2>
<h3>{{ baz() }}</h3>
</div>
`
}
}