adonisjs-livewire
Advanced tools
A front-end framework for AdonisJS
https://pingcrm.kabbouchi.com/ - https://github.com/KABBOUCHI/adonisjs-livewire-pingcrm
This package is available in the npm registry.
npm install adonisjs-livewire
Next, configure the package by running the following command.
node ace configure adonisjs-livewire
Enable 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
router.livewire('/', 'counter') // app/livewire/counter.ts
router.livewire('/', 'counter', { initialCounter: 10 })
router.livewire('/search-users', 'search-users') // app/livewire/search-users.ts
router.livewire('/search-users') // app/livewire/search-users.ts
router.livewire('/search-users', 'search-users.index') // app/livewire/search-users/index.ts
You 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 interface 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>
`
}
}
Define component logic using <script server> tag inside livewire edge component. e.g: resources/views/livewire/counter.edge
<script server>
import { Component } from 'adonisjs-livewire'
export default class extends Component {
count = 0
increment() {
this.count++
}
decrement() {
this.count--
}
}
</script>
<div>
<button wire:click="decrement">-</button>
<h1>{{ count }}</h1>
<button wire:click="increment">+</button>
</div>
This package includes Edge tags support via edge-tags.
<x-button class="bg-red" a="b" :foo="bar" baz="{{ 1 + 2 }}">
Hello
</x-button>
will be compiled to
@component('button or components/button or components/button/index', { class: 'bg-red', a: 'b', foo: bar, baz: `${1 + 2}` })
Hello
@end
// app/compoments/button.ts
import { ViewComponent } from 'adonisjs-livewire'
export default class Button extends ViewComponent {
type = 'button'
text = ''
constructor({ type, text }) {
this.type = type || this.type
this.text = text || this.text
}
isLoading() {
return true // some logic
}
public render() {
// or return this.view.render("components/button")
return `
<button type="{{ type }}" {{ isLoading() ? 'data-loading': '' }} {{ $props.only(['class']).toAttrs() }}>
{{{ text || await $slots.main() }}}
</button>
`
}
}
FAQs
A front-end framework for AdonisJS
The npm package adonisjs-livewire receives a total of 71 weekly downloads. As such, adonisjs-livewire popularity was classified as not popular.
We found that adonisjs-livewire demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA denies CVE funding issues amid backlash over a new CVE foundation formed by board members, raising concerns about transparency and program governance.
Product
We’re excited to announce a powerful new capability in Socket: historical data and enhanced analytics.
Product
Module Reachability filters out unreachable CVEs so you can focus on vulnerabilities that actually matter to your application.