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!

Next Lesson: Login with Facebook/Google/Github
Login or register to comment or ask questions
avatar
Tu Quoc Tuan

Can you upgrade this course for Livewire v3

avatar
Povilas Korop

We just did it, thanks for reminding!

avatar
Marcos Sousa

The penultimate block of code should actually be:

php artisan livewire:publish --config
👍 3
avatar
Bashiro

Tnx you saved us from confusion

avatar
Khairul Imran

Where to get github code for this course?

avatar
Nerijus

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