Laravel 8 e Vue.js instalação

Este post tem o objetivo de indicar quais as mudanças foram trazidas pelo Laravel 8 em relação ao Vue.js e descrever o novo procedimento de instalação no ambiente Laravel.

A versão 8 do Laravel trouxe algumas alterações significativas no que diz respeito ao uso de frameworks front-end, em especial no que se refere ao Vue. Este fato causou um pouco de confusão e dúvidas entre os desenvolvedores web.

Já adianto que as mudanças se referem, basicamente, ao gerador de esqueletos e código base (estou usando estes termos na falta de outros melhores para designar, respectivamente, os boilerplates e sacaffoldings dos originais em inglês) usado para construir os front‑end de aplicativos Laravel / Vue.




Antes era o laravel/ui

Até a versão 7 do Laravel a forma padrão de instalar o Vue.js era usando o pacote laravel/ui, porém com o lançamento do Laravel 8 o padrão passou a ser o Jetstream.

Isto não significa que o Laravel/UI foi desativado/descontinuado, ele apenas não é mais o padrão, porém continua sendo possível utilizá-lo para instalar o Vue.js no ambiente Laravel.

Em uma transmissão recente, outubro/2020, feita no Youtube o criador e principal desenvolvedor do Laravel, Taylor Otwell, afirmou que não tem planos de descontinuar o laravel/ui.

Desta forma, continuam válidos e funcionais os procedimentos que constam em minha série de posts:

Vue.js no Laravel

Tenha em mente, contudo, que os esqueletos de código gerados pelo Laravel/ui são muito mais simples do que os gerados pelo Jetstream.

E, ainda, que, apesar de não ter sido descontinuado, o laravel/ui não será objeto de atualizações futuras, apenas de correções de bugs.

Considere, portanto, o uso do laravel/ui como uma porta de entrada no mundo Laravel/Vue.js, adequada para iniciantes por ser de uso e aprendizado mais simples. E quando tiver dominado seu uso, poderá partir, já com uma base de conhecimento, para o aprendizado do Jetstream.

Agora é o Jetstream

Como mencionei a forma padrão de ativar o uso do Vue.js em seu ambiente Laravel agora é através do Jetstream.

Este pacote foi desenvolvido pelo mesmo criador do Laravel e em uma tradução livre de sua documentação ele consiste no seguinte:

O Laravel Jetstream é um gerador de código base de aplicativos projetado para o Laravel. O Jetstream fornece um ponto de partida perfeito para seu próximo projeto e inclui login, registro, verificação de e-mail, autenticação de dois fatores, gerenciamento de sessão, suporte de API via Laravel Sanctum e, opcionalmente, gerenciamento de equipes.

O Laravel Jetstream substitui e aprimora o arcabouço de interface de usuário de autenticação legado disponível para versões anteriores do Laravel.

Assim, apesar de o Laravel/Ui ainda estar disponível, é inegável que o uso do Jestream traz muitas vantagens para os desenvolvedores, pois os códigos gerados (esqueletos de aplicativos) pelo Jestream fornecem muito mais recursos.

Se quiser aprender mais sobres os recursos que ele oferece, visite o site do JetStream e leia a documentação:

https://jetstream.laravel.com/

Neste texto iremos descrever um método rápido, conforme a documentação do Laravel 8, para instalar o Jestream usando o Composer, assim, presumindo que você já tem o composer instalado, bastará executar o comando:

composer require laravel/jetstream

Neste ponto, após a instalação, você poderá optar por um dos pacotes de frontend compatíveis com o Jestream, são eles: Inertia ou Livewire.

O que nos leva ao próximo tópico deste texto, qual devo escolher: Inertia ou Livewire?

Livewire ou Inertia?

Indo direto ao ponto, a resposta a esta pergunta é: se utiliza apenas os templates do Blade escolha o Livewire, contudo, se já tem experiência e quer utilizar o Vue.js para desenvolver seus frontend escolha o Inertia.

Apesar da resposta aparentemente simples, cabe fazermos mais algumas considerações a respeito deste assunto.

A primeira delas é que ambos são bibliotecas adicionais, relativamente pequenas quando comparadas com o código completo do framework

Livewire + Blade

Além disso, ao escolher o Livewire sua aplicação não se torna algo do tipo totalmente Livewire. Ou seja, será possível utilizar o Livewire em uma parte da aplicação ao mesmo tempo em que continua a utilizar normalmente o Blade em outras partes do aplicativo.

