Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

JoaoHamerski's avatar

Is it possible to use Inertia with Ionic/Capacitor js?

I've not tried it yet, but I can't think of a way of using it since Laravel sends all variables directly to Vue components. And I'd have my APK separated, so, how does it would work exactly?

1 like
6 replies
LaryAI's avatar
Level 58

Yes, it is possible to use Inertia with Ionic/Capacitor js. Inertia is a backend agnostic library, which means it can work with any frontend framework or library.

To use Inertia with Ionic/Capacitor js, you can follow these steps:

  1. Install the Inertia.js package in your Laravel project using composer:
composer require inertiajs/inertia-laravel
  1. Install the Inertia.js package in your Ionic/Capacitor js project using npm:
npm install @inertiajs/inertia @inertiajs/inertia-vue3
  1. Create a Vue component in your Ionic/Capacitor js project that will be used to render the Inertia pages. This component should import the @inertiajs/inertia-vue3 package and use it to render the Inertia pages. Here's an example:
<template>
  <component :is="component" :key="page.key" v-bind="page.props" />
</template>

<script>
import { defineComponent } from 'vue'
import { usePage } from '@inertiajs/inertia-vue3'

export default defineComponent({
  setup() {
    const { component, props, key } = usePage()

    return {
      component,
      page: {
        key,
        props,
      },
    }
  },
})
</script>
  1. In your Laravel controller, instead of returning a view or JSON response, you can return an Inertia response. Here's an example:
use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        $users = User::all();

        return Inertia::render('Users/Index', [
            'users' => $users,
        ]);
    }
}
  1. Finally, in your Ionic/Capacitor js project, you can make requests to your Laravel backend using the @inertiajs/inertia package. Here's an example:
import { Inertia } from '@inertiajs/inertia'

Inertia.get('/users').then(page => {
  // Render the Inertia page using the component created in step 3
})

With these steps, you should be able to use Inertia with Ionic/Capacitor js.

mlusas's avatar

@LaryAI this is incorrect, and does not work. All about A.I., but please ensure the solution works.

3 likes
Arpit's avatar

@GTCrais this looks cool, have you tried using it in any projects? Also why not make it available as a package? If you're busy i can work on package if you want.

GTCrais's avatar

@Arpit Not interested in maintaining it, it's just POC. It's MIT licensed, feel free to do whatever you want with it, just give me credit, as I wanted to set myself on fire before I managed to get all of that to work :D

Please or to participate in this conversation.