Creating you first Vue 3 component alongside Inertia.js

Creating the controller

Creating the controller is straight forward task, we will use for that Laravel's artisan command :

php artisan make:controller FirstController -i

This command will create a new file named : FirstController.php in the following path : App\Http\Controllers\FirstController.php

Let's open that file and add some code :

 public function __invoke(Request $request)
 {
      return Inertia::render('first', ['message' => 'First Component']);
 }

As you can notice the only difference between using the normal blade views is using Inertia's render function.

Creating the Vue js Component

Let's create a file called first.vue inside the resources/views/pages folder

and put the following code :

<script setup lang="ts">
defineProps<{
    message:
        string
}>()
</script>

<template layout="default">
    <div
        className="relative flex items-top justify-center min-h-screen bg-zinc-100 dark:bg-zinc-900 sm:items-center py-4 sm:pt-0">
        <p class="text-8xl text-green-300">{{ message }}</p>
    </div>
</template>

What we are doing here is simply displaying the 'message' variable returned from the controller.

Creating the route :

Now the last step is defining a new route inside the routes/web.php file :

Route::get('first', \App\Http\Controllers\FirstController::class);

Now if we visit /first we should see something like this :

I know this is very basic example, in the next article we will populate the page with data from database .