Agrupación de Activos (Vite)

• Introducción
• Instalación y Configuración
  • Instalando Node
  • Instalando Vite y el Plugin de Laravel
  • Configurando Vite
  • Cargando Tus Scripts y Estilos
• Ejecutando Vite
• Trabajando Con JavaScript
  • Alias
  • Vue
  • React
  • Inertia
  • Procesamiento de URL
• Trabajando Con Hojas de Estilo
• Trabajando Con Blade y Rutas
  • Procesando Activos Estáticos Con Vite
  • Refrescar al Guardar
  • Alias
• URL Base Personalizadas
• Variables de Entorno
• Deshabilitando Vite en Pruebas
• Renderizado 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
  • Corrigiendo URL del Servidor de Desarrollo

Introducción

Vite es una herramienta de construcción moderna para frontend que proporciona un entorno de desarrollo extremadamente rápido y agrupa tu código para producción. Al construir aplicaciones con Laravel, típicamente usarás Vite para agrupar los archivos CSS y JavaScript de tu aplicación en activos listos para producción. Laravel se integra perfectamente con Vite al proporcionar un plugin oficial y una directiva de Blade para cargar tus activos para desarrollo y producción.

[!NOTA] ¿Estás usando 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 hacer la transición a Vite, las nuevas aplicaciones Laravel utilizaban Mix, que está impulsado por webpack, al agrupar 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 Página Única (SPA), incluidas aquellas desarrolladas con herramientas como Inertia, Vite será la opción perfecta. Vite también funciona bien con aplicaciones renderizadas en el servidor de manera tradicional con "sprinkles" de JavaScript, 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 construcción que no se referencian directamente en tu aplicación JavaScript.

Migrando de vuelta a Mix

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

Instalación y Configuración

[!NOTA] La siguiente documentación aborda cómo instalar y configurar manualmente el plugin de Laravel Vite. Sin embargo, los kits de inicio de Laravel ya incluyen toda esta infraestructura y son la forma más rápida de comenzar a trabajar con Laravel y Vite.

Instalando Node

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

node -v
npm -v

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

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

Instalando Vite y el Plugin de Laravel

Dentro de una nueva instalación 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 comenzar a utilizar Vite y el plugin de Laravel. Puedes instalar las dependencias del frontend de tu aplicación a través de NPM:

npm install

Configurando Vite

Vite se configura a través de un archivo vite.config.js en la raíz de tu proyecto. Puedes personalizar este archivo según tus necesidades, y también puedes instalar cualquier otro plugin que requiera tu aplicación, como @vitejs/plugin-vue o @vitejs/plugin-react. El plugin Laravel Vite requiere que especifiques los puntos de entrada para tu aplicación. Estos pueden ser archivos JavaScript o CSS, e incluyen 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, deberías importar tu CSS a través de JavaScript. Típicamente, esto se haría en el archivo resources/js/app.js de tu aplicación:

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

El plugin 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 está sirviendo tu aplicación a través de HTTPS, es posible que encuentres problemas al conectarte al servidor de desarrollo Vite. Si estás usando Laravel Herd y has asegurado el sitio, o si estás utilizando Laravel Valet y has ejecutado el comando de seguridad contra tu aplicación, el plugin Laravel Vite detectará automáticamente y utilizará el certificado TLS generado por ti. Si aseguraste el sitio utilizando un host que no coincide con el nombre del directorio de la aplicación, puedes especificar manualmente el host en el archivo vite.config.js de tu aplicación:

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

Al utilizar otro servidor web, debes generar un certificado confiable y configurar manualmente Vite 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 plugin @vitejs/plugin-basic-ssl. Al usar certificados no confiables, necesitarás aceptar la advertencia del certificado para el 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

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

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

Si los cambios en tu archivo no se reflejan en el navegador mientras se está ejecutando el servidor de desarrollo, también puede que necesites configurar la opción server.watch.usePolling de Vite.

Cargando tus Scripts y Estilos

Con tus puntos de entrada de Vite configurados, ahora puedes hacer referencia a ellos en un directiva @vite() de Blade que añades a <head> de la plantilla raíz de tu aplicación:

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

