Quando se trata de usarmos front end no Laravel podemos usar tranquilamente os componentes .

Que componentes são esses ?

Quando falo de componentes eu estou me referindo a questão de podermos reutilizar algo em várias outras partes do nosso sistema .

Fiz uma pesquisa rápida sobre o que as pessoas gostariam de aprender sobre componentes :

componentes-1

Foi interessante essa pesquisa que fiz por que pude perceber o número expressivo ganhando na frente com o Vue Js.

Tenho que admitir que o Vue js pode sim simplificar o nosso desenvolvimento , hoje eu não uso tanto ele , mas isso é assunto para outro post .

Vue Js no Laravel

  • Por que usar ele ?
  • Como podemos começar utilizando o Vue js no Laravel ?

Toda vez que vamos utilizar uma ferramenta ou algo novo devemos fazer esses dois questionamentos de base para não ficarmos perdidos .

# Por que usar ele ?

Quando o laravel começou a disponibilizar suas ferramentas para serem utilizadas o Vue js foi bem aceito .

Acabou que muitos programadores começaram a utilizar e na época que saiu o vue js ganhava bastante mercado .

O por que de usarmos ele é pelo o simples fato de simplificar a nossa vida na hora que estamos trabalhando .

Imagine ficar repetindo o mesmo código pra criar um input de busca em todas as partes do sistema , você pode criar um geral e utilizar em forma de componente .

# Como podemos começar a utilizar ?

Simples , para que possamos começar você irá rodar alguns comandos simples dentro da sua aplicação :

npm install

O npm install irá baixar todos os pacotes necessários para a utilização de recursos .

Depois precisaremos rodar o comando : npm run dev

Ele irá rodar todas as configurações dos pacotes instalados .

Agora vamos lá ? Melhor parte que eu acho é a prática …

Mão no código … !!

Iremos criar um formulário de contato simples com o vue js .

Primeiro criamos a view para depois passarmos a nossa api nele .

componentes-2

Isso nós criarmos dentro da pasta : resources/js/components/Contact.vue

componentes-3

Agora podemos passar a nossa api dentro desse nosso componente e ele irá buscar os parâmetros passados e salvar no banco de dados + todas as if e endif de sucess e errors .

Essas if e errors vai mostrar a mensagem caso tiver salvo ele irá aparecer uma mensagem em verde , se não , vai aparecer em vermelho .

Script !!

componentes-4

Agora precisamos registrar o nosso componente e onde ele está localizado .

Iremos registrar dentro do nosso arquivo app.js.

componentes-5

Pronto !! Desenvolvido , e agora ?

Vamos agora utilizar ele na nossa visualização .

Simples , feito !!

An ?? Como assim ??

É sério . Só preciso usar isso e ele estará funcionando normalmente :

Então baseado naquilo que falamos no inicio do nosso post nós podemos usar esse formulário em várias outras partes que precisam e tem as mesmas características sem precisar repetir o mesmo código .

Assim funciona também com o React , Livewire , Blade .

Irei montar uma série por que acho esse assunto importante para toda comunidade e acredito que poderá lhe ajudar demais no dia a dia .

E você ? O que achou de utilizarmos o Vue js na criação de componentes ?

Utiliza outro framework front end nos seus projetos ? Diga ae abaixo qual utiliza e por quê .


0 Comments

Leave a Reply

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