my photo

Michael Santos

Vue js + Laravel

Se você nunca ouviu falar do Vue Js , seja bem vindo a esse post

Irei tratar sobre o Vue js mais especificamente dele sendo usado no Laravel

Há grandes debates de qual melhor Stack a se usar no desenvolvimento de aplicações para a internet

Nesse post eu quero te dizer que há diversas maneiras de se trabalhar com o Vue Js no Laravel

Iremos ver como tratar o formulário e assim poder criar o nosso formulário com Vue js e o back usaremos o Laravel sem precisar criar dois projetos diferentes para cada.

Pra começar temos que rodar alguns comandos :

npm install -> Irá instalar todas as dependencias
npm run dev -> Irá rodar todas as configurações necessárias
npm run watch -> Esse comando acompanha e assiste tudo aquilo que é feito . 

Primeiro de tudo são esses comandos. Eu costumo usar bastante o Vue Js dentro do Laravel e hoje quero te mostrar um formulário simples que fiz , segue abaixo :

Eu costumo separar bastante os meus arquivos entre a parte Front e a Back.

Então tudo que irei mostrar aqui é baseado no meu dia a dia na prática

Na pasta Resources/js/components/ContactForm.vue

começo

teste

Dessa forma já temos a nossa parte do formulário de contato feito para criarmos e utilizarmos em qualquer parte do nosso sistema .

formulário vue js

Eu criei um arquivo no Component para ficar de forma mais organizada , criei um arquivo chamado : FormMixin.js ,

depois você pegue a parte que está contida no , veja abaixo:

script para carregar

Depois disso agora precisamos terminar os outros detalhes .

Observe que o nosso formulário ficou menor depois desse file que criamos .

Dentro do seu Routes/web.php coloque da seguinte forma :

Depois disso configure todo o seu controller e request , vamos começar por Requests :


Se você é novo saiba que eu gosto sempre de usar poucas linhas e de forma organizada .



Já que está tudo pronto e criado eu posso importar aquilo que coloquei na minha rota do js/app.js :



Na sua view use isso :



Acredito que com esse formulário básico você poderá criar diversos outros recursos

Veja aqui um curso gratuito que preparei para você aprender de forma gratuita , clique aqui

Loading


3 Comments

Avatar

Gustavo Riposati · 12 de May de 2020 at 00:13

Não funcionou não laravel 6 segui o tutorial conferi passo a passo e nada so tela em branco

    MichaelSantos

    MichaelSantos · 12 de May de 2020 at 00:28

    Qual erro que apontou no seu ? Posso estar ajudando você .

WebSocket no Laravel - Veja aqui na Viver de Códigos · 11 de May de 2020 at 09:49

[…] Já escrevi até mesmo um post sobre isso , confira aqui sobre o Vue js no laravel […]

Leave a Reply

Your email address will not be published. Required fields are marked *