De jQuery para Alpine.js: Um Guia Prático com Laravel e Componentes Reutilizáveis

Se você vem do jQuery e quer modernizar seus projetos com Alpine.js, esse tutorial é pra você. Vamos mostrar como sair de ações comuns com jQuery e aplicá-las com Alpine.js, e no final, criar um mini projeto real com Laravel usando formulários reativos e requisições AJAX limpas.

Alpine.js vs jQuery: Conceitos Fundamentais

Alpine.js é um mini framework reativo pensado para funcionar direto no HTML, como o jQuery, mas com uma pegada declarativa e moderna.

Conceito	jQuery	Alpine.js
DOM Ready	`$(document).ready(...)`	`x-data` inicializa automaticamente
Mostrar/ocultar	`$('#id').hide()`	`x-show="visivel"`
Eventos	`$('#btn').click(...)`	`@click="acao()"`
Acesso a valores	`$('#input').val()`	`x-model="valor"`
AJAX	`$.get(...)`, `$.post(...)`	`fetch(...)`, com ou sem async/await

Exemplos Comparativos 1. Manipular formulário Jquery

$('#btn').click(() => {
    const nome = $('#nome').val();
    alert('Olá ' + nome);
});

Alpine

<div x-data="{ nome: '' }">
    <input x-model="nome" placeholder="Digite seu nome">
    <button @click="alert('Olá ' + nome)">Enviar</button>
</div>

2. AJAX (GET) jQuery

$.get('/api/usuarios', function(data) {
    console.log(data);
});

Alpine

<div x-data="{
    usuarios: [],
    async carregar() {
        const res = await fetch('/api/usuarios');
        this.usuarios = await res.json();
    }
}" x-init="carregar()">
    <ul>
        <template x-for="user in usuarios">
            <li x-text="user.nome"></li>
        </template>
    </ul>
</div>

3. POST com Alpine + Fetch

<div x-data="{
    nome: '',
    async salvar() {
        await fetch('/api/usuarios', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ nome: this.nome })
        });
    }
}">
    <input x-model="nome">
    <button @click="salvar">Salvar</button>
</div>

Agora Vamos a um mini projeto para aplicarmos na prática: Mini Projeto: Alpine.js + Laravel com Formulário Dinâmico

🧱 Estrutura

Backend: Laravel 12
Frontend: Blade + Alpine.js (separado)
Objetivo: Cadastrar e listar usuários com AJAX

1️⃣ Laravel – Migration e Controller

Migration:

php artisan make:model Usuario -m

Schema::create('usuarios', function (Blueprint $table) {
    $table->id();
    $table->string('nome');
    $table->string('email')->unique();
    $table->timestamps();
});

php artisan migrate

Controller:

public function index() {
    return Usuario::all();
}

public function store(Request $request) {
    $dados = $request->validate([
        'nome' => 'required',
        'email' => 'required|email|unique:usuarios',
    ]);

    return Usuario::create($dados);
}

Rotas (API):

Route::get('/usuarios', [UsuarioController::class, 'index']);
Route::post('/usuarios', [UsuarioController::class, 'store']);

2️⃣ Alpine.js – Componente externo

resources/js/components/usuarioForm.js:

export default function usuarioForm() {
    return {
        form: { nome: '', email: '' },
        usuarios: [],
        mensagem: '',
        async salvar() {
            const res = await fetch('/api/usuarios', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                },
                body: JSON.stringify(this.form)
            });
            this.mensagem = 'Usuário cadastrado com sucesso!';
            this.form.nome = '';
            this.form.email = '';
            this.carregar();
        },
        async carregar() {
            const res = await fetch('/api/usuarios');
            this.usuarios = await res.json();
        },
        init() {
            this.carregar();
        }
    }
}

3️⃣ Alpine + Vite

resources/js/app.js:

import Alpine from 'alpinejs';
import usuarioForm from './components/usuarioForm';

window.Alpine = Alpine;
Alpine.data('usuarioForm', usuarioForm);

Alpine.start();

4️⃣ Blade com Alpine.js

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Usuários</title>
    @vite('resources/js/app.js')
</head>
<body>

<div x-data="usuarioForm">
    <form @submit.prevent="salvar">
        <input x-model="form.nome" placeholder="Nome">
        <input x-model="form.email" placeholder="Email">
        <button type="submit">Salvar</button>
    </form>

    <div x-text="mensagem" x-show="mensagem"></div>

    <h3>Usuários:</h3>
    <ul>
        <template x-for="u in usuarios" :key="u.id">
            <li><strong x-text="u.nome"></strong> - <span x-text="u.email"></span></li>
        </template>
    </ul>
</div>

</body>
</html>

Conclusão

Se você já domina jQuery, Alpine.js é o passo natural para criar interfaces mais modernas, reativas e organizadas, sem sair do Blade e sem complicações como Vue ou React.

Com Alpine, você ganha:

Reatividade nativa no HTML
Menos código JS separado
Facilidade para integrar com Laravel e Livewire
Menor curva de aprendizado vindo do jQuery

De jQuery para Alpine.js: Um Guia Prático com Laravel e Componentes Reutilizáveis

Alpine.js vs jQuery: Conceitos Fundamentais

🧱 Estrutura

1️⃣ Laravel – Migration e Controller

Conclusão

Comentários (0)

Continue lendo

Manipulando dados de arrays com o método 'pluck' em coleções do Laravel

Como instalar o Go Language no Ubuntu ?