Quando falamos sobre desenvolvimento de aplicações web modernas, é quase impossível ignorar a crescente popularidade de interfaces dinâmicas. Com o Laravel, Vue.js e Inertia.js, você pode criar aplicações poderosas e reativas, proporcionando uma experiência de usuário fluida, semelhante a uma SPA (Single Page Application), sem a complexidade de APIs REST tradicionais. Neste artigo, vamos explorar como integrar Vue.js e Inertia.js no Laravel, utilizando o pacote Laravel Breeze como ponto de partida.

O que é o Inertia.js?

Inertia.js é uma biblioteca que facilita a construção de SPAs sem a necessidade de uma API externa. Ele permite que você utilize seu framework front-end favorito, como Vue.js ou React, junto com o Laravel para manipular rotas, renderizar componentes e compartilhar dados, tudo sem a necessidade de recarregar a página.

Com o Inertia.js, o back-end continua responsável por gerar respostas HTTP, enquanto o front-end se comporta como uma SPA. O resultado é uma aplicação moderna com roteamento no lado do servidor, mas com a experiência fluida que esperamos de aplicações JavaScript.

Instalando Laravel Breeze

O Laravel Breeze é um pacote de autenticação simples e minimalista, perfeito para configurar rapidamente a autenticação em aplicações Laravel. Além disso, o Breeze possui suporte nativo ao Inertia.js e Vue.js, facilitando ainda mais o processo de criar uma aplicação moderna e dinâmica.

Vamos seguir os passos para instalar e configurar o Laravel Breeze com Inertia.js e Vue.js.

1-Configurando um Projeto Laravel

Se você ainda não tem o Laravel instalado, pode iniciar um novo projeto executando:

composer create-project laravel/laravel minha-aplicacao
 

usado docker sail:

curl -s https://laravel.build/example-app | bash
Qualquer dúvida vou deixar a documentação do docker sail

documentação docker sail

Agora, entre no diretório do seu projeto:

cd minha-aplicacao

3- Instalando o Breeze com Inertia.js

Para instalar o Laravel Breeze, basta rodar o seguinte comando:

composer require laravel/breeze --dev

Depois, para instalar o scaffolding (estrutura básica) com Vue.js e Inertia.js, utilize o comando:

php artisan breeze:install 

Depois escolha a opção Vue with InertiaSSR

Esse comando irá configurar automaticamente o Vue.js e o Inertia.js em seu projeto, incluindo as dependências necessárias e as rotas de autenticação padrão.

Instalando as Dependências do Front-end

npm install
npm run dev

4 -Migrando o Banco de Dados

O Breeze cria algumas tabelas de autenticação no banco de dados, então vamos rodar as migrações para aplicar essas mudanças:

php artisan migrate

Agora, sua aplicação Laravel já está configurada com autenticação básica e utilizando Vue.js com Inertia.js.

5 -Explorando a Estrutura

Após instalar o Breeze com o Inertia.js, a estrutura da sua aplicação front-end será gerada dentro do diretório resources/js/. O Vue.js gerenciará os componentes, enquanto o Inertia.js lida com a navegação entre as páginas sem recarregar o navegador.

• Componentes Vue.js: Todos os componentes Vue.js estarão dentro da pasta resources/js/Pages/. Cada página da sua aplicação é, essencialmente, um componente Vue.
• Roteamento Inertia: O Inertia.js intercepta as solicitações de rota e renderiza os componentes Vue, fornecendo uma experiência de navegação dinâmica.

Conclusão:

Ao integrar Vue.js e Inertia.js no Laravel, você transforma sua aplicação em uma plataforma dinâmica e altamente interativa, proporcionando uma experiência moderna para os usuários. O Laravel Breeze é uma excelente ferramenta para configurar rapidamente essa integração, economizando tempo na construção de funcionalidades básicas de autenticação e SPA.

Com o Inertia.js, você pode desfrutar de uma arquitetura mais simples, sem perder as vantagens de uma SPA. Isso torna o desenvolvimento web muito mais ágil e permite focar no que realmente importa: construir interfaces dinâmicas que encantem seus usuários.

Aproveite essa poderosa combinação e leve suas aplicações Laravel para o próximo nível!

No próximo blog vamos brincar com vuejs e Laravel