main.js

script.
import { reactive } from 'alpinejs';
import { createRef } from 'daisyui';

const app = reactive({
 template: '<article class="prose"><h2>New Article</h2><p>{{ generateArticles }}</p></article>',
 generateArticles() {
 const article = document.createElement('article');
 article.classList.add('prose');
 const h2 = document.createElement('h2');
 h2.textContent = 'New Article';
 article.appendChild(h2);
 const p = document.createElement('p');
 p.textContent = 'Loading articles...';
 article.appendChild(p);
 createRef(p, {
 text: 'Loading articles...',
 state: 'loading',
 });
 document.getElementById('article-section').appendChild(article);
 },
});

createRef(document.getElementById('article-section'), {
 text: '',
 state: 'ready',
});

document.addEventListener('DOMContentLoaded', () => {
 app.generateArticles();
});