33. Cómo reutilizar la plantilla Jetstream

En este capítulo de Laravel, aprenderás cómo reutilizar la plantilla predeterminada de Jetstream en diferentes partes de tu proyecto Laravel. Aprenderás cómo utilizar los componentes Blade de Jetstream para incluir la plantilla en diferentes páginas de tu aplicación web, y cómo personalizar los componentes Blade de Jetstream para adaptarlos a tus necesidades. También cubriremos cómo compartir datos y componentes entre las páginas de tu aplicación web y cómo los componentes Blade de Jetstream pueden mejorar la eficiencia y la productividad de tu desarrollo web. Al final de este capítulo, tendrás un conocimiento profundo de cómo reutilizar y personalizar la plantilla de Jetstream en diferentes partes de tu proyecto Laravel.


2 comentarios

Inicia sesión para comentar

Comentarios:

  • Francesc Pineda Segarra

    Francesc Pineda Segarra hace 4 meses

    Se que no es necesario, pero estaría bien si decides anular un capítulo, saber el porqué.

    Llevo dándome cuenta en varios vídeos que bastantes vídeos son re-aprovechados desde Laravel 8, y ojo que no lo digo como crítica a que esto se haga. Pero si que termina llegando un momento que se causa desconcierto, y nos toca asumir que o bien eso está dando problemas como en su momento parece que lo fue con BootStrap, o bien que esto se ha derivado a otro curso.

    Sea el motivo que sea, no creo que a ninguno le importe, pero por lo menos entendemos un poco mejor el cambio del guión del curso.

    • Francesc Pineda Segarra hace 4 meses

      Ahora ya no es:

      php artisan vendor:publish --tag-jetstream-views

      Ahora es:

      php artisan jetstream:install
      php artisan vendor:publish --provider="Laravel\Jetstream\JetstreamServiceProvider" --tag="jetstream-views"

      Pero a pesar de ello, no me pasa las vistas para poderlas personalizar.

    • Jesus Ismael Arroyo Castro hace 3 meses

      Hola, que versión de Laravel utilizas? Yo estoy usando la 10 y ya no es necesario publicarlos, ya los tiene en resources→views→components

    • Francesc Pineda Segarra hace 3 meses

      Estoy con la 10, y a mi si me hizo falta.

      Ten en cuenta que hay explicaciones que te hacen empezar de cero, y yo he procurado ir manteniendo lo que ya estaba previamente hecho, y de ese modo los scripts integrados en composer no se ejecutan a menos que lo hagas manual.

      Seguramente sea por eso que te ha funcionado Y yo lo tuve que estar buscando.

    • Jesus Ismael Arroyo Castro hace 3 meses

      Si es lo que veo, de igual forma en caso de que me suceda lo mismo ya se como solucionar, veo que lo que sigue del curso no esta actualizado a la versión 10.

  • Walter

    Walter hace 1 año

    ? Reutilizando la plantilla de Jetstream

    Veamos cómo convertir la plantilla de Jetstream en nuestra plantilla principal y poder extenderla a todas las vistas de nuestra aplicación.

    La plantilla la encontramos en resources/views/layouts/app.blade.php

    Podemos eliminar la sección Header de esta plantilla y luego agregamos el resaltado al nav en navigation-dropdown.blade.php agregando la clase shadow de Tailwind:

    <nav x-data="{ open: false }" class="bg-white border-b border-gray-100 shadow">

    Este documento está dividido en dos secciones:

    • Primary Navigation Menu
    • Responsive Navigation Menu

          

    ? Publicamos los componentes que vienen con Jetstream:

    php artisan vendor:publish --tag-jetstream-views

    Este comando copia todas las vistas que utiliza Jetstream y las coloca en la ruta views/vendor/jetstream/components

     

    ? Personalizando el logo

    La primera sección contiene el componente de logo en application-mark.blade.php donde vemos el logo en formato svg y podemos cambiarlo por el nuestro.

     

    ? Personalizando los enlaces

    Luego de la sección del logo está la sección Navigation Links donde podemos agregar otros enlaces:

    <x-jet-nav-link>
    	Prueba
    </x-jet-nav-link>

    Ahora debemos agregar el nuevo enlace también en la sección para móviles Responsive Navigation Menu:

    <x-jet-responsive-nav-link>
    	Prueba
    </x-jet-responsive-nav-link>

     

    Esta forma de agregar (y luego editar) cada nuevo enlace es algo incómoda.

    Para evitar hacerlo así agreguemos, en la parte superior de la plantilla, las directivas:

    @php
    $nav_links = [
    	[
    		'name' => 'Dashboard',
    		'route' => route('dashboard'),
    		'active' => request()->routeIs('dashboard')
    	],
    	[
    		'name' => 'Prueba',
    		'route' => route('prueba'),
    		'active' => request()->routeIs('prueba')
    	],
    ];
    @endphp

    Ahora podemos recorrer este array y generar los enlaces en:

     

    • Primary Navigation Menu:
    @foreach ($nav_links as $nav_link)
    <x-jet-nav-link 
    	href="{{ $nav_link['route'] }}" 
    	:active="{{ $nav_link['active'] }}"
    >
    	{{ $nav_link['name'] }}
    </x-jet-nav-link>
    @endforeach

     

    • Responsive Navigation Menu:
    @foreach ($nav_links as $nav_link)
    <x-jet-responsive-nav-link 
    	href="{{ $nav_link['route'] }}" 
    	:active="{{ $nav_link['active'] }}"
    >
    	{{ $nav_link['name'] }}
    </x-jet-responsive-nav-link>            
    @endforeach

          

    ? Cambiando el comportamiento del logo

          Damos un nombre a la ruta principal:

    Route::get('/', function () {
    	return view('welcome');
    })->name('home');

          Volvemos a navigation-dropdown.blade.php y en la sección de Logo hacemos que apunte a la ruta home:

    <div class="flex-shrink flex items-center">
    	<a href="{{ route('home') }}">
    		<x-jet-application-mark class="block h-9 w-auto"/>
    	</a>
    </div>

          

    ? Extendamos esta plantilla a la vista principal

    Abrimos la vista resources/views/welcome.blade.php, borramos su contenido y extendemos del componente app/View/Components/AppLayout.php

    <x-app-layout>
    
    </x-app-layout>