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).
• 🛠️ Customizable Stubs: Easily publish and override component templates.
• ✅ Strictly Typed: Fully compatible with Laravel 12 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
  ]
})

🛠️ Customization

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

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

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

📦 Related Packages

• Laravel Modular - The core modular system.
• Livewire Integration - Livewire bridge for Laravel Modular.

🤝 Contributing

Please see CONTRIBUTING for details.

📄 License

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

Made with ❤️ by Ali Harb