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()