包简介

The Tempest adapter for Inertia.js.

README 文档

README

A feature-complete Inertia.js adapter for the Tempest framework.
Mirrors the official Inertia.js Laravel Adapter.

Server-side setup

Install dependencies

Install the Inertia server-side adapter using the Composer package manager.

composer require maartendekker/inertia-tempest

Root template

Create a root view template inertia.view.php in your app directory. The adapter will automatically look for it.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <x-inertia-head>
        <title>Inertia Tempest</title>
    </x-inertia-head>

    <x-vite-tags/>
</head>
<body>
    <x-inertia-app />
</body>
</html>

The <x-inertia-head> slot provides a fallback title that appears only when SSR is disabled; once SSR is enabled, it’s automatically replaced by the server‑rendered head output. With that in place, you’re ready to start building your Inertia pages using either the global inertia() helper or the Inertia facade.

use Inertia\Response;

final readonly class AircraftController
{
    #[Get('/aircraft/{aircraft}')]
    public function show(Aircraft $aircraft): Response
    {
        return inertia('Aircraft/Show', [ /* … */ ]);
    }
}

use Inertia\Inertia;
use Inertia\Response;

final readonly class AircraftController
{
    #[Get('/aircraft/{aircraft}')]
    public function show(Aircraft $aircraft): Response
    {
        return Inertia::render('Aircraft/Show', [ /* … */ ]);
    }
}

Client-side setup

Install dependencies

Install the Inertia client-side adapter corresponding to your framework of choice.

npm install @inertiajs/vue3

React

npm install @inertiajs/react

Svelte

npm install @inertiajs/svelte

Initialize the Inertia app

Update your main JavaScript file to boot your Inertia app.

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

void createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob('./**/*.vue')
        return pages[`./${name}.vue`]()
    },
    setup({ el, App, props, plugin }) {
        createApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

React

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

void createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./**/*.jsx')
        return pages[`./${name}.jsx`]()
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />)
    },
})

Svelte

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

void createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./**/*.svelte')
        return pages[`./${name}.svelte`]()
    },
    setup({ el, App, props }) {
        mount(App, { target: el, props })
    },
})

Shared Data

The Inertia\Middleware\Middleware class provides several defaults out-of-the-box. By default, the following data is shared on every request:

Errors: Validation errors are automatically resolved and shared as errors.
Auth: The current authenticated user (via Tempest Auth) is shared as auth.user.

Customizing Shared Data

To add your own shared data, you can extend the base middleware. Use parent::share() to keep the default error and auth logic, or overwrite it entirely.

use Inertia\Middleware\Middleware;

class HandleInertiaRequests extends Middleware
{
    public function share(): array
    {
        return array_replace_recursive(parent::share(), [
            'app_name' => 'My Tempest App',
            
            'workspace' => $this->session->get('workspace_id'),

            'statistics' => $this->inertia->defer(fn () => [
                'total_users' => User::count(),
                'active_projects' => Project::count(),
            ]),
        ]);
    }
}

Optional Configuration

This package works out-of-the-box with sensible defaults. To customize the settings, you can create an inertia.config.php file in your config directory. Because the configuration uses typed objects, your IDE will provide excellent autocompletion. You only need to specify the options you wish to change.

use Inertia\Configs\InertiaConfig;
use Inertia\Configs\PageConfig;

use function Tempest\env;

return new InertiaConfig(
    // Enforce that page components exist on disk.
    pages: new PageConfig(
        ensure_pages_exist: env('INERTIA_ENSURE_PAGES_EXIST', false),
    ),

    // Enable Laravel's paginator format on the front-end.
    laravel_pagination: true
);

Infinite Scrolling

A key difference from the Laravel adapter is that Tempest's paginator is not automatically "request-aware". This means you are responsible for retrieving the current page from the request and passing it to your paginate() method. The Inertia::scroll() method accepts the pageName (which defaults to 'page') as its second argument. This ensures that the component's state is synchronized with the correct query parameter in the URL.

public function index(Request $request): Response
{
    $currentPage = (int) $request->get('users', 1);

    return Inertia::render('Books/Index', [
        'books' => Inertia::scroll(fn() => Book::select()->paginate(currentPage: $currentPage), 'users'),
    ]);

}

Server-Side Rendering (SSR)

To enable SSR, you'll need to configure your front-end build process to generate a server-side bundle.

Update Vite Configuration

