@AnteFil

Laravel + Inertia. Как настроить формат JSON?

Есть контроллер
public function create(): Response
    {
        return Inertia::render('Auth/Register');
    }

есть App.js
import '../css/app.css';

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';

const appName = import.meta.env.VITE_APP_NAME || 'Laravel';

createInertiaApp({
    title: (title) => `${title} - ${appName}`,

    resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),

    setup({ el, App, props, plugin }) {
        return createApp({ render: () => h(App, props) })
            .use(plugin)
            .use(ZiggyVue, Ziggy)
            .mount(el);
    },
    progress: {
        color: '#4B5563',
    },
});

В итоге в коде страницы отображается так
<div id="app" data-page="{&quot;component&quot;:&quot;Auth\/Register&quot;,&quot;props&quot;:{&quot;errors&quot;:{},&quot;auth&quot;:{&quot;user&quot;:null},&quot;ziggy&quot;:{&quot;url&quot;:&quot;https:\/\/saite.ru&quot;,&quot;port&quot;:null,&quot;defaults&quot;:[],&quot;routes&quot;:{&quot;sanctum.csrf-cookie&quot;:{&quot;uri&quot;:&quot;sanctum\/csrf-cookie&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;ignition.healthCheck&quot;:{&quot;uri&quot;:&quot;_ignition\/health-check&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;ignition.executeSolution&quot;:{&quot;uri&quot;:&quot;_ignition\/execute-solution&quot;,&quot;methods&quot;:[&quot;POST&quot;]},&quot;ignition.updateConfig&quot;:{&quot;uri&quot;:&quot;_ignition\/update-config&quot;,&quot;methods&quot;:[&quot;POST&quot;]},&quot;dashboard&quot;:{&quot;uri&quot;:&quot;dashboard&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;profile.edit&quot;:{&quot;uri&quot;:&quot;profile&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;profile.update&quot;:{&quot;uri&quot;:&quot;profile&quot;,&quot;methods&quot;:[&quot;PATCH&quot;]},&quot;profile.destroy&quot;:{&quot;uri&quot;:&quot;profile&quot;,&quot;methods&quot;:[&quot;DELETE&quot;]},&quot;register&quot;:{&quot;uri&quot;:&quot;register&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;login&quot;:{&quot;uri&quot;:&quot;login&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;password.request&quot;:{&quot;uri&quot;:&quot;forgot-password&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;password.email&quot;:{&quot;uri&quot;:&quot;forgot-password&quot;,&quot;methods&quot;:[&quot;POST&quot;]},&quot;password.reset&quot;:{&quot;uri&quot;:&quot;reset-password\/{token}&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;],&quot;parameters&quot;:[&quot;token&quot;]},&quot;password.store&quot;:{&quot;uri&quot;:&quot;reset-password&quot;,&quot;methods&quot;:[&quot;POST&quot;]},&quot;verification.notice&quot;:{&quot;uri&quot;:&quot;verify-email&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;verification.verify&quot;:{&quot;uri&quot;:&quot;verify-email\/{id}\/{hash}&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;],&quot;parameters&quot;:[&quot;id&quot;,&quot;hash&quot;]},&quot;verification.send&quot;:{&quot;uri&quot;:&quot;email\/verification-notification&quot;,&quot;methods&quot;:[&quot;POST&quot;]},&quot;password.confirm&quot;:{&quot;uri&quot;:&quot;confirm-password&quot;,&quot;methods&quot;:[&quot;GET&quot;,&quot;HEAD&quot;]},&quot;password.update&quot;:{&quot;uri&quot;:&quot;password&quot;,&quot;methods&quot;:[&quot;PUT&quot;]},&quot;logout&quot;:{&quot;uri&quot;:&quot;logout&quot;,&quot;methods&quot;:[&quot;POST&quot;]}},&quot;location&quot;:&quot;https:\/\/saite.ru\/register&quot;}},&quot;url&quot;:&quot;\/register&quot;,&quot;version&quot;:&quot;ad2a6c07fa09f9a20614e1c9ce1db4bd&quot;}" data-v-app="">

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title inertia>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @routes
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">

	@inertia 
 
    </body>
</html>
  • Вопрос задан
  • 238 просмотров
Решения вопроса 1
@AnteFil Автор вопроса
Для будущих поколений кто будет искать решение этой проблемы. Так и должно быть. И это не ошибка работы )))))
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
neuotq
@neuotq
Прокрастинация
Inertia конечно же не избавляет от процесса рендера на клиенте, эта библиотека убирает не нужную(там где она не нужна) возню и прослойку в виде api, позволяя строить номодный фронтенд в прямой связи с классическим бекендом. Если вам нужен серверный рендер, то такая опция есть, но нужно будет ставить и настраивать SSR и node на сервере. После этого частично рендер будет происходить на сервере(по аналогии как это в фреймвораках типа Nuxt/Next).
Либо же взглянуть на совсем иной подход в виде Livewire, где мы получаем ту же "реактивность" и прочее, но обмен данными уже идет в виде блоков html. Что кстати более логично если мы строим приложение вокруг веба, без разделения на API/бэкенд - фронтенд. Как бы апгрейд классического подхода, зачастую имееющий МНОГО плюсов, если не собираетесь строить сильный API, кучу разных приложений для него и тп. А всё будет вокруг веба.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы