Starter kit - Knowledge of Laravel

Cosa sono gli starter kit

Gli starter kit sono scaffolding ufficiali forniti come punto di partenza per applicazioni Laravel. Impostano in blocco funzionalità di autenticazione (login, registrazione, reset password, verifica email) con la UI corrispondente. Basta selezionare uno starter kit durante laravel new per generare automaticamente route, controller, viste e codice frontend per l’autenticazione. Tutto il codice generato risiede nella tua applicazione ed è personalizzabile liberamente.

In Laravel 13 i tradizionali Breeze e Jetstream sono stati dismessi. Per i nuovi progetti usa gli starter kit descritti qui. I progetti esistenti che usano Breeze o Jetstream continuano a funzionare ma non sono più consigliati per nuovi sviluppi.

Starter kit disponibili

In Laravel 13 sono forniti quattro tipi di starter kit.

React

SPA moderna con React 19, TypeScript, Tailwind 4 e shadcn/ui. Con Inertia.js puoi usare React mantenendo il routing lato server.

Vue

Vue 3 Composition API, TypeScript, Tailwind e shadcn-vue. Come React, usa Inertia.js per l’integrazione con il server.

Livewire

Livewire per UI dinamiche in solo PHP. Ideale per team che lavorano con i template Blade o senza framework JavaScript. Include Flux UI.

Svelte

SPA con Svelte 5, TypeScript, Tailwind e shadcn-svelte. Combina con Inertia.js per un frontend moderno.

Quale scegliere

Starter kit	Team consigliato
React	Chi conosce l’ecosistema React e TypeScript
Vue	Chi ha esperienza con Vue o Nuxt
Livewire	Chi vuole restare su PHP e Blade
Svelte	Chi ha esperienza con Svelte o SvelteKit

L’autenticazione è identica in tutti gli starter kit: scegli la tecnologia frontend con cui il team è più familiare.

Per un confronto tra Blade, Livewire, Inertia e SPA indipendenti, leggi Frontend.

Installazione

Lo scegli alla creazione del progetto. Il comando laravel new presenta un prompt interattivo.

Installa l'installer di Laravel

composer global require laravel/installer

Crea la nuova app

laravel new my-app

Scegli tra React, Vue, Livewire, Svelte. Puoi scegliere anche tra autenticazione Laravel standard o WorkOS AuthKit.

Installa le dipendenze frontend

cd my-app
npm install && npm run build

Prepara il database

php artisan migrate

Avvia il server di sviluppo

composer run dev

Vai su http://localhost:8000 e vedrai i link “Register” e “Log in”.

Funzionalità pronte:

Funzionalità	URL
Registrazione	`/register`
Login	`/login`
Reset password	`/forgot-password`
Verifica email	`/email/verify`
Profilo	`/settings/profile`

Personalizzazione

Il codice risiede nell’app. Frontend in resources/js (Livewire in resources/views).

Cambio layout

Ogni kit include layout “sidebar” e “header”. Predefinito: sidebar.

React
Vue
Livewire
Svelte

Modifica resources/js/layouts/app-layout.tsx.

// Sidebar (predefinito)
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

// Header
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Modifica resources/js/layouts/AppLayout.vue.

import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

Modifica resources/views/layouts/app.blade.php.

<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

Modifica resources/js/layouts/AppLayout.svelte.

import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

Layout pagine di autenticazione

Le pagine di login e registrazione hanno tre layout: “simple”, “card”, “split”.

React
Vue
Livewire
Svelte

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

Personalizzazione della logica di registrazione

Gli starter kit usano le classi action in app/Actions/Fortify. Per aggiungere un campo telefono modifica CreateNewUser.php.

public function create(array $input): User
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users'],
        'phone' => ['required', 'string', 'max:20'],
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],
        'password' => Hash::make($input['password']),
    ]);
}

Autenticazione con WorkOS AuthKit

In laravel new puoi scegliere WorkOS AuthKit. Aggiunge:

Autenticazione social (Google, Microsoft, GitHub, Apple)
Passkey
Magic Auth via email
SSO

Richiede un account WorkOS. Gratuito fino a 1 milione di utenti attivi mensili.

Configura in .env:

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

Attenzione

Gli starter kit si scelgono alla creazione del progetto. Non possono essere aggiunti dopo. Se ti serve la UI di autenticazione, crea un nuovo progetto con starter kit o implementala manualmente.

Prossimi passi

Introduzione all'autenticazione

Approfondisci la facade Auth, la protezione delle route e altro.

​Cosa sono gli starter kit

​Starter kit disponibili

React

Vue

Livewire

Svelte

​Quale scegliere

​Installazione

​Personalizzazione

​Cambio layout

​Layout pagine di autenticazione

​Personalizzazione della logica di registrazione

​Autenticazione con WorkOS AuthKit

​Attenzione

​Prossimi passi

Introduzione all'autenticazione

Cosa sono gli starter kit

Starter kit disponibili

Quale scegliere

Installazione

Personalizzazione

Cambio layout

Layout pagine di autenticazione

Personalizzazione della logica di registrazione

Autenticazione con WorkOS AuthKit

Attenzione

Prossimi passi