Skip to content

7. Asset Dependencies

Ahmad Syamim edited this page Oct 8, 2021 · 2 revisions

Assets Management (Optional)

This package provides integration with Orchestra/Asset component. All the features are explained in the official documentation. If you don't need the extra functionality you can skip this section. Orchestra/Asset is NOT installed along with this package - you have to install it manually.

To install Orchestra\Asset you must add it in your composer.json (see the Official Documentation):

"orchestra/asset": "~3.0",
"orchestra/support": "~3.0",

and run composer update. Then add the Service Providers in your Providers array (in app/config/app.php):

Orchestra\Asset\AssetServiceProvider::class,
Collective\Html\HtmlServiceProvider::class,

Add the Asset facade in your aliases array:

'Asset' => Orchestra\Support\Facades\Asset::class,

Now you can leverage all the power of Orchestra\Asset package. However the syntax can become quite cumbersome when you are using Themes + Orchestra/Asset, so some Blade-specific sugar has been added to ease your work. Here how to build your views:

In any blade file you can include a script or a css:

@css('filename')
@js('filename')

Please note that you are just defining your css/js files but not actually dumping them in html. Usually you only need write your css/js declaration in one place on the Head/Footer of you page. So open your master layout and place:

{!! Asset::styles() !!}
{!! Asset::scripts() !!}

exactly where you want write your declarations.

Assets dependencies

This is an Orchestra/Asset feature explained well in the official documentation. Long story short:

@css ('filename', 'alias', 'depends-on')
@js  ('filename', 'alias', 'depends-on')

and your assets dependencies will be auto resolved. Your assets will be exported in the correct order. The biggest benefit of this approach is that you don't have to move all your declerations in your master layout file. Each sub-view can define it's requirements and they will auto-resolved in the correct order with no doublications. Awesome! A short example:

@js  ('jquery.js',    'jquery')
@js  ('bootstrap.js', 'bootstrap', jquery)