#Using Inertia to build a native app with Capacitor JS

1 messages · Page 1 of 1 (latest)

supple shoal
#

I've been trying to build an interia app with capacitor. Using the Laravel vue starter kit for testing. After authenticating the router.visit example command below doesn't do anything as I can't render the Dashboard. I do see the request for /dashboard being made to the server, but the view remains as the Login. Works just fine as a SPA web app. I saw in #💬-general history @glacial ermine got this to work a long time ago but I'm stuck trying to get any page to render past the first login screen.

axios.post(url, {email: form.email, password: form.password})
            .then((response) => {
                Preferences.set({ key: 'auth_token', value: response.data });
                console.log(route('dashboard'));
                router.get(route('dashboard')); // makes req. but does not render
            }).catch((error) => {
                console.log('error');
                console.log(error);
            });

And I modified axios to handle requests in capacitor

class AxiosBootstrap {
    static async setupRouter() {
        const storedToken = await Preferences.get({ key: 'auth_token' });
        router.on('before', (event) => {
            if (Capacitor.isNativePlatform()) {
                const visit = event.detail.visit;
                visit.url.host = '192.168.3.119';
                visit.url.protocol = 'http';
                visit.url.port = '8000';
                if (storedToken.value) {
                    axios.defaults.headers.common['Authorization'] = 'Bearer ' + storedToken.value;
                }
            }
        });
        if (Capacitor.isNativePlatform()) {
            axios.defaults.baseURL = 'http://192.168.3.119:8000';
            axios.defaults.withCredentials = true;
            axios.defaults.withXSRFToken = true;
        }
    }
glacial ermine
#

What error do you get

supple shoal
#

Thanks for responding! Only feedback I get is from XCode, console log and a generic error:

**⚡️  To Native ->  Preferences set 53743622
⚡️  [log] - http://192.168.3.119:8000/dashboard
⚡️  TO JS undefined

This is how the call shows up. The only middleware on my web & api routes is auth:sanctum.

php artisan serve --host=192.168.3.119 --port=8000

   INFO  Server running on [http://192.168.3.119:8000].  

  Press Ctrl+C to stop the server

  2025-03-30 21:47:37 /api/login ................................................................................................................................. ~ 505.03ms
  2025-03-30 21:47:37 /api/login ................................................................................................................................... ~ 0.05ms
  2025-03-30 21:47:38 /dashboard ................................................................................................................................... ~ 0.04ms
  2025-03-30 21:47:38 /dashboard ................................................................................................................................... ~ 0.04ms
glacial ermine
#

it's difficult to help with no error message to go on

#

are you loading your page components synchronously are asynchronously ?

#

if the inertia request reaches your server, but the component is not rendered, maybe there is an error loading the page component

supple shoal
#

Yeah thought so. Page components are loaded the default inertia way, I have only incorporated Capacitor in the login page and made those calls async. I don't have any laravel.log errors or in the browser console, so I haven't found any page loading errors yet. If I can't make any progress today I'll see about starting over with a fresh project to narrow it down.

supple shoal
#

I think you're right about the issue with the page component. While the dashboard loads fine in a browser, hasn't been in the capactior simulator. I moved the Welcome component that comes with a fresh install under auth:sanctum middleware and redirected to that instead, and it loaded OK. I'll strip down the dashboard and see if I can figure out what capacitor doesn't like

supple shoal
#

Just to be complete, for some reason capacitor does not like the AppLayout component generated by the laravel vue starter kit. I stripped my Dashboard component until it looked like this:

<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';

const breadcrumbs: BreadcrumbItem[] = [
    {
        title: 'Dashboard',
        href: '/dashboard'
    }
];

</script>

<template>
    <Head title="Dashboard" />

    <AppLayout :breadcrumbs="breadcrumbs">
        <div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
            TEST VIEW
        </div>
    </AppLayout>
</template>

And I still got stuck on the login screen, but when I remove AppLayout it renders this "dashboard" correctly. eslint shows no errors with the project so I'm not sure what the deal is, but at least I have a source for the issue.

fickle violet
#

hello