3. Laravel 8 con auth ui y VUE.js 3 - Formularios

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateLibrosTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('libros', function (Blueprint $table) {
            $table->id();
            $table->string('titulo');
            $table->string('description');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('libros');
    }
}

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Libro extends Model
{
    use HasFactory;

    protected $table = 'libros';
    protected $fillable = [
        'titulo',
        'descripcion',
    ];
}

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class LibroRequest extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'titulo'        =>  'required',
            'descripcion'   =>  'required'
        ];
    }
}

<?php

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use App\Http\Requests\LibroRequest;
use App\Http\Resources\LibroResource;
use App\Models\Libro;
use Illuminate\Http\Request;

class LibrosController extends Controller
{
    //
    public function storeLibro (LibroRequest $request)
    {
        $libro = Libro::create($request->validated());
        return new LibroResource($libro);
    }
}

import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default function useLibros(){
	const errors = ref('')
	const router = useRouter()
	const libros = ref([])

	const storeLibro = async (data) => {
		console.log("Funcion para enviar data via  post por axios")

		errors.value = ''
		try{
			await axios.post('/api/libros/store',data) 
			await router.push({name: 'holamundo'})
		} catch(e){			
			if(e.response.status === 422){
				errors.value = e.response.data.errors
			}
		}
	} 

	return {
		libros,
		errors,
		storeLibro
	}
}

<template>
	<div class="card">
    	        <div class="card-header">{{ tituloform }}</div>
		<div class="card-body">
			<div id="formulario-persona">

		 	<div v-if="errors"> 
        <div v-for="(v, k) in errors" :key="k">
          <p class="text-danger" v-for="error in v" :key="error">  
              {{ error }}
          </p>
        </div>
    	</div>

			<form @submit.prevent="onSubmit">
					<div class="form-group">
		              <label>Titulo</label>
		              <input type="text" v-model="form.titulo" class="form-control" />
		            </div>
		            <div class="form-group">
		              <label>Descripción</label>
		              <input type="text" v-model="form.descripcion" class="form-control" />
		            </div>


		            <div class="row">
			          <div class="col-md-4">
			            <div class="form-group">
			              <button type="submit" class="btn btn-primary" >Añadir libro</button>

			              
			            </div>
			          </div>
			        </div>
				</form>

			</div>
		</div>
	</div>
</template>

<script>
import { reactive } from 'vue';
import { ref } from 'vue';
import useLibros from "../libros.js";

export default {
	setup() {
		const {errors, storeLibro} = useLibros()

		const form = reactive({
			titulo: '',
			descripcion: ''
		})

		const tituloform = "Titulo de formulario"

		const onSubmit = async()=> {
			console.log("Recibida en funcion submit ("+form.titulo+")")
			await storeLibro({...form})
		}

		return {
			form,
			tituloform,
			onSubmit,
			errors
		}
	}
}	
</script>
<style scoped>
  form {
    margin-bottom: 2rem;
  }
</style>