Agrupación de activos (Vite)

• Introducción
• Instalación y Configuración
  • Instalación de Node
  • Instalación de Vite y el Complemento de Laravel
  • Configuración de Vite
  • Carga de Scripts y Estilos
• Ejecución de Vite
• Trabajando con JavaScript
  • Alias
  • Vue
  • React
  • Inertia
  • Procesamiento de URL
• Trabajando con Hojas de Estilo
• Trabajando con Blade y Rutas
  • Procesamiento de Activos Estáticos con Vite
  • Refrescar al Guardar
  • Alias
• URLs Base Personalizadas
• Variables de Entorno
• Desactivar Vite en Pruebas
• Renderización del Lado del Servidor (SSR)
• Atributos de Etiquetas de Script y Estilo
  • Nonce de Política de Seguridad de Contenido (CSP)
  • Integridad de Subrecursos (SRI)
  • Atributos Arbitrarios
• Personalización Avanzada
  • Corrección de URL del Servidor de Desarrollo

Introducción

Vite es una herramienta moderna de construcción frontend que proporciona un entorno de desarrollo extremadamente rápido y empaqueta tu código para producción. Al construir aplicaciones con Laravel, normalmente utilizarás Vite para empaquetar los archivos CSS y JavaScript de tu aplicación en activos listos para producción.

Laravel se integra perfectamente con Vite al proporcionar un complemento oficial y una directiva Blade para cargar tus activos tanto en desarrollo como en producción.

Nota ¿Estás utilizando Laravel Mix? Vite ha reemplazado a Laravel Mix en nuevas instalaciones de Laravel. Para la documentación de Mix, visita el sitio web de Laravel Mix. Si deseas cambiar a Vite, consulta nuestra guía de migración.

Elegir entre Vite y Laravel Mix

Antes de pasar a Vite, las nuevas aplicaciones Laravel utilizaban Mix, que está alimentado por webpack, para empaquetar activos. Vite se centra en proporcionar una experiencia más rápida y productiva al construir aplicaciones JavaScript ricas. Si estás desarrollando una aplicación de una sola página (SPA), incluidas aquellas desarrolladas con herramientas como Inertia, Vite será la opción perfecta.

Vite también funciona bien con aplicaciones tradicionales renderizadas del lado del servidor con "JavaScript sprinkles", incluyendo aquellas que utilizan Livewire. Sin embargo, carece de algunas características que admite Laravel Mix, como la capacidad de copiar activos arbitrarios en la compilación que no se referencian directamente en tu aplicación JavaScript.

Migrar de Vuelta a Mix

¿Has iniciado una nueva aplicación Laravel utilizando nuestra estructura de Vite pero necesitas volver a Laravel Mix y webpack? No hay problema. Consulta nuestra guía oficial de migración de Vite a Mix.

Instalación y Configuración

Nota La siguiente documentación explica cómo instalar y configurar manualmente el complemento de Laravel Vite. Sin embargo, los kits de inicio de Laravel ya incluyen todo este andamiaje y son la forma más rápida de comenzar con Laravel y Vite.

Instalación de Node

Debes asegurarte de que Node.js (16+) y NPM estén instalados antes de ejecutar Vite y el complemento de Laravel:

node -v
npm -v

Puedes instalar fácilmente la última versión de Node y NPM mediante sencillos instaladores gráficos desde el sitio web oficial de Node. O, si estás utilizando Laravel Sail, puedes invocar a Node y NPM a través de Sail:

./vendor/bin/sail node -v
./vendor/bin/sail npm -v

Instalación de Vite y el Complemento de Laravel

Dentro de una instalación nueva de Laravel, encontrarás un archivo package.json en la raíz de la estructura de directorios de tu aplicación. El archivo package.json predeterminado ya incluye todo lo que necesitas para empezar a usar Vite y el complemento de Laravel. Puedes instalar las dependencias del frontend de tu aplicación a través de NPM:

npm install

Configuración de Vite

Vite se configura mediante un archivo vite.config.js en la raíz de tu proyecto. Eres libre de personalizar este archivo según tus necesidades, y también puedes instalar cualquier otro complemento que tu aplicación requiera, como @vitejs/plugin-vue o @vitejs/plugin-react.

