As we add more features to Inertia itself, we constantly need to update the adapters, as they serve as the entry point to Inertia. However, for most features, the adapter is simply a proxy. I'm starting to think it might be better to push more of this work to Inertia directly, and let the adapters remain a little simpler.
For example, currently we do this:
import Vue from 'vue'
import { InertiaApp } from '@inertiajs/inertia-vue'
let app = document.getElementById('app')
Vue.use(InertiaApp)
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
transformProps: props => { ... },
},
}),
}).$mount(app)
What I'm proposing:
```js
import Vue from 'vue'
import { Inertia } from '@inertiajs/inertia'
import { InertiaApp } from '@inertiajs/inertia-vue'
Inertia.init({
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => import(@/Pages/${name}).then(module => module.default),
transformProps: props => { ... },
})
let app = document.getElementById('app')
Vue.use(InertiaApp)
new Vue({ render: h => h(InertiaApp) }).$mount(app)
An updated concept:
import Vue from 'vue'
import { Inertia } from '@inertiajs/inertia'
import { InertiaApp, InertiaPlugin } from '@inertiajs/inertia-vue'
import { InertiaProgress } from '@inertiajs/progress'
Inertia.init('#app', { resolve: name => require(`./Pages/${name}`).default })
InertiaProgress.init()
Vue.use(InertiaPlugin)
new Vue({
render: h => h(InertiaApp),
}).$mount('#app')
This add a new InertiaPlugin, which I think makes more sense than combining this with InertiaApp.
I also think we can just remove initialPage: JSON.parse(app.dataset.page) entirely in favour of an element selector.
After much thinking and experimentation with this, I've decided that I don't think this is a worthwhile breaking change. Plus, as an added bonus, Vue 3 has dropped the props property, and these options can now be top level:
const app = createApp({
render: () => h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => import(`@/Pages/${name}`).then(module => module.default),
transformProps: props => { ... },
})
})
Instead, I am going to move the "transformProps" behaviour out of the adapters and into the core (where it should have been all along), and the simply proxy all these options from the adapters to core via the Inertia.init() method.
Most helpful comment
An updated concept:
This add a new
InertiaPlugin, which I think makes more sense than combining this withInertiaApp.I also think we can just remove
initialPage: JSON.parse(app.dataset.page)entirely in favour of an element selector.