PHPackages                             mchardians/bladescript - 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. mchardians/bladescript

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

mchardians/bladescript
======================

Auto transform javascript imports in laravel blade view to Vite assets

v1.1.3(1mo ago)011—0%MITPHPPHP ^8.3

Since Jun 19Pushed 1mo agoCompare

[ Source](https://github.com/mchardians/bladescript)[ Packagist](https://packagist.org/packages/mchardians/bladescript)[ RSS](/packages/mchardians-bladescript/feed)WikiDiscussions main Synced 2w ago

READMEChangelogDependencies (6)Versions (6)Used By (0)

Laravel Bladescript
===================

[](#laravel-bladescript)

[![Latest Version on Packagist](https://camo.githubusercontent.com/50275be7cf8b43e9a227b0e7b9258d087bd05ff771c147d9af8ef9598ef61613/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d636861726469616e732f626c6164657363726970742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mchardians/bladescript)[![Total Downloads](https://camo.githubusercontent.com/463de111ab0812b704a89053278e369e629c18f2914824b5842df40f03dd4f53/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d636861726469616e732f626c6164657363726970742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mchardians/bladescript)[![License](https://camo.githubusercontent.com/dcd486ea524169bd3eda021d3d1cf04d4639b2f2bff2edd0cd029ea635f8ae67/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d636861726469616e732f626c6164657363726970742e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mchardians/bladescript)

A smart precompiler for Laravel 11 that enables the use of native ES6 `import` syntax directly within Blade templates (`.blade.php`).

This package bridges the gap between the server-side Blade ecosystem and client-side bundlers (Vite/Rollup), allowing you to build pure monolith applications with Vanilla JavaScript that operate as smoothly as an SPA framework—without the overhead of complex build tools.

Features
--------

[](#features)

- **Native ES6 in Blade:** Use `import` and `export` directly inside `` tags.
- **Multi-Asset Support:** Seamlessly import JavaScript, CSS, and Media (Images/SVG).
- **Smart DOM Injection:** Imported CSS is automatically injected into the document head, bypassing strict MIME-type browser errors.
- **Dynamic Media Variables:** Imported media files are automatically transformed into pure JS variables containing the resolved Vite URL.
- **Highly Customizable:** Easily configure custom aliases and resolution paths to fit your project structure.

Requirements
------------

[](#requirements)

- PHP 8.2+
- Laravel 11.0+
- [vite-plugin-blade-script](https://www.npmjs.com/package/vite-plugin-blade-script) (Companion NPM package)

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

[](#installation)

You can install the package via composer:

```
composer require mchardians/bladescript
```

You can publish the config file with:

```
php artisan vendor:publish --tag="bladescript"
```

Configuration
-------------

[](#configuration)

By default, the package uses the following aliases mapped to the resources/ directory:

- @/ resolves to resources/js/
- \#/ resolves to resources/css/
- ~/ resolves to resources/media/

If you published the configuration file (config/bladescript.php), you can override these defaults:

```
return [
    'aliases' => [
        'js'    => ['prefix' => 'js:', 'path' => 'assets/scripts/'],
        'css'   => ['prefix' => 'css:', 'path' => 'assets/styles/'],
        'media' => ['prefix' => 'img:', 'path' => 'assets/images/'],
    ],
];
```

Usage
-----

[](#usage)

Write your code inside a `` tag within your Blade views or components.

1. **Javascript Imports**
    Supports static, dynamic, and side-effect imports out of the box.

    ```

        // Static Import (supports multiline destructuring)
        import { CardBottomSheet } from '@/components/CardBottomSheet';
        import {
            initGrafana,
            fetchMetrics
        } from '@/monitoring/k6-dashboard';

        // Dynamic Import
        const module = await import('@/utils/math-helper');

        // Side-effect Import
        import '@/bootstrap';

        CardBottomSheet.init();

    ```
2. **CSS Imports**
    Useful for building isolated Vanilla JS Custom Elements. The package safely transforms this into native DOM manipulation instructions to prevent browser blocking.

    ```

        import '#/components/bottom-sheet.css';
        import '#/animations/fade-in-up.css';

    ```
3. **Media Imports**
    Media imports are automatically compiled into constant variables ready to be used in your logic.

    ```

        import heroImage from '~/hero/grapol-banner.jpg';
        import logoSipp from '~/logo.svg';

        const imgEl = document.createElement('img');
        imgEl.src = logoSipp;
        document.body.appendChild(imgEl);

    ```

License
-------

[](#license)

The MIT License (MIT). Please see License File for more information.

###  Health Score

42

—

FairBetter than 88% of packages

Maintenance92

Actively maintained with recent releases

Popularity7

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity52

Maturing project, gaining track record

 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 ~2 days

Total

5

Last Release

37d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/139741559?v=4)[Mochammad Ardiansyah](/maintainers/mchardians)[@mchardians](https://github.com/mchardians)

---

Top Contributors

[![mchardians](https://avatars.githubusercontent.com/u/139741559?v=4)](https://github.com/mchardians "mchardians (4 commits)")

---

Tags

composer-packagelaravel

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/mchardians-bladescript/health.svg)

```
[![Health](https://phpackages.com/badges/mchardians-bladescript/health.svg)](https://phpackages.com/packages/mchardians-bladescript)
```

###  Alternatives

[craftcms/cms

Craft CMS

3.6k3.7M3.3k](/packages/craftcms-cms)[moonshine/moonshine

Laravel administration panel

1.3k268.2k86](/packages/moonshine-moonshine)[illuminate/view

The Illuminate View package.

13047.7M2.4k](/packages/illuminate-view)[tallstackui/tallstackui

TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications.

729176.2k16](/packages/tallstackui-tallstackui)[pressbooks/pressbooks

Pressbooks is an open source book publishing tool built on a WordPress multisite platform. Pressbooks outputs books in multiple formats, including PDF, EPUB, web, and a variety of XML flavours, using a theming/templating system, driven by CSS.

45844.8k1](/packages/pressbooks-pressbooks)[hasinhayder/tyro-dashboard

Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings

5495.1k](/packages/hasinhayder-tyro-dashboard)

PHPackages © 2026

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