inertia-vue3@0.4.1

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

Before:

import { createApp, h } from 'vue'
import { App, plugin } from '@inertiajs/inertia-vue3'

const el = document.getElementById('app')

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

After:

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: (name) => import(`./Pages/${name}`),
  setup({ el, app, props, plugin }) {
    createApp({ render: () => h(app, props) })
      .use(plugin)
      .mount(el)
  },
})

Note that you 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',
})