Courses

Creating a Quiz System with Laravel 10 + Livewire 3: Step-by-Step

Install Laravel and Livewire

First, before starting to implement all features, we need to create a Laravel project, install Laravel Breeze for quick authentication scaffolding, and Livewire for dynamic interfaces.

laravel new project
cd project
composer require laravel/breeze --dev
php artisan breeze:install blade

That's it, we have default Laravel Breeze installed:

default breeze register page

Next, we will install Livewire.

composer require livewire/livewire

Add the following Blade directives in the head tag, and before the end body tag in the resources/views/layouts/app.blade.php file.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
//
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body class="font-sans antialiased">
//
@livewireScripts
</body>
</html>

Usually, we shouldn't add @livewireStyles and @livewireScripts, but without it, the user dropdown won't work.

Next, because Livewire has integrated Alpine.js we need to remove it.

resources/js/app.js:

import './bootstrap';
 
import Alpine from 'alpinejs';
 
window.Alpine = Alpine;
 
Alpine.start();

Last thing, by default, when using Livewire full-page components Livewire is set to use layouts in components/layouts/app.blade.php. We need to change that because Breeze puts layout in a different directory.

composer require livewire/livewire

config/livewire.php:

// ...
'layout' => 'components.layouts.app',
'layout' => 'layouts.app',

That's it for the preparation quick start, now we're ready to create our Livewire components, in the next lesson!

avatar

Can you upgrade this course for Livewire v3

avatar

We just did it, thanks for reminding!

avatar

The penultimate block of code should actually be:

php artisan livewire:publish --config
👍 1
avatar

Where to get github code for this course?

avatar

https://github.com/LaravelDaily/Livewire-Laraquiz-Course