Laravel Vite

Tempo de leitura: 4 minutos

Laravel Vite: A integração do Vite com o Laravel 12 representa um salto de performance no desenvolvimento front-end. O Vite, um build tool de última geração, utiliza módulos ES nativos e o recurso Hot Module Replacement (HMR), eliminando os lentos tempos de build e recarregamento associados a ferramentas mais antigas como o Webpack.

A combinação Laravel Vite oferece uma experiência de desenvolvimento instantânea e otimizada.

1. ⚡ O Que é o Vite e a Vantagem dos ES Modules

O Vite (que significa “rápido” em francês) é um servidor de desenvolvimento que explora a capacidade nativa dos navegadores de carregar módulos JavaScript (<script type="module">).

Performance vs. Bundlers Tradicionais

Característica	Vite	Webpack/Mix
Serviço de Módulos	Módulos ES Nativos (sem bundling inicial).	Compila e agrupa todo o código (bundling).
Velocidade de Inicialização	Instantânea.	Lenta, pois exige build completo.
HMR	Rápido (atualiza apenas o módulo alterado).	Mais lento (pode exigir reavaliação de mais código).

Hot Module Replacement (HMR)

O HMR é a principal vantagem do Vite. Ao salvar uma alteração em um arquivo CSS ou JavaScript, o Vite injeta o código atualizado sem recarregar a página e, crucialmente, sem perder o estado atual da aplicação (ex: o estado de um componente React ou Vue).

2. 🧩 Configuração Básica no Laravel

O Laravel 12 facilita a adoção do Vite através do pacote laravel-vite-plugin, que resolve automaticamente a complexa comunicação entre o servidor PHP (Laravel) e o servidor de desenvolvimento Vite (Node.js).

Passo 1: Instalação e Configuração

Assumindo que você já tem um projeto Laravel, instale o plugin e as dependências:

Bash

npm install 
npm install -D laravel-vite-plugin # Geralmente já vem instalado em projetos novos

Passo 2: O Arquivo `vite.config.js`

Edite o arquivo vite.config.js na raiz do projeto. Ele instrui o Vite a quais arquivos de entry point (entrada) ele deve observar.

JavaScript

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            // Lista de arquivos CSS e JS que o Vite deve observar e compilar
            input: [
                'resources/css/app.css', 
                'resources/js/app.js'
            ],
            // Habilita o HMR no Laravel (necessário para Vue/React)
            refresh: true, 
        }),
    ],
});

Passo 3: Inclusão na View Blade

Para conectar o Laravel ao Vite, você deve usar as diretivas Blade @vite e @viteAssets dentro da View principal (geralmente layouts/app.blade.php).

HTML

<html>
<head>
    @vite('resources/css/app.css')
</head>
<body>
    @vite('resources/js/app.js') 
</body>
</html>

3. 🏃 Rodando e Compilando

A. Modo de Desenvolvimento (HMR)

Execute o comando de dev para iniciar o servidor Vite, que observará alterações e ativará o HMR.

Bash

npm run dev

Atenção: Mantenha este comando rodando em um terminal, enquanto o servidor PHP (php artisan serve) roda em outro.

B. Build para Produção

Para otimizar e gerar os arquivos finais para deploy, o Vite gera bundles minificados e com hash no nome para cacheamento eficiente.

Bash

npm run build

O build gerará um manifesto (public/build/manifest.json) que o Laravel usa para mapear o nome do arquivo de entry point (app.js) para o nome final com hash (ex: app-f039a7b.js).

4. 🌐 Integração com Frameworks Front-end

O Vite se destaca por sua fácil integração com frameworks de front-end modernos, exigindo apenas a instalação e configuração de plugins específicos:

Framework	Comando de Instalação	Exemplo de Uso em vite.config.js
Vue	`npm install -D @vitejs/plugin-vue`	`import vue from '@vitejs/plugin-vue';`
React	`npm install -D @vitejs/plugin-react`	`import react from '@vitejs/plugin-react';`

✅ Conclusão Laravel Vite

Laravel Vite: A união do Laravel 12 com o Vite é a melhor escolha atual para build tools. Ele elimina o overhead de bundlers tradicionais, oferecendo tempos de recarga instantâneos via HMR e um processo de build otimizado para produção. Ao configurar o laravel-vite-plugin e usar a diretiva @vite nas suas Views, você garante um fluxo de trabalho rápido e moderno.

Mas antes de dominar o Laravel, se for o seu caso, toda jornada tem um início. Vamos entender quais são os conhecimentos básicos necessários para aproveitar ao máximo este poderoso framework. Para iniciar seus estudos no Laravel, você precisará dominar as seguintes tecnologias: