Cómo incluir JavaScript en Laravel 11: una guía paso a paso para todos los escenarios

En Laravel 11, agregar JavaScript a tu proyecto puede ser muy sencillo, gracias a Vite, el paquete de recursos predeterminado. A continuación se explica cómo configurar JavaScript para todo tipo de escenarios, desde la inclusión global hasta la carga condicional en vistas específicas.

1. Incluir JavaScript en todos los archivos

En muchos casos, es posible que desees incluir JavaScript globalmente en tu aplicación Laravel. A continuación se explica cómo organizar y agrupar JavaScript para su inclusión universal.

Paso 1: coloque su archivo JavaScript

1. Ubicación: almacena archivos JavaScript en el directorio resources/js. Por ejemplo, si su archivo se llama custom.js, guárdelo como resources/js/custom.js.
2. Organizar: para proyectos complejos con múltiples archivos JavaScript, puede organizarlos dentro de subdirectorios en resources/js, como resources/js/modules/custom.js.

Paso 2: compila JavaScript con Vite

Laravel 11 usa Vite para administrar activos. Para configurarlo para agrupar su JavaScript:

1. Incluir en app.js: abre resources/js/app.js e importa tu archivo personalizado:

   import './custom.js';

1. Importación directa en vistas: alternativamente, si solo desea JavaScript en ciertas vistas, puede usar la directiva @vite en la plantilla Blade:

   @vite('resources/js/custom.js')

Paso 3: configurar vite.config.js

Asegúrese de que vite.config.js esté configurado para manejar las importaciones de @vite correctamente. De forma predeterminada, debería verse así:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Paso 4: Ejecute Vite

Para compilar tus recursos con Vite:

• Para desarrollo: ejecute npm run dev
• Para producción: ejecute npm run build

Paso 5: cargar JavaScript en plantillas Blade

Para incluir archivos JavaScript en tus plantillas, usa la directiva @vite:

    
    @vite('resources/js/app.js')


    

Resumen

• Almacenar archivos JavaScript en resources/js.
• Importar en app.js para inclusión global o incluirlo directamente en plantillas Blade según sea necesario.
• Compila recursos usando Vite.
• Utilice @vite en las plantillas Blade para cargar JavaScript.

Con esta configuración, JavaScript estará disponible en todo el sitio en un proyecto de Laravel 11.

2. Comprender el orden de renderizado de Blade

Al incluir JavaScript de forma condicional en vistas específicas, es esencial comprender el orden en el que se representan las plantillas de Blade.

En Laravel, los diseños se procesan primero, seguidos de vistas individuales y parciales. Aquí está el proceso de renderizado:

1. El diseño se representa primero, con marcadores de posición (@yield y @section) creados para la inyección de contenido.
2. Las vistas secundarias o parciales se procesan a continuación, y su contenido se inserta en los marcadores de posición del diseño.

Debido a este orden, si desea agregar condicionalmente archivos JavaScript en el diseño según el contenido de la vista infantil, las comprobaciones de variables estándar no funcionarán. Deberá utilizar las directivas @stack y @push de Blade para un manejo más flexible de JavaScript específico de la página.

3. Incluir JavaScript condicionalmente en vistas específicas mediante Stack y Push

Para agregar JavaScript a vistas específicas, las directivas @stack y @push de Laravel ofrecen una solución eficiente, permitiéndole incluir scripts condicionalmente en el diseño.

Paso 1: Defina una pila en su diseño

En tu diseño, crea una pila para scripts específicos de la página:

    
    @vite('resources/js/app.js')
    @stack('scripts') 


    @yield('content')

Paso 2: enviar scripts desde vistas infantiles

En el archivo Blade específico que necesita JavaScript, envíelo a la pila de scripts:

@extends('layout')

@section('content')
    
@endsection

@push('scripts')
    @vite('resources/js/custom.js')
@endpush

Con esta configuración, custom.js solo se incluirá cuando se cargue esa vista específica. Este método proporciona una solución limpia que funciona con el orden de representación de Laravel, asegurando que los archivos JavaScript se incluyan condicionalmente según sea necesario.

