Intento implementar Alpine JS dentro de una página existente.
Para eso, estoy usando la versión CDN de Alpine, que estoy cargando dentro de mi <head> :
<script defer src="https://unpkg.com/alpinejs@3.xx/dist/cdn.min.js"></script>
Ahora intento acceder a Alpine desde un archivo custom.js, que se carga automáticamente en el pie de página de mi página:
Alpine.magic('post', function () { return function (url, data = {}) { return fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, redirect: 'follow', body: JSON.stringify(data) }); } });Dentro de mi contenido probé esto:
<div x-data> <h1>Alpine Test</h1> <button type="button" @click="$post('/api/users', { name: 'John Doe' })">Add user</button> </div>Al hacer clic en el botón, se produce este error:
Uncaught ReferenceError: $post is not definedTambién lo he probado con window.Alpine, sin éxito.
¿Cómo puedo agregar propiedades mágicas y cosas así sin usar módulos?
Cuando utiliza el atributo aplazar, el navegador ejecuta el script después del análisis del documento. También debe agregar el atributo defer al script custom.js , o incrustar la definición mágica dentro de un bloque detector de eventos alpine:init :
document.addEventListener('alpine:init', () => { Alpine.magic('post', function () { return function (url, data = {}) { return fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json' }, redirect: 'follow', body: JSON.stringify(data) }); } }); })Esto garantiza que la definición mágica ocurra solo después de que el núcleo de Alpine.js esté listo.