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.0.0(3mo ago)13MITPHPPHP ^8.2CI passing

Since Jan 26Pushed 3mo 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 1mo ago

READMEChangelog (1)Dependencies (9)Versions (2)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/37c2c4f607b52cef9bcc22c962b5a96dace597671ca497fb952947ed54a29f36/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f616c697a686172622f6c61726176656c2d6d6f64756c61722d6a732f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](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).
- 🛠️ **Customizable Stubs**: Easily publish and override component templates.
- ✅ **Strictly Typed**: Fully compatible with Laravel 12 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
  ]
})
```

---

🛠️ Customization
----------------

[](#️-customization)

### Publishing Stubs

[](#publishing-stubs)

Customizing the generated code is easy. Publish the package stubs to your application:

```
php artisan modular:js-stubs
```

The stubs will be available in `stubs/modular-js/`.

### Configuration

[](#configuration)

You can change the stub path or other settings by publishing the config file:

```
php artisan vendor:publish --tag="modular-js-config"
```

---

📦 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.

---

🤝 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

37

—

LowBetter than 83% of packages

Maintenance80

Actively maintained with recent releases

Popularity6

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity46

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

Unknown

Total

1

Last Release

106d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/aa785764ac84cfd4a3237f3d4a3471ce97b479ac6fa2171a5ea8bf369c2377e5?d=identicon)[AlizHarb](/maintainers/AlizHarb)

---

Top Contributors

[![AlizHarb](https://avatars.githubusercontent.com/u/34816428?v=4)](https://github.com/AlizHarb "AlizHarb (1 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

[ijpatricio/mingle

Use Vue and React in Laravel Livewire Applications.

43445.4k2](/packages/ijpatricio-mingle)[robertboes/inertia-breadcrumbs

Laravel package to automatically share breadcrumbs to Inertia

56129.1k](/packages/robertboes-inertia-breadcrumbs)

PHPackages © 2026

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