El complemento de Laravel Vite requiere que especifiques los puntos de entrada para tu aplicación. Estos pueden ser archivos JavaScript o CSS e incluir lenguajes preprocesados como TypeScript, JSX, TSX y Sass.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Si estás construyendo una SPA, incluidas las aplicaciones construidas con Inertia, Vite funciona mejor sin puntos de entrada de CSS:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css', 
            'resources/js/app.js',
        ]),
    ],
});

En su lugar, debes importar tu CSS mediante JavaScript. Normalmente, esto se haría en el archivo resources/js/app.js de tu aplicación:

import './bootstrap';
import '../css/app.css'; 

El complemento de Laravel también admite múltiples puntos de entrada y opciones de configuración avanzadas, como puntos de entrada SSR.

Trabajando con un Servidor de Desarrollo Seguro

Si tu servidor web de desarrollo local sirve tu aplicación a través de HTTPS, es posible que encuentres problemas al conectarte al servidor de desarrollo de Vite.

Si estás utilizando Laravel Herd y has asegurado el sitio o estás utilizando Laravel Valet y has ejecutado el comando secure contra tu aplicación, puedes configurar el servidor de desarrollo de Vite para que use automáticamente los certificados TLS generados:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            detectTls: 'my-app.test', 
        }),
    ],
});

Cuando uses otro servidor web, debes generar un certificado de confianza y configurar Vite manualmente para que use los certificados generados:

// ...
import fs from 'fs'; 
 
const host = 'my-app.test'; 
 
export default defineConfig({
    // ...
    server: { 
        host, 
        hmr: { host }, 
        https: { 
            key: fs.readFileSync(`/path/to/${host}.key`), 
            cert: fs.readFileSync(`/path/to/${host}.crt`), 
        }, 
    }, 
});

Si no puedes generar un certificado de confianza para tu sistema, puedes instalar y configurar el complemento @vitejs/plugin-basic-ssl. Al utilizar certificados no confiables, deberás aceptar la advertencia del certificado del servidor de desarrollo de Vite en tu navegador siguiendo el enlace "Local" en tu consola al ejecutar el comando npm run dev.

Ejecutando el Servidor de Desarrollo en Sail en WSL2

Cuando ejecutas el servidor de desarrollo de Vite dentro de Laravel Sail en Windows Subsystem for Linux 2 (WSL2), debes agregar la siguiente configuración a tu archivo vite.config.js para asegurar que el navegador pueda comunicarse con el servidor de desarrollo:

// ...
 
export default defineConfig({
    // ...
    server: { 
        hmr: {
            host: 'localhost',
        },
    }, 
});

Si los cambios en tus archivos no se reflejan en el navegador mientras el servidor de desarrollo está en ejecución, también deberás configurar la opción server.watch.usePolling de Vite.

Carga de Scripts y Estilos

Con tu puntos de entrada de Vite configurados, ahora puedes hacer referencia a ellos en una directiva Blade @vite() que agregas al <head> de la plantilla principal de tu aplicación:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Si estás importando tu CSS mediante JavaScript, solo necesitas incluir el punto de entrada de JavaScript:

<!doctype html>
<head>
    {{-- ... --}}
 
    @vite('resources/js/app.js')
</head>

La directiva @vite detectará automáticamente el servidor de desarrollo de Vite e inyectará el cliente de Vite para habilitar el reemplazo de módulos en caliente. En modo de compilación, la directiva cargará tus activos compilados y versionados, incluido cualquier CSS importado.

Si es necesario, también puedes especificar la ruta de compilación de tus activos compilados al invocar la directiva @vite:

<!doctype html>
<head>
    {{-- Given build path is relative to public path. --}}
 
    @vite('resources/js/app.js', 'vendor/courier/build')
</head>

Activos en Línea

A veces puede ser necesario incluir el contenido sin procesar de los activos en lugar de vincularlo a la URL versionada del activo. Por ejemplo, es posible que necesites incluir el contenido del activo directamente en tu página al pasar contenido HTML a un generador de PDF. Puedes mostrar el contenido de los activos de Vite utilizando el método content proporcionado por la fachada Vite:

@php
use Illuminate\Support\Facades\Vite;
@endphp
 
<!doctype html>
<head>
    {{-- ... --}}
 
    <style>
        {!! Vite::content('resources/css/app.css') !!}
    </style>
    <script>
        {!! Vite::content('resources/js/app.js') !!}
    </script>
</head>

Ejecución de Vite

Hay dos formas de ejecutar Vite. Puedes ejecutar el servidor de desarrollo mediante el comando dev, que es útil durante el desarrollo local. El servidor de desarrollo detectará automáticamente los cambios en tus archivos y los reflejará instantáneamente en cualquier ventana del navegador abierta.

