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.

v1.5.0(5mo ago)081↓75%2MITPHPPHP ~8.1.0|~8.2.0|~8.3.0

Since Sep 30Pushed 5mo 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 1mo ago

READMEChangelog (10)Dependencies (2)Versions (11)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 @inertiajs/inertia @inertiajs/vue3 @vitejs/plugin-vue laravel-vite-plugin vite vue --save-dev
    ```

    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 vue from '@vitejs/plugin-vue';
    import path from 'path';

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

    ```
    import { createApp, h } from 'vue'
    import { createInertiaApp } from '@inertiajs/vue3'
    // import Default from '@/Layouts/Default.vue' // uncomment if you want to use a default layout

    createInertiaApp({
        resolve: (name) => {
            const pages = import.meta.glob('../views/Pages/**/*.vue', { eager: true });
            let page = pages[`../views/Pages/${name}.vue`];
            // uncomment if you want to use a default layout
            /* if (page.default.layout === undefined) {
                page.default.layout = Default;
            } */
            return page;
        },
        setup({ el, App, props, plugin }) {
            createApp({ render: () => h(App, props) })
                .use(plugin)
                .mount(el);
        },
    });
    ```
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": {
            "baseUrl": ".",
            "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:

```