Edge components v3

Edge components is a components library for Edge template engine 6 and AdonisJS 6.
This notably facilitates the use of forms.

Dependencies

This package require Edge 6, tailwindcss 4 with daisyUI 5 and Alpine (optional)

For AdonisJS 6 with tailwindcss 3, daisyUI 4 please use version 2.

For AdonisJS 5 with tailwindcss 2, daisyUI 3 please use version 1.

Setup

The first step is to install the package from the npm registry.

npm i @jrmc/edge-components

The next step is to register an Edge plugin.

node ace configure @jrmc/edge-components

Tailwindcss and daisyUI setup

On your project directory, install the dependencies:
https://tailwindcss.com/docs/guides/adonisjs

# install dependencies
npm install -D tailwindcss @tailwindcss/vite daisyui

Also, make tailwind configs in your vite.config.js

import { defineConfig } from 'vite'
import adonisjs from '@adonisjs/vite/client'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  plugins: [
    tailwindcss(),
    adonisjs({
      /**
       * Entrypoints of your application. Each entrypoint will
       * result in a separate bundle.
       */
      entrypoints: ['resources/js/app.js'],

      /**
       * Paths to watch and reload the browser on file change
       */
      reload: ['resources/views/**/*.edge'],
    }),
  ],
})

add css base in resources/css/app.css

@import 'tailwindcss';


@source "../../node_modules/@jrmc/edge-components/views";
@source "../views/**/*.edge";

@plugin "daisyui";

Alpine setup (optional)

npm i -D alpinejs

In AdonisJS, you can write the following code block inside the resources/js/app.js file.

import Alpine from 'alpinejs'
Alpine.start()