Laravel e Vue.js

Vue.js no Laravel

Neste tutorial veremos como utilizar Vue.js e o Laravel em conjunto para que possamos criar aplicativos responsivos e dinâmicos usando estes dois excelentes frameworks.

De acordo com sua documentação o Laravel não determina qual o framework JavaScript e/ou o pre-processador CSS (Sass, Less etc.) que você deve usar em seu projeto, porém fornece um excelente ponto de partida para o uso do Bootstrap, React e Vue.

Desta forma, o desenvolvedor pode optar pelo framework front-end de que gostar mais e com o qual tiver mais familiaridade, em nosso caso optei pelo Vue.

Assim, neste tutorial vamos aprender como habilitar o Laravel para utilizar o Vue. Veremos além da instalação, a parte prática através da construção de um componente Vue simples para exibir uma tela modal em nossa aplicação web.

O componente de janela modal que será apresentado aqui foi baseado na lição do W3Schools cujo link segue abaixo:

https://www.w3schools.com/howto/howto_css_modals.asp

Laravel 8 – atualização do post

O lançamento do Laravel 8 trouxe mudanças no que diz respeito ao uso do Vue.js, e se quiser saber quais foram pode ler o post abaixo:
Laravel 8 e Vue.js instalação

Apesar das mudanças, o presente tutorial permanece válido e funcional para esta nova versão 8, de forma que pode continuar sua leitura, pois os códigos apresentados aqui ainda estão plenamente funcionais.

Pré-requisitos

Para acompanhar o exemplo prático deste tutorial Laravel / Vue.js, além dos softwares necessários ao Laravel, também será necessário ter instalado o Node.js em seu ambiente de desenvolvimento.

Caso ainda não tenha feito a instalação do Node.js, pode fazer o download usando o link abaixo:

https://nodejs.org/en/download/

O conhecimento do Vue é desejável, porém este é um texto voltado para iniciantes e será apresentado na forma de um tutorial, de forma que se você não tiver nenhum conhecimento de Vue, ainda assim conseguirá acompanhar o exemplo.

Assim caso queira, pode ler o post abaixo onde apresento outro tutorial com os fundamentos básicos do Vue.js:
https://blog.parabah.com.br/vue-js-fundamentos-basicos/

Além disso, existem vários treinamentos rápidos de introdução ao Vue disponíveis gratuitamente na internet, abaixo recomendo dois:

https://www.udemy.com/course/vue-2-crash-course/

https://www.udemy.com/course/vuejs-fast-crash-course/

Assim, apesar de não ser obrigatório, caso deseje obter um conhecimento básico do Vue.js antes de ler este texto pode fazer isto lendo o post anterior ou assistindo a algum dos treinamentos (ambos em inglês) recomendados acima.

Conheça nosso Novo Curso NUXT.js e TailwindCSS para turbinar a criação de front-ends

Iniciando um novo projeto

Iniciaremos usando o composer para criar um novo projeto do Laravel, assim vamos entrar na linha de comando e digitar:

composer create-project --prefer-dist laravel/laravel vue-teste

E, após a instalação, entrar na pasta do projeto recém criado usando o comando:

cd vue-teste

O pacote laravel/ui

No Laravel para que possamos gerar os códigos de uma aplicação exemplo Vue, é necessário instalar o pacote do composer chamado de laravel/ui .

Assim sendo, prosseguindo em nossa tarefa, já na pasta do projeto, vamos fazer a instalação deste pacote digitando o comando abaixo:

composer require laravel/ui

Após a instalação usaremos o comando ui do Artisan para gerar o esqueleto inicial de um front-end para nossa aplicação.

Este comando permite selecionar o tipo de front-end, sendo que estão disponíveis as opções bootstrap, vue e react.

Além disso, também, usando a opção --auth, é possível gerar os elementos básicos que irão implementar a autenticação em nosso aplicativo Laravel.

Caso optemos por instalar o Auth em uma ocasião posterior corremos o risco de perder o trabalho que já foi feito, caso não tomemos alguns cuidados, pois ao usar o --auth são sobrescritos alguns arquivos de configuração do Vue.

Assim, é recomendável que ao instalar o Vue também façamos a instalação da estrutura básica de autenticação do Laravel para não correr o risco de perder aquilo que já fizemos usando o Vue.

