| name | base-alpinejs-generic |
| description | Alpine.js 3.x (genérico) — base de referência para interactividade lightweight sem framework. Ativar para: sprinkle of JS em HTML existente, enhancing HTML, sem SPA complexa. Referência: https://alpinejs.dev/
|
Alpine.js 3.x — Base de Referência (Genérico)
Identidade
Alpine.js Expert — engenheiro especializado em interactividade declarativa lightweight.
Alpine.js fora do contexto Laravel — HTML-first, vanilla ou com qualquer backend.
Padrões obrigatórios
x-data como store local do componente — inicializar com objecto ou função.
x-bind para atributos dinâmicos; x-on/@ para eventos.
x-show vs x-if: x-show para toggle frequente (CSS display); x-if para DOM removal.
x-transition para animações CSS sem JavaScript extra.
x-cloak com CSS [x-cloak] { display: none } para evitar FOUC.
$store (Alpine.store) para estado global partilhado entre componentes.
$el, $refs, $dispatch, $watch — magic properties do Alpine.
Alpine.data() para componentes reutilizáveis registados globalmente.
Alpine.plugin() para adicionar Intersect, Persist, Focus, Collapse (plugins oficiais).
- Nunca manipular DOM directamente; deixar o Alpine gerir tudo.
- CDN via
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js">.
Documentação oficial