apility / laravel-mix-components
apility/laravel-mix-components
Installs: 4 243
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 2
Forks: 0
Open Issues: 3
Requires
- illuminate/support: ^7.0|^8.0
- illuminate/view: ^7.0|^8.0
Requires (Dev)
- laravel/framework: ^7.0|^8.0
This package is auto-updated.
Last update: 2024-10-15 14:43:06 UTC
README
An easier way of including laravel mix in your project.
Laravel Mix Components provides components for easily connecting your laravel mix setup to your html.
Whether you run build
, watch
, or hot
, this will read the manifest and insert the right <script>
and <link>
tags at the appropriate places.
Installation
$ composer require apility/laravel-mix-components
Usage
Insert the <x-mix-head />
and <x-mix-body />
blade components at the end of your <head>
and <body>
.
<!DOCTYPE html> <html> <head> ... <x-mix-head /> </head> <body> ... <x-mix-body /> </body> </html>
Configuration
Props
preload
Preloads asssets.
This prop only applies to <x-mix-head />
Example
<x-mix-head preload />
integrity
Generates SRI integrity hashes for each asset.
Must be a valid algorithm supportedd by PHP. Most browsers only supports sha256
, sha384
and sha512
.
Example
<x-mix-head integrity="sha384" /> <x-mix-body integrity="sha256,sha284" />
crossorigin
Sets the crossorigin CORS attribute. Often required by the browser if the asset is located on a different origin. If SRI is enabled, the crossorigin value must be set, otherwise the browser treats it like the integrity hash is invalid.
Example
<x-mix-head crossorigin="anonymous" /> <x-mix-body crossorigin="anonymous" />
manifest-directory
Laravel Mix will by default output the hot
and mix-manifest.json
files in the root of /public
.
Laravel Mix Components can be configured to read the file in another directory.
The path segment given will be appended to the base directory /public
.
This prop must be set on both <x-mix-head />
and <x-mix-body />
.
Example
<!-- Will look for manifest files in /public/manifests --> <x-mix-head manifest-directory="/manifests" /> <x-mix-body manifest-directory="/manifests" /> <!-- Will look for manifest files in /manifests --> <x-mix-head manifest-directory="../manifests" /> <x-mix-body manifest-directory="../manifests" />