# Laravel-Mix
You can include your `mix-manifest.json` file generated by [Laravel-Mix](https://laravel-mix.com) to automatically add preload/prefetch link elements to your document head.
## Basic example
```php
seo()
->mix()
->load();
```
**mix-manifest.json**
```json
{
"/js/app.js": "/js/app.js?id=123456789",
"/css/app.css": "/css/app.css?id=123456789"
}
```
**document ``**
```html
```
## Specify an alternate manifest path
```php
seo()
->mix()
->load(public_path('custom-manifest.json'));
```
## Ignore certain assets
By default, all assets are added to the document head. You can specify filters or rejections to hide certain assets like admin scripts. The callbacks are passed through the Laravel collection instance.
In this example, we will stop all **admin** frontend assets from prefetching by returning `null` within the provided map callback.
```php
use romanzipp\Seo\Conductors\Types\ManifestAsset;
seo()
->mix()
->map(static function(ManifestAsset $asset): ?ManifestAsset {
if (strpos($asset->path, 'admin') !== false) {
return null;
}
return $asset;
})
->load();
```
**mix-manifest.json**
```json
{
"/js/app.js": "/js/app.js?id=123456789",
"/js/admin.js": "/js/admin.js?id=123456789",
"/css/app.css": "/css/app.css?id=123456789",
"/css/admin.css": "/css/admin.css?id=123456789"
}
```
**document ``**
```html
```
## Provide an absolute URL
You can force your preloaded/prefetched assets to use an alternate URL by modifying the `url` attribute.
```php
use romanzipp\Seo\Conductors\Types\ManifestAsset;
seo()
->mix()
->map(static function(ManifestAsset $asset): ?ManifestAsset {
$asset->url = "http://localhost{$asset->url}";
return $asset;
})
->load();
```
**mix-manifest.json**
```json
{
"/js/app.js": "/js/app.js?id=123456789",
"/css/app.css": "/css/app.css?id=123456789"
}
```
**document ``**
```html
```
## Change mechanism
By default, all assets found in your mix file are inserted with the `prefetch` mechanism. You can read more about preloading and prefetching [in this article by css-tricks.com](https://css-tricks.com/prefetching-preloading-prebrowsing/).
You are also free to change the default `prefetch` value to `preload` using the map callback. The following code example will `preload` all assets containing "component" or otherwise fall back on `prefetch`.
```php
use romanzipp\Seo\Conductors\Types\ManifestAsset;
seo()
->mix()
->map(static function(ManifestAsset $asset): ?ManifestAsset {
$asset->rel = 'prefetch';
if (strpos($asset->path, 'component') !== false) {
$asset->rel = 'preload';
}
return $asset;
})
->load();
```
**mix-manifest.json**
```json
{
"/js/app.js": "/js/app.js?id=123456789",
"/js/app.routes.js": "/js/app.routes.js?id=123456789",
"/js/app.user-component.js": "/js/app.user-component.js?id=123456789",
"/js/app.news-component.js": "/js/app.news-component.js?id=123456789"
}
```
**document ``**
```html
```
## Asset resource type
Preloading content required a minimum of `href` and `as` attribute. This package will guess a [resource type](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) based on the provided file extension. Currently script, style, font, image and video are supported.
Feels free to change the resource type.
```php
use romanzipp\Seo\Conductors\Types\ManifestAsset;
seo()
->mix()
->map(static function(ManifestAsset $asset): ?ManifestAsset {
if (strpos($asset->path, 'virus') !== false) {
$asset->as = 'virus';
}
return $asset;
})
->load();
```
**mix-manifest.json**
```json
{
"/css/app.css": "/css/app.css?id=123456789",
"/js/app.js": "/js/app.routes.js?id=123456789",
"/data/totally-not-a-virus": "/data/totally-not-a-virus?id=123456789",
"/data/totally-not-a-virus": "/data/totally-not-a-virus?id=123456789"
}
```
**document ``**
```html
```