Assim, a ideia por trás do Livewire é permitir que você desenvolva aplicativos com interfaces reativas e dinâmicas, porém sem a necessidade de usar o Javascript ou um de seus frameworks como o Vue, pois continuará a usar o Blade como linguagem/mecanismo de template para criação da interface de usuário.

Inertia.js + Vue

Conforme sua documentação o Inertia é uma biblioteca que utiliza o Vue.js como linguagem de template e cuja principal função é permitir que sejam utilizadas as rotas do Laravel em vez das rotas do Vue.

Desta forma, facilitando a tarefa de obter dados armazenados no backend Laravel, pois fazer o mesmo usando apenas as rotinas de roteamento client-side fornecidas pelo Vue.js é uma tarefa bastante complexa.

Assim, usando o Inertia, é possível renderizar componentes Vue obtendo dados diretamente de seu backend Laravel, fornecendo o nome do componente e os dados que deverão ser hidratados nos “props” desse componente.

Instalação

Após decidir qual a melhor opção para você no que diz respeito a construção de seu front‑end, a instalação será muito semelhante em ambos os casos.

Para instalar o Livewire use o comando:

php artisan jetstream:install livewire

Ou, para instalar o Inertia utilize o comando:

php artisan jetstream:install inertia

Em qualquer dos casos, após a instalação você deverá complementar a tarefa executando os comandos:

npm install
npm run dev

Feito isto poderá acessar a página de seu aplicativo padrão Laravel 8 para verificar as telas da nova interface gerada pelo framework.

Caso deseje testar a inclusão de usuários e outras funcionalidades, não esqueça de configurar o banco de dados e executar as migrations para criar as respectivas tabelas.

Veja um exemplo de como fazer isto usando o SQLite Neste post:

Laravel e banco de dados SQLite

Bootstrap x TailWind

Uma outra questão que surge com o Laravel 8 e o uso do JetStream é que este último foi projetado para uso com o TailWind CSS que, assim, passou a ser o framework CSS padrão em detrimento do Bootstrap.

Qual deles é o melhor? Esta é uma questão polêmica que desperta paixões e muita discussão entre os desenvolvedores, por este motivo não vou entrar neste mérito, somente irei analisar a questão no contexto do Laravel.

Sem dúvida o Bootstrap ainda é um dos frameworks para front-end mais utilizados pelos desenvolvedores web e está amplamente consolidado, pois seu primeiro release data do ano de meados de 2010, ainda como twitter bootstrap.

Por sua vez o TailwindCss, é relativamente recente, tendo sido sua primeira versão Alpha lançada em novembro de 2017 e a primeira versão estável disponibilizada em maio de 2019. No entanto, a utilização e popularidade deste framework tem aumentado nos últimos anos.

Em sua já citada live do Yotube, Taylor Otwell, diz que há cerca de dois anos não desenvolve nada para o Bootstrap e ainda declara sua preferência pelo TailWindCSS.

Assim, no que diz respeito ao Laravel, tudo indica que o Bootstrap será substituído e em breve descontinuado.

Um exemplo claro deste fato é o componente Pagination, que até a versão 7 do Laravel tinha como padrão a compatibilidade com o Bootstrap; e que nesta nova versão 8 passou a adotar como padrão a compatibilidade com o Tailwind CSS.

Neste caso específico do Pagination, é possível alterar o Laravel para que volte ao padrão anterior, compatível com o Bootstrap, porém trata-se de mais um indicativo de que este último, no que se refere ao uso no Laravel, será descontinuado.

Além disso, o próprio criador do Laravel sugere que o Bootstrap não seja mais usado em projetos novos, para os quais recomenda que seja adotado o TailwindCSS.




Conclusão

Se você está iniciando o aprendizado de Vue.js utilize a instalação tradicional do laravel/ui e mais tarde quando precisar de recursos como o roteamento, considere migrar para o JetStream/Inertia.

Caso já seja um usuário avançado do Vue.js e queira fazer uso dele no ambiente Laravel, instale o JetStream e o Inertia.


Deseja que o front-end de seu aplicativo seja dinâmico e reativo mas ainda não quer se aventurar no Javascript, instale o Jetstream / Livewire.


Planeja desenvolver sempre em Laravel, backend e front-end, procure aprender o TailwindCSS em vez do Bootstrap.

Referências

Live do Taylor Otwell no Youtube
Documentação instalação do Laravel Jestream
Site do TailWind CSS

Comente

Caso tenha algum comentário a respeito deste post pode fazê-lo no espaço abaixo. Um grande abraço e até o próximo post.

Um comentário sobre “Laravel 8 e Vue.js instalação

Os comentários estão encerrados