PHPackages                             flat3/babel-blade - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. flat3/babel-blade

ActiveLibrary[Templating & Views](/categories/templating)

flat3/babel-blade
=================

Blade support for inline Babel scripts

v1.0.2(5y ago)3174MITPHPPHP ^7.3|^8.0

Since Feb 6Pushed 5y agoCompare

[ Source](https://github.com/flat3/babel-blade)[ Packagist](https://packagist.org/packages/flat3/babel-blade)[ RSS](/packages/flat3-babel-blade/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (3)Dependencies (4)Versions (4)Used By (0)

Babel compiler for Laravel Blade
================================

[](#babel-compiler-for-laravel-blade)

This package allows you to safely write modern, inline JavaScript in blade templates. Compilation only happens at Blade template caching time, so has no effect on production performance.

Installation
------------

[](#installation)

To install the package via composer:

`composer require flat3/babel-blade`

The compiler expects a nodejs install on the same PATH that is being used by your PHP interpreter.

You must install babel (and normally the env preset) in your Laravel project:

`npm install --dev @babel/core @babel/preset-env`

The compiler looks for a babel configuration starting from the view root (normally resources/views) and searching upwards. You can therefore use any existing babel configuration file in your project, or you can create one in resources/views that will only be used for babel-blade.

For example at `resources/views/.babelrc.json`

```
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "ie": "11"
        }
      }
    ]
  ]
}

```

Usage
-----

[](#usage)

Babel-blade looks for script blocks that use the string literal `` so no other javascript or script block will be modified.

This script block using the babel config above:

```

(...args) => console.log(...args)

```

will be transformed at compile time into:

```

(function() { "use strict";

(function () {
  var _console;

  return (_console = console).log.apply(_console, arguments);
});

})();

```

Laravel Vapor
-------------

[](#laravel-vapor)

The Vapor build process clears the view caches and builds templates on first load server-side. This is incompatible with babel-blade, since nodejs etc. will not be available.

To work around this, invoke the build as part of the vapor deploy process as `BABEL_BLADE_CACHE=1 php artisan view:cache`. This will compile the templates locally into blade files in the view root, and add `@include`s to pull the compiled code in during compilation.

Polyfills
---------

[](#polyfills)

Babel implements async/await using generators, which need to be polyfilled on older platforms. Without the polyfill you'll see the error:

```
ReferenceError: Can't find variable: regeneratorRuntime

```

To solve this you can include an additional script tag that includes the polyfill, for example:

```

```

Blade directives
----------------

[](#blade-directives)

Because babel-blade runs early in the compilation process, directives such as `@json($src)` haven't been parsed yet and will be passed to Babel as they are.

You will then get failures such as `Support for the experimental syntax 'decorators-legacy' isn't currently enabled` as Babel tries to parse `@json`.

There is likely not a solution to this due to the order of execution in blade, instead use the style `"{{$src}}" with appropriate escaping.`

License
-------

[](#license)

Copyright © Chris Lloyd

Flat3 babel-blade is open-sourced software licensed under the \[MIT license\]

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity14

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity60

Established project with proven stability

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

3

Last Release

1927d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/67b55562fe987d2fcbb682d82a5cf0c92375abc6adf8be8a658da3ca31def862?d=identicon)[chrislloyd403](/maintainers/chrislloyd403)

---

Top Contributors

[![27pchrisl](https://avatars.githubusercontent.com/u/6286310?v=4)](https://github.com/27pchrisl "27pchrisl (7 commits)")

---

Tags

babelbabeljsbladelaravellaravelbladebabelbabeljs

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/flat3-babel-blade/health.svg)

```
[![Health](https://phpackages.com/badges/flat3-babel-blade/health.svg)](https://phpackages.com/packages/flat3-babel-blade)
```

###  Alternatives

[tightenco/jigsaw

Simple static sites with Laravel's Blade.

2.2k438.5k29](/packages/tightenco-jigsaw)[radic/blade-extensions

Laravel package providing additional Blade extensions: foreach (with $loop data like twig), break, continue, set,array (multiline), etc

271321.7k5](/packages/radic-blade-extensions)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)