Laravel Modular JS 🚀

Laravel Modular JS is the official JavaScript bridge for Laravel Modular. It provides first-class support for modern frontend frameworks (Vue, React, Nuxt.js) within a modular architecture.

✨ 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

Install the package via Composer:

composer require alizharb/laravel-modular-js

📖 Usage

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

1. Inertia.js (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)

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

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)

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

🧭 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

• Laravel Modular - The core modular system.
• Livewire Integration - Livewire bridge for Laravel Modular.
• Laravel Themer - Theme management, previewing, diagnostics, and design tokens.

🤝 Contributing

Please see CONTRIBUTING for details.

📄 License

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

Made with ❤️ by Ali Harb