Inertia: Move Inertia config out of adapters

Created on 4 Oct 2019  路  2Comments  路  Source: inertiajs/inertia

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)

Most helpful comment

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.

All 2 comments

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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

piercemcgeough picture piercemcgeough  路  4Comments

gajosadrian picture gajosadrian  路  5Comments

TimVanHerwijnen picture TimVanHerwijnen  路  5Comments

mpskovvang picture mpskovvang  路  5Comments

alighasemzadeh picture alighasemzadeh  路  4Comments