inertia-vue@0.6.1

Published on May 31, 2021

This release adds a new createInertiaApp() setup method to make configuring Inertia easier (#698). Here's how to use it:

Before:

import Vue from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue'

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
  render: h => h(App, {
    props: {
      initialPage: JSON.parse(el.dataset.page),
      resolveComponent: name => require(`./Pages/${name}`).default,
    },
  }),
}).$mount(el)

After:

import Vue from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue'

createInertiaApp({
  resolve: name => require(`./Pages/${name}`),
  setup({ el, app, props }) {
    new Vue({
      render: h => h(app, props),
    }).$mount(el)
  },
})

Note that Inertia now automatically registers its Vue plugin, so you can omit that. You also no longer need to manually return the default export, as Inertia now handles this automatically.

createInertiaApp({
- resolve: name => require(`./Pages/${name}`).default,
+ resolve: name => require(`./Pages/${name}`),
})

Same goes for if you're using code splitting:

createInertiaApp({
- resolve: name => import(`./Pages/${name}`).then(module => module.default),
+ resolve: name => import(`./Pages/${name}`),
})

By default Inertia uses app as the root element that your app will boot in. However, you can change this using the id property:

createInertiaApp({
  id: 'my-custom-div',
})