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