DOCSEARCHbyAlgolia
Submit Docs

Modular

website·Indexed 32 days ago

https://docs.ismodular.com/

A modular architecture framework for building applications with Laravel and Vue 3. It provides an opinionated directory structure, a comprehensive set of generators for creating modules, controllers, models, and Vue components, and built-in support for ACL, multi-language translations, and themed UI components.

Tokens
17.2K
Snippets
102
Records
137
Agent score
60%

What's inside Modular

  1. Overview of the Modular development framework

    Modular is a starter project designed to streamline web application development using the VILT stack (Vue 3, Inertia, Laravel, and Tailwind). It provides a documented foundation for new applications, focusing on developer experience and intuitive connectivity between application parts. Key built-in features include:

    • A themed Admin Panel integrated with Tailwind CSS.
    • An Access Control List (ACL) system for managing users and roles.
    • Auto-loaded custom Vue 3 components written in JavaScript.
    • A custom CLI for generating new modules to increase development speed.
    • A comprehensive translation system for multi-language support.
    • Pre-configured frontend build steps using Vite.

  2. Overview of the Modular ACL System

    The Access Control List (ACL) Module manages authorization rules using roles and permissions. It is built on Spatie's Laravel-permission package. Permissions can be assigned to roles, and roles can be assigned to users. For granular control, permissions can be assigned directly to users; direct assignments override any permissions inherited from roles.

  3. Understand Modular's Vue 3 Component Architecture

    Modular uses a custom-built component system designed for maximum control and ease of customization. The architecture follows these constraints:

    • Framework: Vue 3 (Pure JavaScript, no TypeScript).
    • Styling: Tailwind CSS exclusively (no Sass, Less, or Stylus).
    • Location: Components are stored in ./resources/js/Components rather than node_modules, allowing developers to modify Tailwind classes directly in the source files.
    • Design: Lightweight common components that can be extended or replaced per project.

  4. Understand the architecture of Modular public sites vs backoffice

    Modular distinguishes between the administrative backoffice and the public site:

    1. Rendering: The backoffice uses Inertia.js to serve Vue Pages. The public site uses traditional Laravel routing to deliver standard Blade views (though Vue components can be integrated into Blade views).
    2. Styling: The backoffice uses Tailwind CSS. The public site is flexible and supports plain CSS, Tailwind CSS, or other frameworks like Bootstrap.
    3. Routing: Public routes for a module are defined in modules/{moduleName}/routes/site.php. Backoffice (restricted) routes are defined in modules/{moduleName}/routes/app.php.

  5. Understand the Modular Architecture project structure

    The Modular Project uses a Modular Architecture where applications are segmented into functional modules. All Modular Modules depend on the Core Modules.

    Modules are organized using a 'Paired Structuring' approach to separate backend and frontend logic while remaining linked via Inertia:

    • modules/moduleName: Contains Laravel-related files (backend).
    • resources/js/Pages/moduleName: Contains Vue-related files (frontend).
    • Inertia serves as the bridge connecting these two directories.

  6. Understand the Modular project directory structure

    Modular uses an opinionated directory structure to separate backend logic from frontend presentation. Communication between the two is handled via the Inertia.js adapter.

    • modules/: Contains PHP/Laravel code organized by domain (e.g., Customer, Calendar). Each module typically contains its own ServiceProvider, Controllers, Requests, Models, and routes. Note that modules do not contain views directories because views are handled by Vue.js.
    • resources/: Contains Vue.js related code, including Pages, Components, CSS, and JS configurations.
    ./modules
├── Calendar
│   ├── CalendarServiceProvider.php
│   ├── Http
│   │   ├── Controllers
│   │   └── Requests
│   ├── Models
│   │   └── Calendar.php
│   └── routes
│       └── app.php
└── Customer
    ├── CustomerServiceProvider.php
    ├── Http
    │   ├── Controllers
    │   └── Requests
    ├── Models
    │   └── Customer.php
    └── routes
        └── app.php

  7. Understand the purpose of built-in Core Modules

    Modular Projects include several inherent Core Modules that provide foundational system functionality:

    • Support: Provides basic and common utilities used by other modules.
    • User: Handles the User Management System, integrating with Authentication and ACL.
    • ACL: Provides a GUI for managing Roles and Permissions, powered by the Spatie Laravel-permission package.
    • AdminAuth: Manages authentication workflows, including login, logout, forgot password, and reset password.
    • Dashboard: The default landing domain where users are redirected after a successful login.

  8. Meet the system requirements for Modular

    To install and run Modular, you must have an environment capable of supporting a clean installation of Laravel 13. The minimum tested versions for the required JavaScript runtime and package manager are Node.js >= 20.11.1 and NPM >= 10.2.4.
    # Minimum required versions
node -v # >= 20.11.1
npm -v  # >= 10.2.4

  9. Automate user creation for custom profiles using Model Observers

    When users are created by system administrators, you can automate the creation of the associated user account by using a Laravel Model Observer on the custom model (e.g., Customer model). Use the created event listener to trigger the creation of a User record with the corresponding profile_type and profile_id. This approach can also be used to automatically sync ACL roles and permissions for the new user.

  10. Display backend validation errors with AppFormErrors

    The AppFormErrors component automatically integrates with Laravel/Inertia.js backend validation to display a list of form errors to the user.
    <AppFormErrors class="mb-4" />

  12. Modify the theme toggle switcher

    The 'Toggle Theme' button, located in the top right corner of the screen, is defined in the resources/js/Components/AppTopBar.vue file. You can customize the behavior or appearance of the switcher by modifying this Vue component.