Mojolicious::Plugin::AssetPack::Manual::Include - How to include assets in the template


This manual will show you various ways to include the assets generated by Mojolicious::Plugin::AssetPack.

Example asset

The description below uses the following example CSS asset. The same rules apply to other formats as well, such as JavaScript assets.

    "my-asset.css" => (


Here are some ways to use Mojolicious::Plugin::AssetPack.


The simplest way to include an asset is simply by using the asset helper:

  %= asset "my-asset.css"

This will result in a list of link tags in development mode and a single html link tag in production mode.

  • production

      <link rel="stylesheet" href="/packed/my-asset-9bb8a2a996dde4692205a829ba6d1c8a.css">
  • development

      <link rel="stylesheet" href="/packed/foo-9bb8a2a996dde4692205a829ba6d1c8a.css">
      <link rel="stylesheet" href="/packed/bar-9bbaa9de620a29a618a8277636acfe33.css">
      <link rel="stylesheet" href="/css/main.css">


AssetPack is able to insert your assets directly into your markup. This is useful if you want to make a one-page app and want to keep the number of requests to the server at a minimum. However, the images, fonts or any other external asset which again is referred to require more requests to the server. See below on how to include the asset directly in your template:

  %= asset "app.css", {inline => 1}

The same rules for expansion as for "Simple" apply here, but the the result will be a style tag, or a list of style tags:

  <style type="text/stylesheet">
    /* your css here */


You can pass on tag attributes to the generated HTML tag, with a list of arguments at the end:

  %= asset "app.css", {}, media => "print,handheld,embossed"

Full control

If you want, it is possible to add the assets manually to the template, using the "get" in Mojolicious::Plugin::AssetPack method:

  % for my $asset (asset->get("app.js")) {
    <script src="<%= $asset %>"></script>
  % }


Jan Henning Thorsen -