PHPackages                             inventor96/inertia-mako - 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. inventor96/inertia-mako

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

inventor96/inertia-mako
=======================

The Mako adapter for Inertia.js.

v2.3.4(2w ago)0148↓88.2%2MITPHPPHP >=8.1

Since Sep 30Pushed 2w ago1 watchersCompare

[ Source](https://github.com/inventor96/inertia-mako)[ Packagist](https://packagist.org/packages/inventor96/inertia-mako)[ RSS](/packages/inventor96-inertia-mako/feed)WikiDiscussions main Synced today

READMEChangelog (10)Dependencies (6)Versions (23)Used By (2)

Inertia.js Mako Adapter
=======================

[](#inertiajs-mako-adapter)

An [Inertia.js](https://inertiajs.com/) server-side adapter for the PHP [Mako framework](https://makoframework.com/).

The examples below are for Vue.js.

Installation
------------

[](#installation)

1. Install the composer and npm packages:

    ```
    composer create-project mako/app  # from mako's documentation
    cd
    composer require inventor96/inertia-mako
    npm install --save-dev @inertiajs/vue3 @inertiajs/vite @vitejs/plugin-vue laravel-vite-plugin vite vue
    ```

    Yes, the laravel vite plugin is intentional. We could create our own, but that would pretty much be reinventing the wheel, or just changing the name while the underlying code is untouched. Note that when running `npm run dev` later, the Laravel plugin will report the `APP_URL` as undefined, but that's OK for our situation.
2. Set other npm configs:
    `package.json`

    ```
    {
        "private": true,
        "type": "module",
        "scripts": {
            "dev": "vite",
            "build": "vite build",
            "serve": "vite preview"
        },
        ...
    }
    ```
3. Create the vite config:
    `vite.config.js`

    ```
    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    import inertia from '@inertiajs/vite';
    import vue from '@vitejs/plugin-vue';
    import path from 'path';

    export default defineConfig({
        plugins: [
            laravel({
                input: 'app/resources/js/app.js',
                refresh: true,
            }),
            inertia(),
            vue({
                template: {
                    transformAssetUrls: {
                        base: null,
                        includeAbsolute: false,
                    },
                },
            }),
        ],
        resolve: {
            alias: {
                '@': path.resolve(__dirname, 'app/resources/views'),
            },
        },
        build: {
            outDir: 'public',
            assetsDir: 'build',
            emptyOutDir: false,
        },
    });
    ```

    Notes about the `build` config:

    - Standard practice is to set `outDir` to the `public` directory, since that's where Mako serves static assets from.
    - `assetsDir` can be set to whatever you want, but `build` is a common choice that doesn't conflict with Mako's default `assets` directory.
        - You should probably add this directory to your `.gitignore` file (and other ignore files), since it will be generated by Vite and doesn't need to be committed to version control.
        - You could leave it as the default `assets`, but that would make it harder to distinguish between Vite assets and Mako's or your own in any ignore files.
    - `emptyOutDir` should be set to `false` to prevent Vite from deleting the entire public directory on each build. We want to keep the `index.php` file and any other static assets in there. As long as your ignore files are configured correctly, you shouldn't have to worry about any leftover files from the build process causing issues.
4. Create the JS app file:
    `app/resources/js/app.js`

    ```
    import { createInertiaApp } from '@inertiajs/vue3'

    createInertiaApp({
        pages: '../views/Pages',
    });
    ```
5. Enable the package in Mako:
    `app/config/application.php`

    ```
    [
        'packages' => [
            'web' => [
                inventor96\Inertia\InertiaPackage::class,
            ],
        ],
    ];
    ```
6. Register the middlewares:
    `app/http/routing/middleware.php`

    ```
    $dispatcher->registerGlobalMiddleware(inventor96\Inertia\InertiaCsrf::class);
    $dispatcher->registerGlobalMiddleware(inventor96\Inertia\InertiaInputValidation::class);
    $dispatcher->registerGlobalMiddleware(inventor96\Inertia\InertiaMiddleware::class);

    // optionally, define the middleware order. e.g.:
    $dispatcher->setMiddlewarePriority(inventor96\Inertia\InertiaCsrf::class, 50);
    $dispatcher->setMiddlewarePriority(inventor96\Inertia\InertiaInputValidation::class, 60);
    $dispatcher->setMiddlewarePriority(inventor96\Inertia\InertiaMiddleware::class, 70);
    ```
7. Create a JSconfig so your IDE knows where things are (optional): `jsconfig.json`

    ```
    {
        "compilerOptions": {
            "paths": {
                "@/*": ["./app/resources/views/*"]
            }
        },
        "exclude": ["node_modules", "public"]
    }
    ```

Configuration
-------------

[](#configuration)

If you would like to override the default configuration, create a new file at `app/config/packages/inertia/inertia.php`.

The following configuration items and their defaults are as follows:

```