Explicação sobre os kits iniciais do Laravel 12: React, Vue e Livewire

Ao iniciar um novo projeto no Laravel, você não precisa criar tudo do zero. O Laravel oferece kits iniciais. Eles cuidam dos fundamentos, como rotas, controladores, autenticação e código padrão para a estrutura do front-end.

Com Laravel 12, esses kits iniciais foram modernizados para oferecer suporte a duas das opções de front-end mais populares atualmente para aplicativos JavaScript de página única: React e Vue, além de oferecer a opção de usar a abordagem mais simples com modelos Blade, juntamente com o Livewire . Cada um desses kits iniciais adota uma abordagem ligeiramente diferente para a criação do seu aplicativo:

• React se você preferir desenvolver com uma abordagem mais baseada em componentes

• Vue se você preferir algo mais parecido com o JavaScript tradicional (sem JSX, por exemplo)

• Livewire se você preferir manter tudo basicamente em PHP e Blade, sem usar muito JavaScript

Nesta postagem, vamos analisar o que cada kit oferece, como eles se diferenciam e qual deles é a melhor opção para o seu próximo projeto em Laravel 12.

Kit Inicial do React

Se você estiver desenvolvendo um aplicativo web altamente interativo, como Trello, Slackou GitHub, e aproveite o trabalho com componentes de interface do usuário reutilizáveis, o kit inicial do React é a escolha ideal. No React, esses elementos são chamados de componentes, blocos de construção independentes que podem gerenciar seu próprio estado, receber dados de componentes pai e ser reutilizados em todo o seu aplicativo.

O kit de introdução utiliza o Inertia.js para conectar o React às rotas e controladores do Laravel. Em termos simples, você aproveita os benefícios da integração entre o back-end e o front-end. O Laravel cuida de toda a lógica do back-end, incluindo roteamento, autenticação e operações de banco de dados. Já o React cuida do front-end interativo, permitindo que suas páginas sejam atualizadas automaticamente sem precisar recarregar a página inteira. Você não precisa criar uma API personalizada, o que torna tudo mais simples e rápido. Além disso, o kit vem com TypeScript para segurança de tipos, TailwindCSS para estilização rápida e shadcn/ui para componentes de interface do usuário pré-construídos. Isso oferece a você uma base sólida e flexível para criar interfaces do usuário responsivas.

Layouts e variantes

Depois de instalar o kit inicial do React, a maior parte do seu código front-end fica em resources/js. Por padrão, seu aplicativo usa um layout com barra lateral, mas você pode facilmente mudar para um layout com cabeçalho alterando a importação no início do arquivo resources/js/layouts/app-layout.tsx.

O próprio layout da barra lateral tem três variantes: o padrão, “inset” e “floating”. Você pode escolher a que melhor se adapta ao seu aplicativo atualizando o variant prop em resources/js/components/app-sidebar.tsx.

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

As variantes de layout da página de autenticação, como login, cadastro e redefinição de senha, oferecem três opções de layout: simples, em cartões e dividido. 

Você pode alternar facilmente entre elas atualizando a importação na parte superior de resources/js/layouts/auth-layout.tsx. 

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Kit Inicial do Vue

Se você quer um front-end que seja flexível e fácil de trabalhar, o kit inicial do Vue é uma escolha segura. Mais uma vez, ele usa o o Inertia.js para conectar o Vue às rotas e controladores do Laravel, permitindo que você crie páginas interativas que parecem um aplicativo de página única sem precisar de uma API personalizada. Isso significa que você conta com os recursos reativos do front-end do Vue, enquanto o Laravel cuida de toda a lógica do back-end.

O kit vem com o Vue 3 API de Composição, TypeScript para um código mais seguro, TailwindCSS para estilização rápida e o shadcn/ui para componentes de interface do usuário reutilizáveis. Juntos, eles oferecem uma configuração organizada que torna a criação de interfaces responsivas simples e flexível.

Layouts e variantes

