Laravel 9 and Vue, Inertia – Create Data

Laravel 9 is the latest version of the popular PHP framework, and it comes with a lot of new features and improvements. One of the most exciting new features is the integration with Vue.js and Inertia.js. In this article, we will show you how to use these technologies to create data in a Laravel 9 application.

Setting up the Project

First, you need to have Laravel 9 installed on your system. You can do this by running the following command in your terminal:

composer create-project laravel/laravel my-project-name "9.*"

Next, you need to install Vue.js and Inertia.js. You can do this by running the following commands:

npm install vue
npm install @inertiajs/inertia @inertiajs/inertia-vue3

Creating a Form

Now that you have everything set up, you can create a form to add new data to your application. Start by creating a new Vue component for the form:

<template>
  <form @submit.prevent="submitForm">
    <input type="text" v-model="name">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
  export default {
    data() {
      return {
        name: ''
      }
    },
    methods: {
      submitForm() {
        this.$inertia.post('/create', { name: this.name })
      }
    }
  }
</script>

In this example, we are creating a simple form with a single text input for the name. When the form is submitted, we use the $inertia.post method to send a POST request to the /create endpoint with the form data.

Handling the Request

Finally, you need to define the route and controller method that will handle the POST request and create the new data in the database. Here’s an example of how you can do this in your Laravel application:

// web.php
Route::post('/create', [DataController::class, 'store']);

// DataController.php
namespace AppHttpControllers;

use IlluminateHttpRequest;
use AppModelsData;

class DataController extends Controller
{
    public function store(Request $request)
    {
        $data = new Data;
        $data->name = $request->input('name');
        $data->save();

        return redirect()->back();
    }
}

In this example, we have created a new route that points to the store method on the DataController. In the store method, we create a new Data model instance and set the name attribute to the value of the name input from the form. We then save the new data to the database and redirect the user back to the previous page.

Conclusion

Using Laravel 9 with Vue.js and Inertia.js makes it easy to create dynamic and interactive web applications. With just a few lines of code, you can create data in your application and provide a seamless user experience. We hope this article has been helpful in showing you how to get started with these technologies and create data in your Laravel 9 application.