Instalando o Vue

Prosseguindo, iremos agora instalar o Vue e o esqueleto básico de autenticação, para isto execute os seguintes comandos:

php artisan ui vue --auth
npm install
npm run dev

Como dito antes, neste texto optamos por instalar, além do Vue, a estrutura básica de autenticação do Laravel, de forma a deixar preparada a estrutura de autenticação, da qual iremos tratar futuramente, e também para não correr o risco de perder o código Vue já existente.

Iniciando com o Vue

Ajuste na tag script

Após a instalação do Vue  é necessário remover de seu código as referências explícitas ao bootstrap.min.js, pois quando instalamos os pacotes laravel/ui  e utilizamos o mesmo para gerar um esqueleto de front-end já são incluídas de forma automática as referências a este arquivo.

Assim, caso não sejam retiradas outras referências existentes pode ocorrer duplicidade e/ou conflitos. Um sintoma típico deste problema são os menus dropdown que param de funcionar.

Preparando a rota e o template

Prosseguindo, vamos criar uma rota para o template que usaremos como exemplo. Para isto edite o arquivo web.php e inclua o código abaixo:

Route::get('/vue-teste', function () {
   return view('vue-teste');
});

Após isto, devemos criar na pasta resources\views o arquivo template de nome vue-teste.blade.php e nele digitar o código abaixo:

<!DOCTYPE html> <html lang="pt-br"> <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>       <link rel="stylesheet" href="{{ asset('css/app.css') }}"> </head> <body>       <div id="app">          <example-component></example-component>       </div> </body>       <script src="{{ asset('js/app.js') }}"></script> </html>

Note que foram destacadas algumas linhas no código fonte acima, são elas que implementam a inclusão do componente exemplo que foi instalado automaticamente durante a instalação do Vue no Laravel.

Para verificar o que fizemos até o momento basta, caso ainda não tenha feito isto, ativar o servidor php, usando o comando php artisan serve e em seguida acessar a url http://localhost:8000/vue-teste

Tela do componente de exemplo

Caso tudo tenha corrido bem até este ponto, deverá ser exibida uma tela semelhante à da figura acima. Nela vemos um componente card que corresponde ao exemplo gerado automaticamente pela instalação do Vue.

Partindo deste ponto, uma opção seria modificar o componente exemplo para criar nosso próprio componente. No entanto, neste texto vamos adotar outra abordagem e construir um componente Vue partindo do zero.

De qualquer forma, para ter uma ideia de seu funcionamento recomendo que examine o código do componente exemplo que fica no arquivo resources\js\components\ExampleComponent.vue.




Criando o componente

Iniciaremos agora a criação de nosso componente de janela modal, para isto vamos criar a pasta resources/js/components/janela-modal e dentro dela o arquivo JanelaModal.vue, e em seguida digitar o código abaixo:

<template>
    <div>
        <h2>Minha janela Modal</h2>
    </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

Após isto, vamos editar o arquivo resources/js/app.js e nele incluir a linha abaixo:

Vue.component('janela-modal', require('./components/janela-modal/JanelaModal.vue').default);

Por último, alterar o arquivo resources/views/vue-teste.blade.php e substituir a linha:

<example-component></example-component>

Pela linha abaixo:

<janela-modal></janela-modal>

Este último passo, como você deve ter percebido, remove a referência ao componente exemplo e insere a chamada para o componente que estamos desenvolvendo.




Testando

Para verificar se nosso código está funcionado corretamente devemos primeiro “compilar” o código do componente, e para isto na linha de comando posicionada na pasta do projeto, executar o comando:

npm run dev

Em seguida recarregar a página teste-vue , sendo que agora deverá ser exibida uma tela semelhante à tela abaixo:

Tela inicial do componente de janela modal

O código que digitamos até agora no arquivo resources\js\components\janela-modal\JanelaModal.vue será nosso ponto de partida.

Para que este post não ficasse muito grande ele foi dividido, continue sua leitura acessando o link abaixo, nele iremos continuar a desenvolver o componente de janela modal e aprender um pouco mais sobre o Vue.

Próximo post : Vue.js no Laravel (continuação)