Si estás importando tu CSS a través de 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 Vite e inyectará el cliente de Vite para habilitar Hot Module Replacement. En modo de compilación, la directiva cargará tus activos compilados y versionados, incluyendo cualquier CSS importado. Si es necesario, también puedes especificar la ruta de construcció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>

Recursos en línea

A veces puede ser necesario incluir el contenido en bruto de los activos en lugar de enlazar 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:

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

Ejecutando Vite

Hay dos formas en las que puedes ejecutar Vite. Puedes ejecutar el servidor de desarrollo a través del comando dev, que es útil mientras desarrollas localmente. El servidor de desarrollo detectará automáticamente los cambios en tus archivos y los reflejará instantáneamente en cualquier ventana del navegador abierta. O, ejecutando el comando build se versionarán y agruparán los activos de tu aplicación, preparándolos para que los despliegues 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 configuraciones adicionales.

Trabajando Con JavaScript

Por defecto, el plugin de Laravel proporciona un alias común para ayudarte a comenzar rápidamente e importar de manera conveniente los activos de tu aplicación:

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

Puedes sobrescribir el alias '@' añadiendo el tuyo propio 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 necesitarás instalar el plugin @vitejs/plugin-vue:

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

Luego puedes incluir el plugin en tu archivo de configuración vite.config.js. Hay algunas opciones adicionales que necesitarás al usar el plugin de 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: {
                    // The Vue plugin will re-write asset URLs, when referenced
                    // in Single File Components, to point to the Laravel web
                    // server. Setting this to `null` allows the Laravel plugin
                    // to instead re-write asset URLs to point to the Vite
                    // server instead.
                    base: null,
 
                    // The Vue plugin will parse absolute URLs and treat them
                    // as absolute paths to files on disk. Setting this to
                    // `false` will leave absolute URLs un-touched so they can
                    // reference assets in the public directory as expected.
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

[!NOTA] Los starter kits de Laravel ya incluyen la configuración adecuada de Laravel, Vue y Vite. Consulta Laravel Breeze para la manera más rápida de comenzar con Laravel, Vue y Vite.

React

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

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

Luego puedes incluir el plugin 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(),
    ],
});

Deberás 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 @viteReactRefresh adicional junto con tu directiva @vite existente.

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

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

[!NOTA] Los starter kits 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 plugin Laravel Vite proporciona una función resolvePageComponent conveniente para ayudarte a resolver tus componentes de página Inertia. A continuación se muestra un ejemplo del uso del helper 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)
  },
});

[!NOTE] Los starter kits 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

Al utilizar Vite y hacer referencia a activos en el HTML, CSS o JS de tu aplicación, hay un par de advertencias a considerar. Primero, si haces referencia a activos con una ruta absoluta, Vite no incluirá el activo en la construcción; por lo tanto, debes asegurarte de que el activo esté disponible en tu directorio público. Debes evitar usar rutas absolutas al usar un punto de entrada CSS dedicado porque, durante el desarrollo, los navegadores intentarán cargar estas rutas desde el servidor de desarrollo de Vite, donde se aloja el CSS, en lugar de desde tu directorio público. Al hacer referencia a rutas de activos relativas, debes recordar que las rutas son relativas al archivo donde se hacen las referencias. Cualquier activo referenciado a través de 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 demuestra cómo Vite tratará las URLs 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 aprender más sobre el soporte de CSS de 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 starter kits de Laravel ya incluyen la configuración adecuada de Tailwind, PostCSS y Vite. O, si deseas usar Tailwind y Laravel sin utilizar uno de nuestros starter kits, consulta la guía de instalación de Tailwind para Laravel.

Trabajando con Blade y Rutas

Procesando Activos Estáticos con Vite

Al hacer referencia a activos en tu JavaScript o CSS, Vite los procesa y versiona automáticamente. Además, al construir aplicaciones basadas en Blade, Vite también puede procesar y versionar activos estáticos que referencias únicamente en plantillas Blade. Sin embargo, para lograr esto, necesitas hacer que Vite reconozca tus activos importando los activos estáticos 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, deberías añadir 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 al ejecutar npm run build. Luego puedes referenciar estos activos en 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') }}">

