Vistas en Laravel 10.x: Guía y Ejemplos

Introducción
- Escribir Vistas en React / Vue
Crear y Renderizar Vistas
Pasar Datos a las Vistas
- Compartir Datos con Todas las Vistas
Compositores de Vistas
- Creadores de Vistas
Optimización de Vistas

Introducción

Por supuesto, no es práctico devolver cadenas de documentos HTML completos directamente desde tus rutas y controladores. Afortunadamente, las vistas ofrecen una forma conveniente de colocar todo nuestro HTML en archivos separados.

Las vistas separan la lógica del controlador / aplicación de la lógica de presentación y se almacenan en el directorio resources/views. Al usar Laravel, las plantillas de vistas suelen escribirse utilizando el lenguaje de plantillas Blade. Una vista simple podría verse así:

<!-- View stored in resources/views/greeting.blade.php -->
 
<html>
    <body>
        <h1>Hello, {{ $name }}</h1>
    </body>
</html>

Dado que esta vista se almacena en resources/views/greeting.blade.php, puedes devolverla usando la función view global de la siguiente manera:

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

Nota ¿Buscas más información sobre cómo escribir plantillas Blade? Consulta la documentación completa de Blade para empezar.

Escribir Vistas en React / Vue

En lugar de escribir sus plantillas frontend en PHP a través de Blade, muchos desarrolladores han comenzado a preferir escribir sus plantillas utilizando React o Vue. Laravel facilita esto gracias a Inertia, una biblioteca que facilita vincular tu frontend React / Vue a tu backend Laravel sin las complejidades típicas de la construcción de una SPA.

Nuestros kits de inicio Breeze y Jetstream te ofrecen un excelente punto de partida para tu próxima aplicación Laravel alimentada por Inertia. Además, el Bootcamp de Laravel proporciona una demostración completa de cómo construir una aplicación Laravel alimentada por Inertia, incluyendo ejemplos en Vue y React.

Crear y Renderizar Vistas

Puedes crear una vista colocando un archivo con la extensión .blade.php en el directorio resources/views de tu aplicación o utilizando el comando Artisan make:view:

php artisan make:view greeting

La extensión .blade.php informa al framework que el archivo contiene una plantilla Blade. Las plantillas Blade contienen HTML y también directivas Blade que te permiten imprimir fácilmente valores, crear declaraciones "if", iterar sobre datos y más.

Una vez que hayas creado una vista, puedes devolverla desde una de las rutas o controladores de tu aplicación utilizando la función view global de la siguiente manera:

Route::get('/', function () {
    return view('greeting', ['name' => 'James']);
});

Las vistas también se pueden devolver utilizando la fachada View:

use Illuminate\Support\Facades\View;
 
return View::make('greeting', ['name' => 'James']);

Como puedes ver, el primer argumento pasado a la función view corresponde al nombre del archivo de vista en el directorio resources/views. El segundo argumento es un array de datos que se deben poner a disposición de la vista. En este caso, estamos pasando la variable name, que se muestra en la vista utilizando la sintaxis de Blade.

Directorios de Vistas Anidados

Las vistas también se pueden anidar dentro de subdirectorios del directorio resources/views. Se puede utilizar la notación "punto" para hacer referencia a vistas anidadas. Por ejemplo, si tu vista se almacena en resources/views/admin/profile.blade.php, puedes devolverla desde una de tus rutas / controladores de la aplicación de la siguiente manera:

return view('admin.profile', $data);

Advertencia Los nombres de directorios de vistas no deben contener el carácter ..

Crear la Primera Vista Disponible

Usando el método first de la fachada View, puedes crear la primera vista que existe en un conjunto dado de vistas. Esto puede ser útil si tu aplicación o paquete permite que las vistas se personalicen o sobrescriban:

use Illuminate\Support\Facades\View;
 
return View::first(['custom.admin', 'admin'], $data);

Determinar si Existe una Vista

Si necesitas determinar si existe una vista, puedes usar la fachada View. El método exists devolverá true si la vista existe:

use Illuminate\Support\Facades\View;
 
if (View::exists('emails.customer')) {
    // ...
}

Pasar Datos a las Vistas

Como viste en los ejemplos anteriores, puedes pasar un array de datos a las vistas para hacer que esos datos estén disponibles en la vista:

return view('greetings', ['name' => 'Victoria']);

Al pasar información de esta manera, los datos deben ser un array con pares clave / valor. Después de proporcionar datos a una vista, puedes acceder a cada valor dentro de tu vista utilizando las claves de los datos, como <?php echo $name; ?>.

Como alternativa para pasar un array completo de datos a la función view, puedes usar el método with para agregar piezas individuales de datos a la vista. El método with devuelve una instancia del objeto de la vista para que puedas encadenar métodos antes de devolver la vista:

return view('greeting')
            ->with('name', 'Victoria')
            ->with('occupation', 'Astronaut');

Compartir Datos con Todas las Vistas

En ocasiones, es posible que necesites compartir datos con todas las vistas que se renderizan en tu aplicación. Puedes hacerlo usando el método share de la fachada View. Por lo general, debes colocar llamadas al método share dentro del método boot de un proveedor de servicios. Puedes agregarlas a la clase App\Providers\AppServiceProvider o generar un proveedor de servicios separado para albergarlas:

