Convert Figma logo to code with AI

inertiajs logoinertia

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

6,204
417
6,204
89

Top Related Projects

22,155

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

6,631

The speed of a single-page web application without having to write any JavaScript

27,910

A rugged, minimal framework for composing JavaScript behavior in your markup.

13,347

A declarative, HTML-based language that makes building web apps fun

36,546

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Quick Overview

Inertia.js is a modern approach to building classic server-driven web applications. It allows you to create fully client-side rendered, single-page apps without the complexity of modern SPAs. Inertia works with existing server-side frameworks and provides a seamless way to build full-stack applications.

Pros

  • Enables SPA-like experiences without abandoning server-side routing and controllers
  • Works with existing server-side frameworks (Laravel, Rails, etc.) and client-side frameworks (Vue, React, Svelte)
  • Simplifies the development process by eliminating the need for a separate API
  • Provides a smooth transition path for traditional server-rendered apps to modern client-side rendering

Cons

  • Learning curve for developers accustomed to traditional server-rendered applications
  • Limited SEO capabilities compared to server-side rendering (though this can be mitigated with server-side rendering options)
  • Requires changes to both frontend and backend code, which may not be suitable for all projects
  • Performance can be affected if not implemented correctly, especially for initial page loads

Code Examples

  1. Basic Inertia component (Vue.js):
<template>
  <layout>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </layout>
</template>

<script>
import Layout from './Layout'

export default {
  components: {
    Layout,
  },
  props: {
    title: String,
    content: String,
  },
}
</script>
  1. Inertia link component (React):
import { Link } from '@inertiajs/react'

export default function Navigation() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  )
}
  1. Server-side controller (Laravel):
use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'users' => User::all(),
        ]);
    }
}

Getting Started

To get started with Inertia.js, follow these steps:

  1. Install Inertia adapter for your server-side framework (e.g., for Laravel):

    composer require inertiajs/inertia-laravel
    
  2. Install Inertia client-side adapter and your preferred frontend framework:

    npm install @inertiajs/react react react-dom
    
  3. Set up your main app component (e.g., in React):

    import { createInertiaApp } from '@inertiajs/react'
    import { createRoot } from 'react-dom/client'
    
    createInertiaApp({
      resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        return pages[`./Pages/${name}.jsx`]
      },
      setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />)
      },
    })
    
  4. Create your first Inertia page component and start building your app!

Competitor Comparisons

22,155

A full-stack framework for Laravel that takes the pain out of building dynamic UIs.

Pros of Livewire

  • Full-stack Laravel framework, allowing for easier integration with existing Laravel projects
  • Real-time updates without page reloads, providing a smoother user experience
  • Simpler learning curve for developers already familiar with Laravel and PHP

Cons of Livewire

  • Limited to Laravel ecosystem, reducing flexibility for non-Laravel projects
  • Potentially higher server load due to more frequent server-side rendering
  • Less control over client-side JavaScript compared to Inertia.js

Code Comparison

Livewire component example:

class SearchUsers extends Component
{
    public $search = '';

    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::where('name', 'like', "%{$this->search}%")->get(),
        ]);
    }
}

Inertia.js component example:

<template>
  <div>
    <input v-model="search" type="text" placeholder="Search users...">
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return { search: '', users: [] }
  },
  watch: {
    search() {
      this.$inertia.get('/users', { search: this.search }, { preserveState: true })
    }
  }
}
</script>
6,631

The speed of a single-page web application without having to write any JavaScript

Pros of Turbo

  • Native HTML-based approach, allowing for easier integration with existing server-side frameworks
  • Built-in caching mechanism for improved performance
  • Supports progressive enhancement, making it more accessible for users without JavaScript

Cons of Turbo

  • Requires more server-side rendering, potentially increasing server load
  • Less control over client-side state management compared to Inertia
  • May require more complex setup for single-page application-like experiences

Code Comparison

Turbo (HTML-based):

<turbo-frame id="messages">
  <h2>Messages</h2>
  <ul>
    <li>Message 1</li>
    <li>Message 2</li>
  </ul>
</turbo-frame>

Inertia (JavaScript-based):

import { Inertia } from '@inertiajs/inertia'

Inertia.visit('/messages', {
  preserveState: true,
  preserveScroll: true,
})

