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 100 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.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.
Security News
TypeScript Native Previews offers a 10x faster Go-based compiler, now available on npm for public testing with early editor and language support.
Research
Security News
Malicious npm packages targeting React, Vue, Vite, Node.js, and Quill remained undetected for two years while deploying destructive payloads.