Actualizando al Guardar

Cuando tu aplicación está construida utilizando renderizado 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 empezar, 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 hará que el navegador realice una actualización completa de la página mientras ejecutas npm run dev:

• app/Livewire/**
• 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 estas rutas predeterminadas no se adaptan a tus necesidades, puedes especificar tu propia lista de rutas a observar:

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

Bajo el capó, el plugin de Laravel Vite utiliza el paquete vite-plugin-full-reload, que ofrece algunas opciones de configuración avanzadas para afinar el comportamiento de esta función. Si necesitas este nivel de personalización, puedes proporcionar una definición de 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 regularmente. Pero también puedes crear alias para usar en Blade utilizando el método macro en la clase Illuminate\Support\Facades\Vite. Típicamente, los "macros" deben definirse dentro del método boot de un proveedor de servicios:

/**
 * Bootstrap any application services.
 */
public function boot(): void
{
    Vite::macro('image', fn (string $asset) => $this->asset("resources/images/{$asset}"));
}

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

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

URL Base Personalizadas

Si tus activos compilados por Vite se despliegan en un dominio separado de tu aplicación, como a través de un CDN, debes especificar la variable de entorno ASSET_URL dentro del archivo .env de tu aplicación:

ASSET_URL=https://cdn.example.com

Después de configurar la URL de los activos, todas las URL reescritas a tus activos se prefijarán con el valor configurado:

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

Recuerda que las URL absolutas no son reescritas por Vite, por lo que no se les añadirá 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

Desactivando 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 que 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:

test('without vite example', function () {
    $this->withoutVite();
 
    // ...
});

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

Si deseas desactivar 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
{
    protected function setUp(): void
    {
        parent::setUp();
 
        $this->withoutVite();
    }
}

Renderizado del lado del servidor (SSR)

El plugin de Laravel Vite hace que sea sencillo configurar el renderizado del lado del servidor con Vite. Para comenzar, crea un punto de entrada SSR en resources/js/ssr.js y especifica el punto de entrada pasando una opción de configuración al plugin 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 que no olvides reconstruir el punto de entrada SSR, recomendamos aumentar el script "build" en el package.json de tu aplicación para crear tu construcción SSR:

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

Entonces, 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 el comando Artisan inertia:start-ssr para iniciar el servidor SSR:

php artisan inertia:start-ssr

[!NOTA] Los starter kits 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 Política 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
{
    /**
     * Handle an incoming request.
     *
     * @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, incluyendo la directiva @route de Ziggy incluida con los kits de inicio de Laravel, puedes recuperarlo utilizando el método cspNonce:

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

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

Vite::useCspNonce($nonce);

Integridad de Subrecursos (SRI)

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

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

Puedes habilitar este plugin 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 deshabilitar esta auto-detección por completo, 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 a través de los métodos useScriptTagAttributes y useStyleTagAttributes. Típicamente, estos métodos deben 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 agregar atributos de forma condicional, puedes pasar un callback que recibirá la ruta de origen del recurso, su URL, su fragmento del manifiesto y todo el manifiesto:

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,
]);

[!WARNING] Los argumentos $chunk y $manifest serán null mientras se esté ejecutando el servidor de desarrollo de Vite.

Personalización Avanzada

Desde el primer momento, el plugin Vite de Laravel 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 de personalización adicionales, ofrecemos los siguientes métodos y opciones que se pueden usar 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...
            ->createAssetPathsUsing(function (string $path, ?bool $secure) { // Customize the backend path generation for built assets...
                return "https://cdn.example.com/{$path}";
            })
    }}
</head>

Dentro del archivo vite.config.js, deberás 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...
    },
});

Corrigiendo las URL del Servidor de Desarrollo

Algunos plugins dentro del ecosistema 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, este no es el caso. Por ejemplo, el plugin vite-imagetools genera URLs como las siguientes mientras Vite sirve tus activos:

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

El plugin vite-imagetools espera que la URL de salida sea interceptada por Vite y que el plugin pueda manejar todas las URL que comienzan con /@imagetools. Si estás utilizando plugins 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 en particular, prependimos 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á URL que apuntan al servidor de desarrollo de Vite:

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