Turbo focuses on enhancing traditional HTML-based navigation, while Inertia provides a more JavaScript-centric approach to building single-page applications. Turbo excels in progressive enhancement and seamless integration with server-side frameworks, whereas Inertia offers tighter control over client-side state and behavior. The choice between the two depends on project requirements, existing infrastructure, and development team preferences.

27,910

A rugged, minimal framework for composing JavaScript behavior in your markup.

Pros of Alpine

  • Lightweight and minimal, with a small learning curve
  • Works well with existing server-side rendered applications
  • Can be easily integrated into existing projects without major refactoring

Cons of Alpine

  • Limited to DOM manipulation and basic interactivity
  • Lacks built-in routing capabilities
  • Not suitable for complex, data-heavy single-page applications

Code Comparison

Alpine:

<div x-data="{ open: false }">
    <button @click="open = true">Open Modal</button>
    <div x-show="open">Modal Content</div>
</div>

Inertia:

import { Inertia } from '@inertiajs/inertia'

Inertia.visit('/users', {
    method: 'post',
    data: { name: 'John' }
})

Alpine focuses on enhancing HTML with minimal JavaScript, while Inertia provides a more robust solution for building single-page applications with server-side routing. Alpine is better suited for adding interactivity to traditional server-rendered pages, whereas Inertia excels in creating modern, JavaScript-driven applications with seamless navigation and state management.

Alpine's simplicity makes it ideal for small to medium-sized projects or enhancing existing applications. Inertia, on the other hand, offers a more comprehensive solution for building full-fledged single-page applications with server-side rendering capabilities, making it more suitable for larger, more complex projects.

13,347

A declarative, HTML-based language that makes building web apps fun

Pros of Marko

  • Faster rendering performance due to its compile-time optimizations
  • Built-in support for server-side rendering and isomorphic applications
  • More flexible templating syntax with both concise and HTML-like options

Cons of Marko

  • Steeper learning curve, especially for developers familiar with traditional JavaScript frameworks
  • Smaller community and ecosystem compared to more mainstream frameworks
  • Less suitable for integrating with existing server-side frameworks

Code Comparison

Marko:

<ul>
  <for|item| of=items>
    <li>${item}</li>
  </for>
</ul>

Inertia:

<ul>
  {items.map((item) => (
    <li key={item}>{item}</li>
  ))}
</ul>

Summary

Marko is a powerful UI library with excellent performance and built-in server-side rendering capabilities. It offers a unique templating syntax and compile-time optimizations. However, it may have a steeper learning curve and a smaller ecosystem compared to Inertia.

Inertia, on the other hand, focuses on creating modern single-page applications with server-side routing. It's easier to integrate with existing server-side frameworks and has a more familiar syntax for developers coming from popular JavaScript frameworks. However, it may not offer the same level of performance optimizations as Marko.

Choose Marko for high-performance, isomorphic applications, especially when starting a new project. Opt for Inertia when integrating with existing server-side frameworks or when prioritizing ease of adoption for your development team.

36,546

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.

Pros of Preact

  • Lightweight and fast: Preact is a 3KB alternative to React with the same modern API
  • Compatible with React ecosystem: Can use most React libraries and tools
  • Efficient rendering: Uses a virtual DOM for optimal performance

Cons of Preact

  • Smaller community: Less support and fewer resources compared to Inertia
  • Limited built-in features: Requires additional libraries for routing and state management
  • Learning curve: Developers familiar with React may need to adapt to Preact's differences

Code Comparison

Preact:

import { h, render } from 'preact';

const App = () => <h1>Hello, World!</h1>;
render(<App />, document.body);

Inertia:

use Inertia\Inertia;

return Inertia::render('Home', [
    'title' => 'Hello, World!'
]);

While Preact focuses on lightweight client-side rendering, Inertia bridges server-side and client-side, allowing for a more traditional server-driven approach with modern JavaScript frameworks. Preact excels in performance and size, making it suitable for lightweight applications, while Inertia provides a seamless integration between backend and frontend, simplifying the development of full-stack applications.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Inertia.js

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers. Find full documentation at inertiajs.com.

Contributing

If you're interested in contributing to Inertia.js, please read our contributing guide.

Sponsors

A huge thanks to all our sponsors who help push Inertia.js development forward! In particular, we'd like to say a special thank you to our partners:

Laravel Forge

If you'd like to become a sponsor, please see here for more information. 💜

NPM DownloadsLast 30 Days