Modify your vite.config.js to handle both client and server builds. The ssrBuild flag provided by Vite allows you to conditionally change the configuration.

  import tailwindcss from '@tailwindcss/vite'
- import { defineConfig } from 'vite'
+ import { defineConfig, type ConfigEnv } from 'vite'
  import tempest from 'vite-plugin-tempest'
  import vue from '@vitejs/plugin-vue';

- export default defineConfig({
+ export default defineConfig((ConfigEnv) => {
+     const isSsrBuild = configEnv.ssrBuild === true;
+
+     return {
          plugins: [
              tailwindcss(),
              tempest(),
              vue(),
          ],
+         build: {
+             outDir: isSsrBuild ? 'ssr' : 'public/build',
+             manifest: !isSsrBuild ? 'manifest.json' : false,
+             rollupOptions: {
+                 input: isSsrBuild ? 'app/inertia.ssr.ts' : 'app/inertia.entrypoint.ts',
+             },
+         },
+         ssr: {
+             // Add any packages that should be bundled with your SSR build.
+             noExternal: ['@inertiajs/vue3'],
+         },
+     };
  });

Create an SSR Entry Point

Create a new file, app/inertia.ssr.js, that will serve as the entry point for your Node.js server. This file is responsible for creating the SSR server. Unlike client-side entrypoints, this file should not include .entrypoint. in its name. Tempest automatically discovers those for the browser, and this file is meant to stay server-side.

- import { createApp, h } from 'vue'
+ import { createSSRApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'

void createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./**/*.vue')
        return pages[`./${name}.vue`]()
    },
    setup({ el, App, props, plugin }) {
-       createApp({ render: () => h(App, props) })
+       createSSRApp({ render: () => h(App, props) })
            .use(plugin)
            .mount(el)
    },
})

React

import { createInertiaApp } from '@inertiajs/react'
- import { createRoot } from 'react-dom/client'
+ import { hydrateRoot } from 'react-dom/client'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./**/*.jsx')
        return pages[`./${name}.jsx`]()
    },
    setup({ el, App, props }) {
-       createRoot(el).render(<App {...props} />)
+       hydrateRoot(el, <App {...props} />)
    },
})

Svelte

import { createInertiaApp } from '@inertiajs/svelte'
- import { mount } from 'svelte'
+ import { hydrate, mount } from 'svelte'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./**/*.svelte')
        return pages[`./${name}.svelte`]()
    },
    setup({ el, App, props }) {
-       mount(App, { target: el, props })
+       if (el.dataset.serverRendered === 'true') {
+           hydrate(App, { target: el, props })
+       } else {
+           mount(App, { target: el, props })
+      }
    },
})

Update Build Script

Add a build script to your package.json that builds both the client and server assets.

"scripts": {
    "build": "vite build"
+   "build:ssr": "vite build && vite build --ssr"
},

Enable SSR

Finally, enable SSR in your inertia.config.php file. The package will automatically discover the ssr/inertia.ssr.mjs or ssr/inertia.ssr.js bundle. If your bundle is located elsewhere, you must specify the path.

use Inertia\Configs\InertiaConfig;
use Inertia\Configs\SsrConfig;

use function Tempest\root_path;

return new InertiaConfig(
    ssr: new SsrConfig(
        enabled: true,
        // bundle: root_path('custom/path/ssr.js'),
    ),
);

Run the Server

With everything configured, you can now start the SSR server:

./tempest inertia:start-ssr

For more details, please refer to the official Inertia.js SSR documentation.

Contributing

Contributions are welcome. For consistency, follow the patterns and style of tempestphp/framework.

Pull requests should aim for feature parity with inertia-laravel.

maartendekker/inertia-tempest 适用场景与选型建议

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

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

围绕 maartendekker/inertia-tempest 我们能提供哪些服务？

定制开发 / 二次开发

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

BUG 修复 & 性能优化

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

项目外包 & 长期维护

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

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

maartendekker/inertia-tempest

包简介

README 文档

README

Server-side setup

Install dependencies

Root template

Client-side setup

Install dependencies

Initialize the Inertia app

Shared Data

Customizing Shared Data

Optional Configuration

Infinite Scrolling

Server-Side Rendering (SSR)

Update Vite Configuration

Create an SSR Entry Point

Update Build Script

Enable SSR

Run the Server

Contributing

maartendekker/inertia-tempest 适用场景与选型建议

统计信息

GitHub 信息

其他信息