Laravel 10 and Vuejs 3 – Simple Invoice Application

In this tutorial, we will create a simple invoice application using Laravel 10 and Vuejs 3. We will start by creating a form to insert invoice data and then insert that data into the database.

Create Invoice

First, we will create a form to input the invoice details. We will use Vuejs 3 to bind the form fields to the data model and handle form submission.

“`html

“`

Insert Invoice in Database

Next, we will handle form submission and send the invoice data to the Laravel backend for insertion into the database.

“`php
// Laravel 10 Controller Method
public function create()
{
$invoice = new Invoice();
$invoice->invoiceNumber = request(‘invoiceNumber’);
$invoice->customerName = request(‘customerName’);
$invoice->amount = request(‘amount’);
$invoice->save();

return response()->json([‘message’ => ‘Invoice created successfully’]);
}
“`

With these steps, we have created a simple invoice application using Laravel 10 and Vuejs 3. We can now input invoice details through the form and insert them into the database using the Laravel backend.