PHPackages mattbromley/inertia-statamic - 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. [Framework](/categories/framework) 4. / 5. mattbromley/inertia-statamic ActiveLibrary[Framework](/categories/framework) mattbromley/inertia-statamic ============================ A fork of the Inertia.js Statamic adapter by Adam Campbell v1.2.4(1y ago)31.6k—0%1MITPHPPHP ^8.0 Since Feb 23Pushed 1y agoCompare [ Source](https://github.com/MattBromley98/inertia-statamic)[ Packagist](https://packagist.org/packages/mattbromley/inertia-statamic)[ RSS](/packages/mattbromley-inertia-statamic/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (5)Dependencies (5)Versions (16)Used By (0) Inertia.js adapter for Statamic =============================== [](#inertiajs-adapter-for-statamic) [Statamic](https://statamic.com) server side adapter for [Inertia.js](https://inertiajs.com) to build single-page apps, without building an API. This package has been forked and modified to support updated Dependencies, specifically Inertia V2. Requirements ------------ [](#requirements) - PHP 8 or higher - Inertia V2 (Inertia V1 support has been dropped) - Front-end framework of Svelte, Vue 2/3, or React - Statamic installed and working on your project Installation ------------ [](#installation) You can install the latest stable version of the package through Composer. ``` composer require mattbromley/inertia-statamic ``` Usage ----- [](#usage) ### Getting Started [](#getting-started) The easiest way to get started using this adapter is by forking/using the template repository on my GitHub! You can find this [here](https://github.com/MattBromley98/laravel-inertia-cms-template)! This includes a basic setup of this adapter in a Inertia/Svelte/Laravel project, with basic components for SEO, Navigation all Premade along with Dynamic Components! ### Setup [](#setup) The Inertia adapter works for any page or entry content available through Statamic Collections. By default, all Inertia-enabled pages will be expecting an `app` template, which should be located at `resources/views/app.blade.php`. This is the base page that any Inertia app is looking for, and should contain the `@inertia` directive. The template can be defined either at the collection or page level, but it must be `app`. ``` @vite(['resources/css/app.css', 'resources/js/app.js']) @inertiaHead @inertia ``` In your `app.js` file you must set up your Inertia app and reference where your Vue pages will live: ``` // app.js import { createApp, h } from 'vue' import { App, plugin } from '@inertiajs/inertia-vue3' const el = document.getElementById('app') createApp({ render: () => h(App, { initialPage: JSON.parse(el.dataset.page), resolveComponent: name => require(`./Pages/${name}`).default, }) }).use(plugin).mount(el) ``` Finally, you need to create a `Pages` folder in `resources/js`. This is where your app will be looking for Vue components that match the resolved naming of your Statamic pages. ``` |_ resources |_ js |_ Pages |_ About |_ Team.vue |_ Home.vue ``` Both [server-side setup](https://inertiajs.com/server-side-setup) and [client-side setup](https://inertiajs.com/client-side-setup) full instructions are available on Inertia's website. ### Component Naming [](#component-naming) As you can see in the folder structure above, your Vue component naming and location must match the Statamic collection hierarchy + page slug combo for any Inertia-enabled pages. The adapter will automatically build these paths based on the page's URL and slug. Here are some examples of what this looks like: Statamic CollectionStatamic PageSlugURLComponent NameHomeHome`home`/`Home.vue`MarketingOverview`overview`/marketing/`Marketing/Overview.vue`MarketingLogos and Colors`logos-and-colors`/marketing/logos`Marketing/LogosAndColors.vue`### Props [](#props) All the typical data passed to a Statamic page as objects will now be available to your page as `props`. The `props` will contain all of the expected attributes and data. For example, the Inertia response's `props` object could look like: ``` Inertia\Response {#2587 ▼ #component: "Marketing/Overview" #props: array:22 [▼ "amp_url" => null "api_url" => null "collection" => array:3 [▶] "content" => array:4 [▶] "date" => Illuminate\Support\Carbon @1617827556 {#2478 ▶} "edit_url" => "http://mysite.test/cp/collections/marketing/entries/f854a1cf-0dcf-404b-8418-a74662ba77e7/overview" "id" => "f854a1cf-0dcf-404b-8418-a74662ba77e7" "is_entry" => true "last_modified" => Illuminate\Support\Carbon @1617827556 {#2477 ▶} "mount" => null "order" => null "parent" => null "permalink" => "http://mysite.test/marketing" "private" => false "published" => true "slug" => "overview" "template" => "app" "title" => "Overview" "updated_at" => Illuminate\Support\Carbon @1617827556 {#2523 ▶} "updated_by" => array:4 [▶] "uri" => "/marketing" "url" => "/marketing" ] #rootView: "app" #version: "" #viewData: [] } ``` Navigation ---------- [](#navigation) To access navigation variables as props use the prop 'navigation' to your page/layout - and call your root Navigation menu 'home' Credits ------- [](#credits) - [Adam Campbell](https://github.com/hotmeteor) - [Statamic](https://statamic.com) - [The amazing Inertia.js libraries](https://github.com/inertiajs) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 37 — LowBetter than 83% of packages Maintenance50 Moderate activity, may be stable Popularity24 Limited adoption so far Community12 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~6 days Recently: every ~0 days Total 15 Last Release 366d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/96053035?v=4)[Matthew Bromley](/maintainers/MattBromley98)[@MattBromley98](https://github.com/MattBromley98) --- Top Contributors [![hotmeteor](https://avatars.githubusercontent.com/u/378585?v=4)](https://github.com/hotmeteor "hotmeteor (22 commits)")[![MattBromley98](https://avatars.githubusercontent.com/u/96053035?v=4)](https://github.com/MattBromley98 "MattBromley98 (22 commits)")[![edalzell](https://avatars.githubusercontent.com/u/6069653?v=4)](https://github.com/edalzell "edalzell (5 commits)")[![milpan](https://avatars.githubusercontent.com/u/50071951?v=4)](https://github.com/milpan "milpan (4 commits)")[![jasonvarga](https://avatars.githubusercontent.com/u/105211?v=4)](https://github.com/jasonvarga "jasonvarga (2 commits)") --- Tags laraveladapterinertiainertiajsstatamic ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/mattbromley-inertia-statamic/health.svg) ``` [![Health](https://phpackages.com/badges/mattbromley-inertia-statamic/health.svg)](https://phpackages.com/packages/mattbromley-inertia-statamic) ``` ### Alternatives [statamic/statamic Statamic 824170.4k](/packages/statamic-statamic)[titasgailius/laravel-moonlight An elegant Laravel scaffolding for your next single-page application. 1446.6k](/packages/titasgailius-laravel-moonlight)[toanld/modules-inertia Relationship Vue/InertiaJs with modular structure Laravel-Modules 141.8k1](/packages/toanld-modules-inertia) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)