Building Chirper with Laravel Breeze Intertia and Vue
- Dipankar Sarkar
- January 8, 2023
- Backend, Frontend
Step 1: Installing Laravel and Breeze
- Install Laravel by running the following command in your terminal:
- Create a blank repository in GitHub called “laravue” and push the code running the following command in your terminal:
- Install Laravel Breeze and Vue by running the following command in your terminal:
- Start the Laravel development server by running the following command:
- Start the Vite development server by running the following command:
- Run the migration to create default tables from Laravel and Breeze tables in your database:
composer create-project --prefer-dist laravel/laravel laravelvue
git init
git branch -M main
git remote add origin https://github.com/dipankar77/laravue.git
git add .
git commit -m "first commit"
git push -u origin main
composer require laravel/breeze --dev
php artisan breeze:install vue
php artisan servenpm run devphp artisan migrateStep 2: Creating Chirps
- create a model, migration, and resource controller for our Chirps with the following command:
- In
routes/web.phpcreate the following routes: - In
app/Http/Controllers/ChirpController.phpadd the following codes to test it: - Let’s update the index method of our ChirpController class
app/Http/Controllers/ChirpController.phpto render a front-end page component using Inertia. - create our front-end
Chirps/Indexpage atresources/js/Pages/Chirps/Index.vuecomponent with a form for creating new Chirps: - Add a link to the navigation menu provided by Breeze at
resources/js/Layouts/AuthenticatedLayout.vue - And also for mobile screens:
- Update the store method on our ChirpController class to validate the data and create a new Chirp:
- We need to create this method on our User model to define a “has many” relationship:
- add the $fillable property to our Chirp model to enable mass-assignment for the message attribute:
- add extra columns in our database to store the relationship between a Chirp and its User and the message itself.
- We haven’t migrated the database since we added this migration, so let do it now:
php artisan make:model -mrc ChirpThis command will create three files for you:
app/Models/Chirp.php – The Eloquent model.
database/migrations/ – The database migration that will create your database table.
app/Http/Controllers/ChirpController.php – The HTTP controller that will take incoming requests and return responses.
<?php
+ use App\Http\Controllers\ChirpController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
...
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
+ Route::resource('chirps', ChirpController::class)
+ ->only(['index', 'store']);
});
require __DIR__.'/auth.php';
<?php
+use Illuminate\Http\Response;
class ChirpController extends Controller
{
/**
* Display a listing of the resource.
*/
- public function index()
+ public function index(): Response
{
//
return response('Hello, World!');
}
...
}
<?php
namespace App\Http\Controllers;
use App\Models\Chirp;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
use Inertia\Inertia;
use Inertia\Response;
class ChirpController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index(): Response
{
return 'Hello, World!';
return Inertia::render('Chirps/Index', [
//
]);
}
...
}
<script>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import InputError from '@/Components/InputError.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import { useForm, Head } from '@inertiajs/vue3';
const form = useForm({
message: '',
});
</script>
<template>
<Head title="Chirps" />
<AuthenticatedLayout>
<div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8">
<form @submit.prevent="form.post(route('chirps.store'), { onSuccess: () => form.reset() })">
<textarea
v-model="form.message"
placeholder="What's on your mind?"
class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"
></textarea>
<InputError :message="form.errors.message" class="mt-2" />
<PrimaryButton class="mt-4">Chirp</PrimaryButton>
</form>
</div>
</AuthenticatedLayout>
</template>
<div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
<NavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</NavLink>
<NavLink :href="route('chirps.index')" :active="route().current('chirps.index')">
Chirps
</NavLink>
</div>
<div class="pt-2 pb-3 space-y-1">
<ResponsiveNavLink :href="route('dashboard')" :active="route().current('dashboard')">
Dashboard
</ResponsiveNavLink>
<ResponsiveNavLink :href="route('chirps.index')" :active="route().current('chirps.index')">
Chirps
</ResponsiveNavLink>
</div>
<?php
namespace App\Http\Controllers;
use App\Models\Chirp;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Inertia\Inertia;
use Inertia\Response;
class ChirpController extends Controller
{
...
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
public function store(Request $request): RedirectResponse
{
//
$validated = $request->validate([
'message' => 'required|string|max:255',
]);
$request->user()->chirps()->create($validated);
return redirect(route('chirps.index'));
}
...
}
<?php
use Illuminate\Database\Eloquent\Relations\HasMany;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
...
public function chirps(): HasMany
{
return $this->hasMany(Chirp::class);
}
}
<?php
...
class Chirp extends Model
{
...
protected $fillable = [
'message',
];
}
<?php
...
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('chirps', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->constrained()->cascadeOnDelete();
$table->string('message');
$table->timestamps();
});
}
...
};
php artisan migrate
Step 3: Showing Chirps
<?php
class ChirpController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index(): Response
{
return Inertia::render('Chirps/Index', [
//
'chirps' => Chirp::with('user:id,name')->latest()->get(),
]);
}
...
