Sign In Sign Up

AdonisJS / Components

EdgeJS has fantastic support for components, which features support for state, props, slots, slot scopes, and data injection. Components allow you to define markup or functionality once, and use it throughout your app.

Components Series

EdgeJS Components

In this series, we'll take a deep dive into EdgeJS Components by creating our own reusable components from the PinesUI component library, built with TailwindCSS and ApineJS.

Recently Released on Components

Adding Conditional Content

Adding Conditional Icon, Headline, and Message Content

Adding Alert Variants

Adding Alert Variants

Creating Our Base alert

Creating Our Base Alert

Button Inverse and Outline Styles

Adding Button Inverse and Outline Styles

Adding Button Variants

Adding Button Variants

Adding Button Sizes

Adding Button Size Options

Adding Interactivity to our Button

Adding Interactivity to our Button

Base Button

Creating Our Base Button

Main Slot, Named Slots, and Slot Scope

Main Slot, Named Slots, and Slot Scopes

Serialize Props as Attributes

Serializing Props as Element Attributes

Component Props & Default State

Component Props and Default State

EdgeJS and AlpineJS State

Component State & Passing State from EdgeJS to ApineJS

A Look at Component Reactivity

A Look At Component Reactivity

Dynamic Demo Routes

Dynamic Demo Routes for Components

Structure and Component Layouts

View Structure and Component-Based Layouts

Installing AlpineJS and TailwindCSS

Getting Started, Installing AlpineJS and TailwindCSS

exploring edgejs-components

Exploring EdgeJS' Component System

Method Spoofing HTML Forms

Http Method Spoofing & Helper Components in AdonisJS