PHPackages hotmeteor/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. [Utility & Helpers](/categories/utility) 4. / 5. hotmeteor/inertia-statamic AbandonedArchivedLibrary[Utility & Helpers](/categories/utility) hotmeteor/inertia-statamic ========================== An Inertia.js Statamic adapter v0.2.1(3y ago)5316213[6 issues](https://github.com/hotmeteor/inertia-statamic/issues)MITPHPPHP ^8.0 Since May 2Pushed 3y ago2 watchersCompare [ Source](https://github.com/hotmeteor/inertia-statamic)[ Packagist](https://packagist.org/packages/hotmeteor/inertia-statamic)[ RSS](/packages/hotmeteor-inertia-statamic/feed)WikiDiscussions main Synced today READMEChangelog (5)Dependencies (7)Versions (6)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. [![Latest Stable Version](https://camo.githubusercontent.com/74db6d3f35d664aa4e437cf74c842a64049c3902a030cccd1ae40698ba1adf0c/68747470733a2f2f706f7365722e707567782e6f72672f686f746d6574656f722f696e65727469612d73746174616d69632f76)](//packagist.org/packages/hotmeteor/inertia-statamic) Installation ------------ [](#installation) You can install the package through Composer. ``` composer require hotmeteor/inertia-statamic ``` Usage ----- [](#usage) ### 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`. ``` @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: [] } ``` 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 29 — LowBetter than 60% of packages Maintenance18 Infrequent updates — may be unmaintained Popularity25 Limited adoption so far Community15 Small or concentrated contributor base Maturity50 Maturing project, gaining track record Bus Factor1 Top contributor holds 75.9% of commits — single point of failure 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 ~133 days Total 5 Last Release 1298d ago PHP version history (2 changes)v0.1.0PHP ^7.3|^8.0 v0.2PHP ^8.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/9a359353ddbcb93df5c0ad8a00e25d54443ea6e8edaef61a3fea5c64ac7774d3?d=identicon)[hotmeteor](/maintainers/hotmeteor) --- Top Contributors [![hotmeteor](https://avatars.githubusercontent.com/u/378585?v=4)](https://github.com/hotmeteor "hotmeteor (22 commits)")[![edalzell](https://avatars.githubusercontent.com/u/6069653?v=4)](https://github.com/edalzell "edalzell (5 commits)")[![jasonvarga](https://avatars.githubusercontent.com/u/105211?v=4)](https://github.com/jasonvarga "jasonvarga (2 commits)") --- Tags inertiajsinertiajs-adapterlaravelstatamicstatamic-addonlaraveladapterinertiainertiajsstatamic ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/hotmeteor-inertia-statamic/health.svg) ``` [![Health](https://phpackages.com/badges/hotmeteor-inertia-statamic/health.svg)](https://phpackages.com/packages/hotmeteor-inertia-statamic) ``` ### Alternatives [emargareten/inertia-modal Inertia Modal is a Laravel package that lets you implement backend-driven modal dialogs for Inertia apps. 88103.7k](/packages/emargareten-inertia-modal)[outhebox/laravel-translations Manage your Laravel translations with a beautiful UI. Add, edit, delete, import, and export translations with ease. 80687.6k](/packages/outhebox-laravel-translations)[erag/laravel-lang-sync-inertia A powerful Laravel package for syncing and managing language translations across backend and Inertia.js (Vue/React) frontends, offering effortless localization, auto-sync features, and smooth multi-language support for modern Laravel applications. 3812.2k](/packages/erag-laravel-lang-sync-inertia)[robertboes/inertia-breadcrumbs Laravel package to automatically share breadcrumbs to Inertia 56129.1k](/packages/robertboes-inertia-breadcrumbs)[marcorieser/statamic-livewire A Laravel Livewire integration for Statamic. 2381.5k10](/packages/marcorieser-statamic-livewire) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)