Inertia TypegenTypeScript types for Inertia pages, from your Laravel code

Page props, form requests, shared data and route helpers, generated through Scramble. You write no types by hand.

Get started

View on GitHub

Page props

Each Inertia::render() call becomes a page type. Deferred props are optional.

Form requests

The rules of a form request become the type of its form data.

Resources and paginators

JSON resources, collections and paginators keep their real shape, data included.

Route helpers

Each named route gets a typed helper that builds its URL.

Live in development

The Vite dev server generates the files again after a PHP change.

Checked in CI

inertia-typegen --check fails when the committed files are stale.

From PHP to TypeScript

A controller and a form request:

AuthController.phpStorePostRequest.php

php

public function login(): Response
{
    return Inertia::render('auth/login', [
        'canResetPassword' => true,
    ]);
}

php

public function rules(): array
{
    return [
        'title' => ['required', 'string'],
        'published' => ['boolean'],
    ];
}

The generator writes this to inertia.d.ts:

export namespace Inertia {
  export namespace Pages {
    export namespace Auth {
      export type Login = Inertia.Shared.App & {
        canResetPassword: boolean
      }
    }
  }
  export namespace Requests {
    export namespace Posts {
      export type Store = {
        title: string
        published?: boolean
      }
    }
  }
}

A page then uses the types and the route helpers:

vue

<script setup lang="ts">
import { useForm } from '@inertiajs/vue3'
import { store } from '@/routes/admin/posts'
import type { Inertia } from '@/types/inertia'

defineProps<Inertia.Pages.Posts.Create>()

const form = useForm<Inertia.Requests.Posts.Store>({ title: '' })

form.post(store.url())
</script>

Read the introduction to see how it works.