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

Maintainers

Details