Edge components v2
Edge components is a components library for Edge template engine 6 and AdonisJS 6.
This notably facilitates the use of forms.
For AdonisJS 5 please use version 1.
Dependencies
This package require Edge 6, Tailwind with DaisyUi and Alpine (optional)
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
Tailwind setup
On your project directory, install the dependencies:
https://tailwindcss.com/docs/guides/adonisjs
# install dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
# create postcss config file
touch postcss.config.js
# create tailwind config file
npx tailwindcss init
Set the postcss.config.js.
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
Also, make tailwind configs minumum in tailwind.config.js
/** @type {import('tailwindcss').Config} */
import edgeComponent from '@jrmc/edge-components/tailwind.config'
module.exports = {
content: ['./resources/views/**/*.edge', ...edgeComponent.content],
plugins: [...edgeComponent.plugins],
}
add css base in resources/css/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
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()