PHPackages                             alizharb/laravel-modular-js - 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. [Utility & Helpers](/categories/utility)
4. /
5. alizharb/laravel-modular-js

ActiveLibrary[Utility & Helpers](/categories/utility)

alizharb/laravel-modular-js
===========================

The official JavaScript bridge for Laravel Modular offering automatic discovery and modular component resolution for Vue, Nuxt and React.

v1.1.0(1mo ago)04MITPHPPHP ^8.2CI passing

Since Jan 26Pushed 1mo agoCompare

[ Source](https://github.com/AlizHarb/laravel-modular-js)[ Packagist](https://packagist.org/packages/alizharb/laravel-modular-js)[ GitHub Sponsors](https://github.com/alizharb)[ RSS](/packages/alizharb-laravel-modular-js/feed)WikiDiscussions main Synced 1w ago

READMEChangelog (1)Dependencies (18)Versions (3)Used By (0)

Laravel Modular JS 🚀
====================

[](#laravel-modular-js-)

[![Latest Version on Packagist](https://camo.githubusercontent.com/04d07d0c215c6fe924bc3ef70cc65e825040cfd0daa44238a37b5933a6ee1448/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f616c697a686172622f6c61726176656c2d6d6f64756c61722d6a732e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/alizharb/laravel-modular-js)[![GitHub Tests Action Status](https://camo.githubusercontent.com/8ef62337ddf420d3e7629c83d379fed75feb7b5ead079dcb080104239389e227/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f616c697a686172622f6c61726176656c2d6d6f64756c61722d6a732f74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/alizharb/laravel-modular-js/actions)[![License](https://camo.githubusercontent.com/f1fd43233b136eaae0aecf063aba8d4ce37e324cc927796b963743d70faa4b9e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f616c697a686172622f6c61726176656c2d6d6f64756c61722d6a732e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)

**Laravel Modular JS** is the official JavaScript bridge for [Laravel Modular](https://github.com/alizharb/laravel-modular). It provides first-class support for modern frontend frameworks (Vue, React, Nuxt.js) within a modular architecture.

✨ Features
----------

[](#-features)

- 🏗️ **Modular Artisan Command**: Enhanced `modular:js` command with `--module` support.
- ⚛️ **Vue, React & Nuxt Support**: Generate components for your preferred frontend framework.
- 🔍 **Automatic Discovery**: Built-in resolution for modular components (Inertia.js & Nuxt).
- 🧭 **Native Generation**: Uses package-owned generator templates without publishing application stubs.
- 🩺 **Diagnostics Ready**: Designed to work with Laravel Modular 1.2 `modular:doctor`, `modular:status`, and `modular:debug`.
- 🤖 **Laravel Boost Support**: Ships Boost guidance so agents understand modular frontend conventions.
- ✅ **Strictly Typed**: Compatible with Laravel 11/12/13 and PHP 8.2+.

🚀 Installation
--------------

[](#-installation)

Install the package via Composer:

```
composer require alizharb/laravel-modular-js
```

📖 Usage
-------

[](#-usage)

### Generating Modular Components

[](#generating-modular-components)

Use the modular `modular:js` command to generate components inside your modules. You can optionally generate a matching controller with the `--controller` or `-c` flag.

```
# Generate a Vue component with a Controller
php artisan modular:js Post/Index --module=Blog --controller

# Generate a React component
php artisan modular:js Post/Show --module=Blog --react

# Generate a Nuxt component
php artisan modular:js Shared/Button --module=Blog --nuxt
```

- **Vue Path**: `modules/Blog/resources/js/Pages/Post/Index.vue`
- **React Path**: `modules/Blog/resources/js/Pages/Post/Show.jsx`
- **Nuxt Path**: `modules/Blog/resources/js/components/Shared/Button.vue`
- **Controller**: `modules/Blog/app/Http/Controllers/Post/IndexController.php` (if requested)

---

🔗 Framework Integration
-----------------------

[](#-framework-integration)

### 1. Inertia.js (Vue & React)

[](#1-inertiajs-vue--react)

Inertia requires a **Resolver** to map modular component names (e.g., `Blog::Post/Index`) to physical files. This package provides a helper you can use in your `app.js`.

#### Vue 3 / React Example (`resources/js/app.js`)

[](#vue-3--react-example-resourcesjsappjs)

```
import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolveModularComponent } from '../../vendor/alizharb/laravel-modular-js/resources/js/resolver';

createInertiaApp({
    resolve: (name) => resolveModularComponent(name, import.meta.glob([
        './Pages/**/*.vue',
        '../../modules/*/resources/js/Pages/**/*.vue'
    ])),
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el);
    },
});
```

### 2. Nuxt.js

[](#2-nuxtjs)

Nuxt uses auto-importing, so it **does not need a runtime resolver**. Instead, you simply tell Nuxt to look for components in your module directories via `nuxt.config.ts`.

#### Nuxt Configuration (`nuxt.config.ts`)

[](#nuxt-configuration-nuxtconfigts)

```
export default defineNuxtConfig({
  components: [
    '~/components', // Standard components
    { path: '../../modules/*/resources/js/components', pathPrefix: false } // Modular components
  ]
})
```

---

🧭 Native Generation
-------------------

[](#-native-generation)

Laravel Modular JS intentionally does not publish application stubs. The command generates clean Vue, React, and Nuxt entry points from package-owned templates so projects stay aligned with package updates and do not accumulate stale stub copies.

After changing module frontend structure, run:

```
php artisan modular:doctor
php artisan modular:check
php artisan modular:debug Blog --json
```

---

📦 Related Packages
------------------

[](#-related-packages)

- [Laravel Modular](https://github.com/alizharb/laravel-modular) - The core modular system.
- [Livewire Integration](https://github.com/alizharb/laravel-modular-livewire) - Livewire bridge for Laravel Modular.
- [Laravel Themer](https://github.com/alizharb/laravel-themer) - Theme management, previewing, diagnostics, and design tokens.

---

🤝 Contributing
--------------

[](#-contributing)

Please see [CONTRIBUTING](https://github.com/alizharb/laravel-modular/blob/main/.github/CONTRIBUTING.md) for details.

📄 License
---------

[](#-license)

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

---

Made with ❤️ by Ali Harb

###  Health Score

40

—

FairBetter than 86% of packages

Maintenance92

Actively maintained with recent releases

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity49

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

Total

2

Last Release

40d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/34816428?v=4)[Ali Harb](/maintainers/AlizHarb)[@AlizHarb](https://github.com/AlizHarb)

---

Top Contributors

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

---

Tags

laravelmodulesreactmodularinertiajsvuelaravel-modularautomatic-discovery

###  Code Quality

TestsPest

Static AnalysisPHPStan

Code StyleLaravel Pint

Type Coverage Yes

### Embed Badge

![Health badge](/badges/alizharb-laravel-modular-js/health.svg)

```
[![Health](https://phpackages.com/badges/alizharb-laravel-modular-js/health.svg)](https://phpackages.com/packages/alizharb-laravel-modular-js)
```

###  Alternatives

[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

329575.9k35](/packages/codewithdennis-filament-select-tree)[ijpatricio/mingle

Use Vue and React in Laravel Livewire Applications.

44176.4k3](/packages/ijpatricio-mingle)

PHPackages © 2026

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