Функция vite
Функция vite применяется в Blade-шаблонах для подключения точек входа (entrypoints), скомпилированных Vite. Она автоматически подставляет актуальные пути к CSS и JS файлам с хешами в имени для эффективного кэширования. Первым параметром передаётся название точки входа (обычно 'resources/js/app.js' или массив точек), вторым - опциональный массив опций для конфигурации.
Синтаксис
@vite($entrypoint, $options)
Пример
Подключим основной JavaScript файл в шаблоне:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel Vite</title>
@vite('resources/js/app.js')
</head>
<body>
<div id="app"></div>
</body>
</html>
Результат выполнения кода:
<script type="module" src="/build/assets/app-123abc.js"></script>
Пример
Подключим несколько точек входа, например, для страницы админки:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Panel</title>
@vite(['resources/css/admin.css', 'resources/js/admin.js'])
</head>
<body>
<div id="admin-panel"></div>
</body>
</html>
Результат выполнения кода:
<link rel="stylesheet" href="/build/assets/admin-456def.css" />
<script type="module" src="/build/assets/admin-789ghi.js"></script>
Пример
Передадим опции, чтобы изменить каталог сборки или добавить preload:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vite with Options</title>
@vite('resources/js/app.js', ['buildDirectory' => 'assets', 'preload' => true])
</head>
<body>
<div id="app"></div>
</body>
</html>
Результат выполнения кода:
<link rel="modulepreload" href="/assets/app-321cba.js" />
<script type="module" src="/assets/app-321cba.js"></script>
