包简介

A fork of the Inertia.js Statamic adapter by Adam Campbell

README 文档

README

Statamic server side adapter for Inertia.js to build single-page apps, without building an API. This package has been forked and modified to support updated Dependencies, specifically Inertia V2.

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

You can install the latest stable version of the package through Composer.

composer require mattbromley/inertia-statamic

Usage

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! 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

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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    @inertiaHead
  </head>
  <body>
    @inertia
  </body>
</html>

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 and client-side setup full instructions are available on Inertia's website.

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 Collection	Statamic Page	Slug	URL	Component Name
Home	Home	`home`	/	`Home.vue`
Marketing	Overview	`overview`	/marketing/	`Marketing/Overview.vue`
Marketing	Logos and Colors	`logos-and-colors`	/marketing/logos	`Marketing/LogosAndColors.vue`

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

To access navigation variables as props use the prop 'navigation' to your page/layout - and call your root Navigation menu 'home'

Credits

License

The MIT License (MIT). Please see License File for more information.

mattbromley/inertia-statamic 适用场景与选型建议

mattbromley/inertia-statamic 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 1.88k 次下载、GitHub Stars 达 4，最近一次更新时间为 2025 年 02 月 23 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「adapter」「laravel」「statamic」「inertia」「inertia.js」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 mattbromley/inertia-statamic 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 mattbromley/inertia-statamic 我们能提供哪些服务？

定制开发 / 二次开发

基于 mattbromley/inertia-statamic 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 mattbromley/inertia-statamic 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

darrynten/any-cache 8

Adapter designed to add Framework Agnosticism for Caching within PHP Packages.

oat-sa/lib-flysystem-filecache 3

flysystem cache Adapter

stechstudio/laravel-vfs-adapter 9

Virtual Filesystem Storage Adapter for Laravel

webalternatif/flysystem-composite 2

A simple interface for composite Flysystem adapters

ali-awwad/fine-seo 5

Statamic Fine Seo addon

handmadeweb/statamic-laravel-packages 2

mattbromley/inertia-statamic

包简介

关键字：