A maior parte do código front-end do Vue está localizada em resources/js, organizado de forma a facilitar a localização e a personalização de componentes, páginas, layouts e hooks. Por padrão, o aplicativo usa um layout com barra lateral, mas você pode mudar para um layout com cabeçalho alterando a importação no início de resources/js/layouts/AppLayout.vue:

import AppLayout from '@/layouts/app/AppSidebarLayout.vue'

import AppLayout from '@/layouts/app/AppHeaderLayout.vue'

O layout da barra lateral oferece três variantes: padrão, recuada e flutuante. Você pode escolher a que melhor se adequar atualizando o variant prop em resources/js/components/AppSidebar.vue:

<

<Sidebar collapsible="icon" variant="sidebar">

<Sidebar collapsible="icon" variant="inset">

As páginas de autenticação — como login, cadastro e redefinição de senha — também têm três opções de layout: simples, em cartões e dividido. Para alternar entre elas, basta atualizar a importação na parte superior de resources/js/layouts/AuthLayout.vue:

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue'

Assim como no React, os componentes são reutilizáveis; portanto, alterar layouts ou elementos da interface do usuário não exige reescrever as páginas.

Kit Inicial Livewire

Se você preferir uma abordagem mais tradicional Model-View-Controller para seu front-end, utilizando o mecanismo de modelos Blade do Laravel, o kit inicial do Livewire é uma boa opção. O Livewire traz um toque de magia aos seus modelos, pois renderiza seu JavaScript de acordo com Componentes do Laravel Livewire (essencialmente um controlador com estado e um conjunto integrado de métodos de API para instruir o DOM sobre quando atualizar). Isso mantém seu código mais simples, ao mesmo tempo em que permite que suas páginas respondam às interações do usuário em tempo real. O kit também inclui TailwindCSS para estilização e a biblioteca de componentes Flux UI para elementos de interface reutilizáveis.

A maior parte do código do front-end está em resources/views, enquanto a lógica de back-end para os componentes do Livewire está em app/Livewire. Você encontrará componentes Blade reutilizáveis, componentes Flux, componentes Livewire específicos para cada página e partials, todos organizados de forma que você possa modificá-los ou ampliá-los facilmente.

Layouts e variantes

O kit inicial do Livewire vem com dois layouts principais: barra lateral (padrão) e cabeçalho. Você pode alternar entre eles atualizando o componente Blade usado em resources/views/components/layouts/app.blade.php:

<x-layouts.app.header>

    <flux:main container>

        {{ $slot }}

    </flux:main>

</x-layouts.app.header>

As páginas de autenticação (login, cadastro e redefinição de senha) também oferecem três opções de layout: simples, em cartões e dividido. Para alternar entre elas, basta alterar o componente Blade em resources/views/components/layouts/auth.blade.php:

<x-layouts.auth.split>

    {{ $slot }}

</x-layouts.auth.split>

Assim como o React e o Vue, os componentes reutilizáveis e os layouts modulares do Livewire facilitam a experimentação de diferentes estilos, sem a necessidade de reescrever suas páginas do zero.

Conclusão

Os kits iniciais do Laravel 12 oferecem uma base sólida, independentemente do front-end que você escolher. O React é ideal para aplicativos de página única completos, o Vue é flexível e fácil de usar para iniciantes, e o Livewire mantém a maior parte do código em PHP e Blade, ao mesmo tempo em que oferece suporte a interfaces dinâmicas e reativas. Todos os três kits incluem componentes reutilizáveis, layouts modulares e estilos integrados, facilitando a experimentação de designs sem a necessidade de reescrever páginas. Para quem realmente não gostam de escrever código front-end e optaram pelo Livewire, também é possível adicionar Laravel Echo e Reverb para iniciar seus próprios servidores WebSocket!

Se você está apenas começando com o Laravel, há muitos recursos disponíveis voltados para iniciantes. Ouça os membros da comunidade Laravel compartilhando suas recomendações favoritas.