inertia
inertia copied to clipboard
Published
20 hours ago •
inertiajs
inertiajs
Allow passing initialData callback
solves #1960 and #1878 (although not through a new request)
This would allow users to customize how the initial data is rendered. Currently it is always added through the data-page attribute.
With this PR the following is possible;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<!-- Rendering the props in a script tag -->
<script>
window.__inertia_data__ = {{ Illuminate\Support\Js::from($page) }};
</script>
@vite('resources/js/app.js')
@inertiaHead
</head>
<body>
<!-- Just render a div, without the need for data-page -->
<div id="app"></div>
</body>
</html>
Then in your main script you'd do the following:
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => {
const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
return pages[`./Pages/${name}.vue`]
},
// Pass the initialData callback, as we provide the data and Inertia doesn't have to grab it from the DOM
initialData: () => window.__inertia_data__,
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
As a note: This would also require a bit of rework for SSR, as that would still output the div with the data-page. Haven't gotten to fixing that yet, but if there's no interest in this there's no point in researching that