¿Dónde declarar @push?

La ubicación de las declaraciones @push en una vista Blade es importante principalmente para la legibilidad y el orden de ejecución. A continuación se explica cómo utilizar @push de forma eficaz:

1. Ubicación en la vista: si bien puede colocar @push en cualquier lugar de una vista Blade, es una buena práctica colocarlo al final del archivo, generalmente después del contenido de la @sección. Esto mantiene el código relacionado con scripts separado del contenido principal, mejorando la legibilidad y el mantenimiento.

   @extends('layout')

   @section('content')
       
   @endsection

   @push('scripts')
       @vite('resources/js/custom.js')
   @endpush

1. Orden de varias declaraciones @push: si tiene varias declaraciones @push para la misma pila (por ejemplo, @push('scripts')), se agregarán en el orden en que aparecen en la vista. Por ejemplo:

   @push('scripts')
       
   @endpush

   @push('scripts')
       
   @endpush

En este caso, script1.js se cargará antes que script2.js porque @push agrega contenido a la pila en el orden en que se declara.

1. Uso de @push en parciales y componentes: @push también se puede usar en parciales de Blade (por ejemplo, @include) o componentes de Blade. Esto es útil para incluir scripts o estilos específicos de vista directamente dentro de componentes reutilizables, lo que facilita la administración de dependencias.

   
   

       
   

   @push('scripts')
       @vite('resources/js/partial-specific.js')
   @endpush

Cuando este parcial se incluye en una vista, el archivo.js específico parcial se agregará a la pila de scripts en el archivo de diseño.

1. Controle el orden con @prepend: si scripts específicos necesitan cargarse antes que otros en la misma pila, puede usar @prepend en lugar de @push. @prepend coloca el contenido al principio de la pila, lo que permite un mayor control sobre el orden de carga.

   @prepend('scripts')
       
   @endprepend

   @push('scripts')
       
   @endpush

Aquí, critic.js se cargará antes que non_critical.js, independientemente de su ubicación en el archivo Blade.

Conclusiones clave

• Coloque @push al final de las vistas para mayor claridad y facilidad de mantenimiento.
• El orden se determina según la ubicación dentro de la vista, y las declaraciones @push anteriores se cargan primero.
• @push funciona en parciales y componentes, lo que facilita la inclusión de dependencias específicas de la vista.
• Utilice @prepend para scripts que deben cargarse primero en la misma pila.

4. Alternativa: uso de declaraciones condicionales en línea en el diseño

Si necesita un control más preciso sobre cuándo se incluye JavaScript, las declaraciones condicionales de Laravel permiten la lógica basada en rutas o variables directamente en el diseño.

Incluir condicionalmente según la ruta

Puedes usar comprobaciones de ruta directamente en el diseño para incluir JavaScript según la ruta actual:

@if (request()->routeIs('some.route.name'))
    @vite('resources/js/custom.js')
@endif

Incluir condicionalmente según una variable

Para cargar secuencias de comandos condicionalmente basadas en variables, puede establecer una marca en el controlador o en la vista secundaria y luego verificarla en el diseño:

1. En tu controlador:

   return view('your.view', ['loadCustomJS' => true]);

1. En el diseño:

   @if (!empty($loadCustomJS))
       @vite('resources/js/custom.js')
   @endif

Este enfoque le permite controlar la carga de JavaScript en función de variables o rutas específicas, lo que brinda flexibilidad para configuraciones de páginas personalizadas.

Resumen

Aquí hay una descripción general rápida de los métodos analizados:

• Inclusión global: coloque JavaScript en app.js e inclúyalo globalmente usando @vite.
• Inclusión condicional con Stack y Push: utilice las directivas @stack y @push para un manejo flexible y modular de scripts, lo que garantiza que los scripts solo se carguen en las vistas donde se necesitan.
• Declaraciones condicionales en el diseño: utilice comprobaciones basadas en rutas o variables de controlador para cargar JavaScript condicionalmente directamente en el diseño.

Estas opciones te permiten controlar la carga de JavaScript con precisión, haciendo que tu proyecto de Laravel 11 sea eficiente y fácil de mantener.