Se você nunca ouviu falar desse package ou cria seus formulários utilizando as formas básicas com todos os recursos do Laravel .

Nesse post de hoje você vai descobrir uma forma nova de criar seus formulários e que você pode utilizar para outros projetos seus.

Vue Js

Esse recurso usa muito do Vue js na forma de criar componentes .

Se você não conhece a fundo sobre o Vue js nesse post você conseguirá tranquilamente usar sem precisar ser um especialista em Vue.

Detalhes Importantes

Tanto aqui no meu blog como no canal eu já escrevi bastante a respeito de como utilizar boas práticas , formulários e entre outras coisas do tipo .

Eu tenho até curso gratuito aqui no blog para você aprender de forma rápida a usar o laravel e entender como funciona.

Já aprendemos aqui a como dividir o nosso código de forma correta com diversos posts e vídeos que irei colocar aqui antes de ler esse post :

Esses posts acima são alguns a qual sugiro de forma correta e legal de como usar o Laravel.

#O Foco desse post é te mostrar um novo recurso

#Você decide qual o melhor para você

Começando

Instale todas as dependências a baixo :

npm i laraform --save
npm i axios lodash moment vue --save

Depois de ter rodado esses dois comandos para instalar as bibliotecas JS , agora precisará rodar o composer.

O composer vai ser para utilizar diretamente no seu projeto .

composer require laraform/laraform-laravel
php artisan vendor:publish

E agora chegou a hora de criarmos nosso primeiro formulário :

Crie dessa forma app\Forms\FirstForm.php

Nas rotas adicione o nosso formulário para começar a funcionar :

No seu Layout principal por exemplo : layouts/app

Maioria dos sistemas usa essa base para criar os Layouts , então você precisa passar dois elementos no Layout para começar a funcionar .

Inclua Laraform em resources/js/app.js:

require('./bootstrap');

import Vue from 'vue'
import Laraform from 'laraform'

Vue.use(Laraform)

const app = new Vue({
  el: '#app',
})

É de suma importância que você tem que importar no seu template a seguinte coisa :

Import theme in resources/sass/app.scss:

O Laravel Form suporta a versão 3 e 4 do . Isso você pode definir em config/laraform.php :

‘theme’ => ‘bs4’

Para poder funcionar tudo certinho , rode o comando :

npm run dev

php artisan serve

E voalá , nosso formulário já começará a funcionar usando essa lib .

#Exemplo prático :

Criamos um formulário de Newsletter onde poderemos identificar se aquele usuário já está escrito em nossa caixa de email , se não tiver ele aparecerá uma mensagem de sucesso .

Depois que criamos o nosso back , precisamos passar para o nosso Front em Vue js .

Crie NewsletterForm.vue

No seu back-end você precisará passar a informação de onde está o seu formulário :


#Conclusão

Independente se você irá somente usar um formulário simples ou algo como o LaraForm , eu desejo boa sorte e boas práticas . Se você não conhecia esse recurso , me conta aê nos comentários o que achou !

Link para maiores detalhes do LaraForm : https://laraform.io/docs/1.x/installation


0 Comments

Leave a Reply

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