PHPackages                             cambis/silverstripe-inertia - 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. cambis/silverstripe-inertia

ActiveSilverstripe-vendormodule[Utility & Helpers](/categories/utility)

cambis/silverstripe-inertia
===========================

Inertia.js adapater for Silverstripe.

v0.4.1(1y ago)4401MITPHPPHP ^7.4 || ^8.0

Since Sep 15Pushed 1y ago1 watchersCompare

[ Source](https://github.com/Cambis/silverstripe-inertia)[ Packagist](https://packagist.org/packages/cambis/silverstripe-inertia)[ RSS](/packages/cambis-silverstripe-inertia/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (6)Dependencies (2)Versions (8)Used By (0)

Inertia.js Silverstripe adapter
===============================

[](#inertiajs-silverstripe-adapter)

Inertia.js adapter for Silverstripe, based on [inertia-bundle](https://github.com/rompetomp/inertia-bundle/tree/master).

Visit [inertiajs.com](https://inertiajs.com/) to learn more.

Getting started
---------------

[](#getting-started)

Install the server adapter.

```
composer require cambis/silverstripe-inertia
```

Install the preferred client adapter.

### React

[](#react)

```
yarn add -D @inertiajs/react
```

### Vue

[](#vue)

```
yarn add -D @inertiajs/vue3
```

### Svelte

[](#svelte)

```
yarn add -D @inertiajs/svelte
```

Configuration
-------------

[](#configuration)

Here is a basic configuration to get started with.

### Server-side

[](#server-side)

First, configure your Silverstripe application with the following:

#### Config file

[](#config-file)

Create a config file:

```
---
Name: inertia
After:
  - requestprocessors
---
SilverStripe\Core\Injector\Injector:
  SilverStripe\Control\Director:
    properties:
      Middlewares:
        InertiaMiddleware: '%$Cambis\Inertia\Control\Middleware\InertiaMiddleware'

PageController:
  extensions:
    - Cambis\Inertia\Extension\InertiaPageControllerExtension
```

#### Template

[](#template)

In your root `Page.ss` template, add:

```

...
+$InertiaHead($PageData)

-$Layout
+$InertiaBody($PageData)
...

```

The root template location is optionally configurable:

```
Cambis\Inertia\Inertia:
  root_view: MyAlternativePage
```

#### PageController

[](#pagecontroller)

Configure your `PageController` class to serve Inertia.

```
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Control\HTTPResponse;

class PageController extends ContentController
{
  /**
   * @return HTTPResponse
   */
  public function index(HTTPRequest $request) {
      return $this->inertia->render('Dashboard', ['prop' => 'value']);
  }
}
```

If your IDE supports the `@mixin` directive, add it to your `PageController` for autocomplete:

```
+use Cambis\Inertia\Extension\InertiaPageControllerExtension;
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Control\HTTPResponse;

+/**
+ * @mixin InertiaPageControllerExtension
+ */
class PageController extends ContentController
{
  /**
   * @return HTTPResponse
   */
  public function index(HTTPRequest $request) {
      return $this->inertia->render('Dashboard', ['prop' => 'value']);
  }
}
```

Alternatively, you can use the `@property` directive:

```
+use Cambis\Inertia\Inertia;
use SilverStripe\CMS\Controllers\ContentController;
use SilverStripe\Control\HTTPRequest;
use SilverStripe\Control\HTTPResponse;

+/**
+ * @property Inertia $inertia
+ */
class PageController extends ContentController
{
  /**
   * @return HTTPResponse
   */
  public function index(HTTPRequest $request) {
      return $this->inertia->render('Dashboard', ['prop' => 'value']);
  }
}
```

### Client-side

[](#client-side)

Once your Silverstripe application is setup, you can configure the client application.

#### React

[](#react-1)

```
import { createInertiaApp } from '@inertiajs/react';
import { createRoot } from 'react-dom/client';

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, App, props }) {
    createRoot(el).render();
  },
});
```

#### Vue

[](#vue-1)

```
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})
```

#### Svelte

[](#svelte-1)

```
import { createInertiaApp } from '@inertiajs/svelte'

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, App, props }) {
    new App({ target: el, props })
  },
})
```

Lazy data evaluation
--------------------

[](#lazy-data-evaluation)

Sometimes you don't want to re-evaluate data when making visits to the same page type. This can be accomplised server-side by using a callback function or `lazy()`.

Check the [offical documentation](https://inertiajs.com/partial-reloads) for client side configuration.

```
return $this->inertia->render('Dashboard', [
    // ALWAYS included on first visit...
    // OPTIONALLY included on partial reloads...
    // ALWAYS evaluated...
    'foo' => 'bar',

    // ALWAYS included on first visit...
    // OPTIONALLY included on partial reloads...
    // ONLY evaluated when needed...
    'foo' => static function (): string { return 'bar'; },

    // NEVER included on first visit...
    // OPTIONALLY included on partial reloads...
    // ONLY evaluated when needed...
    'foo' => $this->inertia->lazy(static function (): string { return 'bar'; }),
]);
```

Sharing data
------------

[](#sharing-data)

You can share props between all components using the `$this->inertia->share(string, mixed)` function. One use case is populating the navigation menu for a website, this can be accomplished using a `SilverStripe\Core\Extension`.

```