Adonis JS: Using Laravel Mix function

Adonis JS: Using Laravel Mix function

I come from a Laravel background, so when I started developing a project in Adonis JS I was missing their most useful frontend tool: Laravel Mix

What I missed was the useful mix function, with this function you can use a hashed version of your assets because, you know, if you are always serving assets from the server with the same filename, the browser will serve the old version that it has stored, this could increase the speed of your site, but you will need to always serve the last version of your assets. To avoid this, developers can add a hash or create a function from scratch, but if Laravel has the function, why not use the same logic in Adonis JS?

The goal is to create a global function for the views. We can add it in start/hooks.js.

const { hooks } = require("@adonisjs/ignitor");
// Import the mix manifest file
const manifest = require("../public/mix-manifest");
hooks.after.providersBooted(() => {
const View = use("View");
// Creating the mix function in edge views"mix", function (asset) {
if (!manifest[`/${asset}`]) {
return "404-asset-not-found";
return manifest[`/${asset}`];

Then, restart your AdonisJS server and you can use it in your views in two different ways, using AdonisJS functions or Html.

{{ css(mix('css/your-styles.css')) }}
<!-- or -->
<link href="{{ mix('css/your-styles.css') }}" rel="stylesheet" />
My posts are not AI generated, they might be only AI corrected. The first draft is always my creation



Written by Helmer Davila

In other languages

Uma função frequentemente usada em projetos de Laravel

Adonis JS: Usando a função de Laravel mix