<?php
 
namespace App\Providers;
 
use Illuminate\Support\Facades\View;
 
class AppServiceProvider extends ServiceProvider
{
    /**
     * Registra cualquier servicio de la aplicación.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Inicializa cualquier servicio de la aplicación.
     */
    public function boot(): void
    {
        View::share('key', 'value');
    }
}

Compositores de Vistas

Los compositores de vistas son devoluciones de llamada o métodos de clase que se llaman cuando se renderiza una vista. Si tienes datos que deseas vincular a una vista cada vez que se renderiza esa vista, un compositor de vistas puede ayudarte a organizar esa lógica en una ubicación única. Los compositores de vistas pueden resultar especialmente útiles si la misma vista es devuelta por múltiples rutas o controladores dentro de tu aplicación y siempre necesita un fragmento de datos específico.

Por lo general, los compositores de vistas se registrarán dentro de uno de los proveedores de servicios de tu aplicación. En este ejemplo, asumiremos que hemos creado un nuevo App\Providers\ViewServiceProvider para albergar esta lógica.

Usaremos el método composer de la fachada View para registrar el compositor de vistas. Laravel no incluye un directorio predeterminado para compositores de vistas basados en clases, así que eres libre de organizarlos como desees. Por ejemplo, podrías crear un directorio app/View/Composers para almacenar todos los compositores de vistas de tu aplicación:

<?php
 
namespace App\Providers;
 
use App\View\Composers\ProfileComposer;
use Illuminate\Support\Facades;
use Illuminate\Support\ServiceProvider;
use Illuminate\View\View;
 
class ViewServiceProvider extends ServiceProvider
{
    /**
     * Registra cualquier servicio de la aplicación.
     */
    public function register(): void
    {
        // ...
    }
 
    /**
     * Inicializa cualquier servicio de la aplicación.
     */
    public function boot(): void
    {
        // Usando compositores basados en clases...
        Facades\View::composer('profile', ProfileComposer::class);
 
        // Usando compositores basados en cierres...
        Facades\View::composer('welcome', function (View $view) {
            // ...
        });
 
        Facades\View::composer('dashboard', function (View $view) {
            // ...
        });
    }
}

Advertencia Recuerda que si creas un nuevo proveedor de servicios para contener tus registros de compositores de vistas, deberás agregar el proveedor de servicios al array providers en el archivo de configuración config/app.php.

Ahora que hemos registrado el compositor, el método compose de la clase App\View\Composers\ProfileComposer se ejecutará cada vez que se renderice la vista profile. Veamos un ejemplo de la clase del compositor:

<?php
 
namespace App\View\Composers;
 
use App\Repositories\UserRepository;
use Illuminate\View\View;
 
class ProfileComposer
{
    /**
     * Crea un nuevo compositor de perfil.
     */
    public function __construct(
        protected UserRepository $users,
    ) {}
 
    /**
     * Vincula datos a la vista.
     */
    public function compose(View $view): void
    {
        $view->with('count', $this->users->count());
    }
}

Como puedes ver, todos los compositores de vistas se resuelven a través del contenedor de servicios, por lo que puedes hacer una inferencia de tipo para cualquier dependencia que necesites dentro del constructor de un compositor.

Adjuntar un Compositor a Múltiples Vistas

Puedes adjuntar un compositor de vistas a varias vistas a la vez pasando un array de vistas como primer argumento al método composer:

use App\Views\Composers\MultiComposer;
use Illuminate\Support\Facades\View;
 
View::composer(
    ['profile', 'dashboard'],
    MultiComposer::class
);

El método composer también acepta el carácter * como comodín, lo que te permite adjuntar un compositor a todas las vistas:

use Illuminate\Support\Facades;
use Illuminate\View\View;
 
Facades\View::composer('*', function (View $view) {
    // ...
});

Creadores de Vistas

Los "creadores" de vistas son muy similares a los compositores de vistas; sin embargo, se ejecutan inmediatamente después de que se instancia la vista en lugar de esperar hasta que la vista esté a punto de renderizarse. Para registrar un creador de vistas, utiliza el método creator:

use App\View\Creators\ProfileCreator;
use Illuminate\Support\Facades\View;
 
View::creator('profile', ProfileCreator::class);

Optimización de Vistas

De forma predeterminada, las vistas de plantillas Blade se compilan según la demanda. Cuando se ejecuta una solicitud que renderiza una vista, Laravel determinará si existe una versión compilada de la vista. Si el archivo existe, Laravel determinará si la vista sin compilar se ha modificado más recientemente que la vista compilada. Si la vista compilada no existe o la vista sin compilar se ha modificado, Laravel volverá a compilar la vista.

Compilar vistas durante la solicitud puede tener un pequeño impacto negativo en el rendimiento, así que Laravel proporciona el comando Artisan view:cache para precompilar todas las vistas utilizadas por tu aplicación. Para obtener un rendimiento mejorado, puedes ejecutar este comando como parte de tu proceso de implementación:

php artisan view:cache

Puedes usar el comando view:clear para limpiar la caché de vistas:

php artisan view:clear