Starter kits - Knowledge of Laravel

¿Qué es un starter kit?

Un starter kit es un andamiaje oficial pensado como punto de partida para una aplicación Laravel. Permite configurar de golpe la autenticación (inicio de sesión, registro, restablecimiento de contraseña, verificación de correo, etc.) junto con su UI. Basta con elegir un starter kit al crear la aplicación con laravel new para que se generen automáticamente todas las rutas, controladores, vistas y el código frontend relacionados con la autenticación. Como todo el código generado vive en tu propia aplicación, puedes personalizarlo libremente.

En Laravel 13 se han retirado los antiguos Breeze y Jetstream. Para los proyectos nuevos, utiliza los starter kits que se presentan a continuación. Los proyectos existentes que usen Breeze o Jetstream seguirán funcionando, pero ya no se recomiendan para desarrollos nuevos.

Starter kits disponibles

En Laravel 13 se ofrecen los siguientes cuatro starter kits.

React

SPA moderna con React 19, TypeScript, Tailwind 4 y shadcn/ui. Gracias a Inertia.js puedes usar React manteniendo el enrutamiento del lado del servidor.

Vue

Adopta la Composition API de Vue 3, TypeScript, Tailwind y shadcn-vue. Al igual que React, se integra con el servidor a través de Inertia.js.

Livewire

Livewire permite construir UIs dinámicas solo con PHP. Ideal para equipos centrados en plantillas Blade o que quieren evitar frameworks de JavaScript. Utiliza Flux UI.

Svelte

SPA con Svelte 5, TypeScript, Tailwind y shadcn-svelte. Combinado con Inertia.js permite construir un frontend moderno.

¿Cuál elegir?

Starter kit	Equipos ideales
React	Equipos habituados al ecosistema de React y TypeScript
Vue	Equipos con experiencia en Vue o Nuxt
Livewire	Equipos que quieren desarrollar centrándose en PHP y Blade
Svelte	Equipos con experiencia en Svelte o SvelteKit

Elijas el que elijas, las funciones de autenticación son idénticas. Elige la tecnología frontend con la que tu equipo se sienta más cómodo.

Si quieres una visión general de las diferencias entre Blade, Livewire, Inertia y SPAs independientes, lee primero Frontend para decidir mejor.

Instalación

Un starter kit se elige al crear el proyecto. Al ejecutar laravel new, un asistente interactivo te ofrece seleccionarlo.

Instalar el instalador de Laravel

Si aún no lo tienes instalado, obténlo con Composer.

composer global require laravel/installer

Crear una nueva aplicación

Ejecuta laravel new. Aparecerán prompts interactivos que incluyen la elección del starter kit.

laravel new my-app

Elige React, Vue, Livewire o Svelte en el prompt. También podrás elegir entre la autenticación estándar de Laravel o WorkOS AuthKit como proveedor de autenticación.

Instalar las dependencias del frontend

cd my-app
npm install && npm run build

Preparar la base de datos

Comprueba la configuración de base de datos en .env y ejecuta las migraciones.

php artisan migrate

Iniciar el servidor de desarrollo

composer run dev

Al acceder a http://localhost:8000 verás enlaces “Register” y “Log in” en la navegación.

Una vez instalado el starter kit, dispones de estas funciones de autenticación:

Funcionalidad	URL
Registro de usuario	`/register`
Inicio de sesión	`/login`
Restablecimiento de contraseña	`/forgot-password`
Verificación de correo	`/email/verify`
Edición del perfil	`/settings/profile`

Personalizar el starter kit

Como todo el código generado vive en tu aplicación, puedes modificarlo con total libertad. La mayor parte del código frontend se encuentra en resources/js (en Livewire, al ser Blade, en resources/views).

Cambio de layout

Cada starter kit incluye dos layouts: “sidebar” y “header”. Por defecto se usa el layout con sidebar.

React
Vue
Livewire
Svelte

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

// Layout con sidebar (por defecto)
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

// Para cambiar al layout con header
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Edita resources/js/layouts/AppLayout.vue.

// Layout con sidebar (por defecto)
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

// Para cambiar al layout con header
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

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

{{-- Para cambiar al layout con header --}}
<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

Edita resources/js/layouts/AppLayout.svelte.

// Layout con sidebar (por defecto)
import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

// Para cambiar al layout con header
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

Cambio de layout en las páginas de autenticación

Las páginas de login y registro también pueden elegirse entre tres layouts: “simple”, “card” y “split”.

React
Vue
Livewire
Svelte

Edita resources/js/layouts/auth-layout.tsx.

// Layout simple (por defecto)
import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

// Para cambiar al layout split
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Edita resources/js/layouts/AuthLayout.vue.

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

// Para cambiar al layout split
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Edita resources/views/layouts/auth.blade.php.

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

Edita resources/js/layouts/AuthLayout.svelte.

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

// Para cambiar al layout split
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

Personalizar la lógica de registro de usuarios

El starter kit usa clases de acción del directorio app/Actions/Fortify para el registro y el restablecimiento de contraseña. Por ejemplo, para añadir un campo de teléfono en el registro, edita 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']),
    ]);
}

Autenticación con WorkOS AuthKit

Al ejecutar laravel new también puedes elegir WorkOS AuthKit como proveedor de autenticación. Con WorkOS AuthKit añades las siguientes funciones:

Autenticación social (Google, Microsoft, GitHub, Apple)
Autenticación con passkeys
“Magic Auth” por correo
SSO (inicio de sesión único)

Para usar WorkOS AuthKit necesitas una cuenta de WorkOS. Se puede usar gratis hasta un millón de usuarios activos mensuales.

Si eliges WorkOS, configura estas variables en el archivo .env.

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

Cosas a tener en cuenta

Los starter kits se eligen al crear el proyecto. No pueden añadirse a posteriori a un proyecto existente. Si necesitas una UI de autenticación, elige un starter kit en un proyecto nuevo o implementa manualmente la autenticación.

Próximos pasos

Introducción a la autenticación

Aprende con más detalle la autenticación en Laravel, incluida la fachada Auth y la protección de rutas.

​¿Qué es un starter kit?

​Starter kits disponibles

React

Vue

Livewire

Svelte

​¿Cuál elegir?

​Instalación

​Personalizar el starter kit

​Cambio de layout

​Cambio de layout en las páginas de autenticación

​Personalizar la lógica de registro de usuarios

​Autenticación con WorkOS AuthKit

​Cosas a tener en cuenta

​Próximos pasos

Introducción a la autenticación

¿Qué es un starter kit?

Starter kits disponibles

¿Cuál elegir?

Instalación

Personalizar el starter kit

Cambio de layout

Cambio de layout en las páginas de autenticación

Personalizar la lógica de registro de usuarios

Autenticación con WorkOS AuthKit

Cosas a tener en cuenta

Próximos pasos