O, ejecutar el comando build versionará y empaquetará los activos de tu aplicación y los preparará para implementar en producción:

# Run the Vite development server...
npm run dev
 
# Build and version the assets for production...
npm run build

Si estás ejecutando el servidor de desarrollo en Sail en WSL2, es posible que necesites algunas opciones de configuración adicionales.

Trabajando con JavaScript

Alias

De forma predeterminada, el plugin de Laravel proporciona un alias común para ayudarte a empezar rápidamente e importar convenientemente los activos de tu aplicación:

{
    '@' => '/resources/js'
}

Puedes sobrescribir el alias '@' agregando el tuyo al archivo de configuración vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel(['resources/ts/app.tsx']),
    ],
    resolve: {
        alias: {
            '@': '/resources/ts',
        },
    },
});

Vue

Si deseas construir tu frontend utilizando el framework Vue, entonces también deberás instalar el complemento @vitejs/plugin-vue:

npm install --save-dev @vitejs/plugin-vue

Luego, puedes incluir el complemento en tu archivo de configuración vite.config.js. Hay algunas opciones adicionales que necesitarás cuando uses el complemento Vue con Laravel:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.js']),
        vue({
            template: {
                transformAssetUrls: {
                    // El complemento de Vue volverá a escribir las URL de los activos cuando se hagan referencia
                    // en Componentes de Archivo Único, para que apunten al servidor web de Laravel.
                    // Configurar esto como `null` permite que el complemento de Laravel
                    // vuelva a escribir las URL de los activos para que apunten al servidor de Vite.
                    // en su lugar.
                    base: null,
 
                    // El complemento de Vue analizará las URL absolutas y las tratará
                    // como rutas absolutas a archivos en disco. Configurar esto como
                    // `false` dejará las URL absolutas sin modificar, para que puedan
                    // hacer referencia a activos en el directorio público como se espera.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Nota Los kits de inicio de Laravel ya incluyen la configuración adecuada de Laravel, Vue y Vite. Consulta Laravel Breeze para la forma más rápida de comenzar con Laravel, Vue y Vite.

React

Si deseas construir tu frontend utilizando el framework React, entonces también deberás instalar el complemento @vitejs/plugin-react:

npm install --save-dev @vitejs/plugin-react

Luego, puedes incluir el complemento en tu archivo de configuración vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import react from '@vitejs/plugin-react';
 
export default defineConfig({
    plugins: [
        laravel(['resources/js/app.jsx']),
        react(),
    ],
});

Debes asegurarte de que cualquier archivo que contenga JSX tenga una extensión .jsx o .tsx, recordando actualizar tu punto de entrada, si es necesario, como se muestra arriba.

También necesitarás incluir la directiva Blade adicional @viteReactRefresh junto con tu directiva existente @vite.

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

La directiva @viteReactRefresh debe llamarse antes de la directiva @vite.

Nota Los kits de inicio de Laravel ya incluyen la configuración adecuada de Laravel, React y Vite. Consulta Laravel Breeze para la forma más rápida de comenzar con Laravel, React y Vite.

Inertia

El complemento de Laravel Vite proporciona una conveniente función resolvePageComponent para ayudarte a resolver tus componentes de página Inertia. A continuación, se muestra un ejemplo del ayudante en uso con Vue 3; sin embargo, también puedes utilizar la función en otros frameworks como React:

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
 
createInertiaApp({
  resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

Nota Los kits de inicio de Laravel ya incluyen la configuración adecuada de Laravel, Inertia y Vite. Consulta Laravel Breeze para la forma más rápida de comenzar con Laravel, Inertia y Vite.

Procesamiento de URL

Cuando uses Vite y hagas referencia a activos en el HTML, CSS o JS de tu aplicación, hay algunas advertencias que debes tener en cuenta. En primer lugar, si haces referencia a activos con una ruta absoluta, Vite no incluirá el activo en la compilación; por lo tanto, debes asegurarte de que el activo esté disponible en tu directorio público.

Al hacer referencia a rutas de activos relativas, debes recordar que las rutas son relativas al archivo donde se hacen referencia. Cualquier activo referenciado mediante una ruta relativa será reescrito, versionado y empaquetado por Vite.

Considera la siguiente estructura del proyecto:

public/
  taylor.png
resources/
  js/
    Pages/
      Welcome.vue
  images/
    abigail.png

El siguiente ejemplo muestra cómo Vite tratará las URL relativas y absolutas:

<!-- This asset is not handled by Vite and will not be included in the build -->
<img src="/taylor.png">
 
<!-- This asset will be re-written, versioned, and bundled by Vite -->
<img src="../../images/abigail.png">

Trabajando con Hojas de Estilo

Puedes obtener más información sobre el soporte de CSS en Vite en la documentación de Vite. Si estás utilizando plugins de PostCSS como Tailwind, puedes crear un archivo postcss.config.js en la raíz de tu proyecto y Vite lo aplicará automáticamente:

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

Nota Los kits de inicio de Laravel ya incluyen la configuración adecuada de Tailwind, PostCSS y Vite. O, si deseas usar Tailwind y Laravel sin usar uno de nuestros kits de inicio, consulta la guía de instalación de Tailwind para Laravel.

Trabajando con Blade y Rutas

Procesamiento de Activos Estáticos con Vite

Cuando hagas referencia a activos en tu JavaScript o CSS, Vite los procesará automáticamente y les asignará una versión. Además, al construir aplicaciones basadas en Blade, Vite también puede procesar y versionar activos estáticos a los que haces referencia únicamente en las plantillas Blade.

Sin embargo, para lograr esto, necesitas que Vite sea consciente de tus activos importándolos en el punto de entrada de la aplicación. Por ejemplo, si deseas procesar y versionar todas las imágenes almacenadas en resources/images y todas las fuentes almacenadas en resources/fonts, debes agregar lo siguiente en el punto de entrada resources/js/app.js de tu aplicación:

import.meta.glob([
  '../images/**',
  '../fonts/**',
]);

Estos activos ahora serán procesados por Vite cuando ejecutes npm run build. Luego, puedes hacer referencia a estos activos en las plantillas Blade utilizando el método Vite::asset, que devolverá la URL versionada para un activo dado:

<img src="{{ Vite::asset('resources/images/logo.png') }}">

Refrescar al Guardar

Cuando tu aplicación se construye utilizando la renderización del lado del servidor tradicional con Blade, Vite puede mejorar tu flujo de trabajo de desarrollo al actualizar automáticamente el navegador cuando realizas cambios en los archivos de vista de tu aplicación. Para comenzar, simplemente puedes especificar la opción refresh como true.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: true,
        }),
    ],
});

Cuando la opción refresh es true, guardar archivos en los siguientes directorios provocará que el navegador realice una actualización completa de la página mientras ejecutas npm run dev:

• app/View/Components/**
• lang/**
• resources/lang/**
• resources/views/**
• routes/**

Observar el directorio routes/** es útil si estás utilizando Ziggy para generar enlaces de ruta dentro del frontend de tu aplicación.

Si estos caminos predeterminados no se ajustan a tus necesidades, puedes especificar tu propia lista de caminos a observar:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: ['resources/views/**'],
        }),
    ],
});

Bajo el capó, el complemento de Laravel Vite utiliza el paquete vite-plugin-full-reload, que ofrece algunas opciones de configuración avanzadas para ajustar el comportamiento de esta característica. Si necesitas este nivel de personalización, puedes proporcionar una definición config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            refresh: [{
                paths: ['path/to/watch/**'],
                config: { delay: 300 }
            }],
        }),
    ],
});

Alias

Es común en aplicaciones JavaScript crear alias para directorios referenciados con regularidad. Pero también puedes crear alias para usar en Blade utilizando el método macro en la clase Illuminate\Support\Facades\Vite. Normalmente, los "macros" se deben definir dentro del método boot de un proveedor de servicios:

/**
 * Inicializa cualquier servicio de la aplicación.
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

Una vez que se haya definido un macro, se puede invocar dentro de tus plantillas. Por ejemplo, podemos usar el macro image definido anteriormente para hacer referencia a un activo ubicado en resources/images/logo.png:

<img src="{{ Vite::image('logo.png') }}" alt="Laravel Logo">

URLs Base Personalizadas

Si los activos compilados de Vite se implementan en un dominio diferente al de tu aplicación, como a través de un CDN, debes especificar la variable de entorno ASSET_URL en el archivo .env de tu aplicación:

ASSET_URL=https://cdn.example.com

Después de configurar la URL del activo, todas las URL reescritas de tus activos tendrán el prefijo del valor configurado:

https://cdn.example.com/build/assets/app.9dce8d17.js

Recuerda que Vite no reescribe las URL absolutas, por lo que no tendrán un prefijo.

Variables de Entorno

Puedes inyectar variables de entorno en tu JavaScript prefijándolas con VITE_ en el archivo .env de tu aplicación:

VITE_SENTRY_DSN_PUBLIC=http://example.com

Puedes acceder a las variables de entorno inyectadas a través del objeto import.meta.env:

import.meta.env.VITE_SENTRY_DSN_PUBLIC

Desactivar Vite en Pruebas

La integración de Vite de Laravel intentará resolver tus activos mientras ejecutas tus pruebas, lo que requiere que ejecutes el servidor de desarrollo de Vite o construyas tus activos.

Si prefieres simular Vite durante las pruebas, puedes llamar al método withoutVite, que está disponible para cualquier prueba que extienda la clase TestCase de Laravel:

use Tests\TestCase;
 
class ExampleTest extends TestCase
{
    public function test_without_vite_example(): void
    {
        $this->withoutVite();
 
        // ...
    }
}

Si deseas deshabilitar Vite para todas las pruebas, puedes llamar al método withoutVite desde el método setUp en tu clase base TestCase:

<?php
 
namespace Tests;
 
use Illuminate\Foundation\Testing\TestCase as BaseTestCase;
 
abstract class TestCase extends BaseTestCase
{
    use CreatesApplication;
 
    protected function setUp(): void
    {
        parent::setUp();
 
        $this->withoutVite();
    }
}

Renderización del Lado del Servidor (SSR)

El complemento de Laravel Vite facilita la configuración de la renderización del lado del servidor con Vite. Para empezar, crea un punto de entrada de SSR en resources/js/ssr.js y especifica el punto de entrada pasando una opción de configuración al complemento de Laravel:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
        }),
    ],
});

Para asegurarte de no olvidar reconstruir el punto de entrada de SSR, te recomendamos que aumentes el script "build" en el archivo package.json de tu aplicación para crear tu compilación de SSR:

"scripts": {
     "dev": "vite",
     "build": "vite build" 
     "build": "vite build && vite build --ssr" 
}

Luego, para construir y iniciar el servidor SSR, puedes ejecutar los siguientes comandos:

npm run build
node bootstrap/ssr/ssr.js

Si estás utilizando SSR con Inertia, puedes usar en su lugar el comando Artisan inertia:start-ssr para iniciar el servidor SSR:

php artisan inertia:start-ssr

Nota Los kits de inicio de Laravel ya incluyen la configuración adecuada de Laravel, Inertia SSR y Vite. Consulta Laravel Breeze para la forma más rápida de comenzar con Laravel, Inertia SSR y Vite.

Atributos de Etiquetas de Script y Estilo

Nonce de Política de Seguridad de Contenido (CSP)

Si deseas incluir un atributo nonce en tus etiquetas de script y estilo como parte de tu Directiva de seguridad de contenido, puedes generar o especificar un nonce utilizando el método useCspNonce dentro de un middleware personalizado:

<?php
 
namespace App\Http\Middleware;
 
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Vite;
use Symfony\Component\HttpFoundation\Response;
 
class AddContentSecurityPolicyHeaders
{
    /**
     * Maneja una solicitud entrante.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        Vite::useCspNonce();
 
        return $next($request)->withHeaders([
            'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",
        ]);
    }
}

Después de invocar el método useCspNonce, Laravel incluirá automáticamente los atributos nonce en todas las etiquetas de script y estilo generadas.

Si necesitas especificar el nonce en otro lugar, incluida la Directiva @route de Ziggy incluida en los kits de inicio de Laravel, puedes recuperarlo usando el método cspNonce:

@routes(nonce: Vite::cspNonce())

Si ya tienes un nonce que te gustaría indicar a Laravel que use, puedes pasar el nonce al método useCspNonce:

Vite::useCspNonce($nonce);

Integridad de Subrecursos (SRI)

Si tu manifiesto de Vite incluye hash integrity para tus activos, Laravel agregará automáticamente el atributo integrity en cualquier etiqueta de script y estilo que genere para hacer cumplir la Integridad de Subrecursos. Por defecto, Vite no incluye el hash integrity en su manifiesto, pero puedes habilitarlo instalando el complemento de NPM vite-plugin-manifest-sri:

npm install --save-dev vite-plugin-manifest-sri

Luego, puedes habilitar este complemento en tu archivo vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import manifestSRI from 'vite-plugin-manifest-sri';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
        }),
        manifestSRI(),
    ],
});

Si es necesario, también puedes personalizar la clave del manifiesto donde se puede encontrar el hash de integridad:

use Illuminate\Support\Facades\Vite;
 
Vite::useIntegrityKey('custom-integrity-key');

Si deseas desactivar completamente esta detección automática, puedes pasar false al método useIntegrityKey:

Vite::useIntegrityKey(false);

Atributos Arbitrarios

Si necesitas incluir atributos adicionales en tus etiquetas de script y estilo, como el atributo data-turbo-track, puedes especificarlos mediante los métodos useScriptTagAttributes y useStyleTagAttributes. Normalmente, estos métodos deberían invocarse desde un proveedor de servicios:

use Illuminate\Support\Facades\Vite;
 
Vite::useScriptTagAttributes([
    'data-turbo-track' => 'reload', // Specify a value for the attribute...
    'async' => true, // Specify an attribute without a value...
    'integrity' => false, // Exclude an attribute that would otherwise be included...
]);
 
Vite::useStyleTagAttributes([
    'data-turbo-track' => 'reload',
]);

Si necesitas añadir atributos condicionalmente, puedes pasar un callback que recibirá la ruta de origen del activo, su URL, su fragmento de manifiesto y el manifiesto completo:

use Illuminate\Support\Facades\Vite;
 
Vite::useScriptTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $src === 'resources/js/app.js' ? 'reload' : false,
]);
 
Vite::useStyleTagAttributes(fn (string $src, string $url, array|null $chunk, array|null $manifest) => [
    'data-turbo-track' => $chunk && $chunk['isEntry'] ? 'reload' : false,
]);

Advertencia Los argumentos $chunk y $manifest serán null mientras el servidor de desarrollo de Vite esté en ejecución.

Personalización Avanzada

De serie, el complemento de Laravel Vite utiliza convenciones sensatas que deberían funcionar para la mayoría de las aplicaciones; sin embargo, a veces es posible que necesites personalizar el comportamiento de Vite. Para habilitar opciones adicionales de personalización, ofrecemos los siguientes métodos y opciones que se pueden utilizar en lugar de la directiva Blade @vite:

<!doctype html>
<head>
    {{-- ... --}}
 
    {{
        Vite::useHotFile(storage_path('vite.hot')) // Customize the "hot" file...
            ->useBuildDirectory('bundle') // Customize the build directory...
            ->useManifestFilename('assets.json') // Customize the manifest filename...
            ->withEntryPoints(['resources/js/app.js']) // Specify the entry points...
    }}
</head>

Dentro del archivo vite.config.js, deberías especificar la misma configuración:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
 
export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'storage/vite.hot', // Customize the "hot" file...
            buildDirectory: 'bundle', // Customize the build directory...
            input: ['resources/js/app.js'], // Specify the entry points...
        }),
    ],
    build: {
      manifest: 'assets.json', // Customize the manifest filename...
    },
});

Corrección de URL del Servidor de Desarrollo

Algunos complementos dentro del ecosistema de Vite asumen que las URL que comienzan con una barra inclinada siempre apuntarán al servidor de desarrollo de Vite. Sin embargo, debido a la naturaleza de la integración con Laravel, esto no es así.

Por ejemplo, el complemento vite-imagetools genera URLs como las siguientes mientras Vite está sirviendo tus activos:

<img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">

El complemento vite-imagetools espera que la URL de salida sea interceptada por Vite y que el complemento pueda manejar todas las URL que comienzan con /@imagetools. Si estás utilizando complementos que esperan este comportamiento, deberás corregir manualmente las URL. Puedes hacer esto en tu archivo vite.config.js utilizando la opción transformOnServe.

En este ejemplo particular, agregaremos la URL del servidor de desarrollo a todas las ocurrencias de /@imagetools dentro del código generado:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { imagetools } from 'vite-imagetools';
 
export default defineConfig({
    plugins: [
        laravel({
            // ...
            transformOnServe: (code, devServerUrl) => code.replaceAll('/@imagetools', devServerUrl+'/@imagetools'),
        }),
        imagetools(),
    ],
});

Ahora, mientras Vite está sirviendo activos, generará URLs que apuntan al servidor de desarrollo de Vite:

- <img src="/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">
+ <img src="http://[::1]:5173/@imagetools/f0b2f404b13f052c604e632f2fb60381bf61a520">