Requests

In addition to creating links, it's also very common to manually make Inertia visits. The following methods are available. Take note of the defaults.

// import { Inertia } from '@inertiajs/inertia'

this.$inertia.visit(url, {
  method: 'get',
  data: {},
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
})

this.$inertia.replace(url, {
  method: 'get',
  data: {},
  preserveState: true,
  preserveScroll: false,
  only: [],
  headers: {},
})

this.$inertia.reload({
  method: 'get',
  data: {},
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
})

this.$inertia.post(url, data, {
  replace: false,
  preserveState: true,
  preserveScroll: false,
  only: [],
  headers: {},
})

this.$inertia.put(url, data, {
  replace: false,
  preserveState: true,
  preserveScroll: false,
  only: [],
  headers: {},
})

this.$inertia.patch(url, data, {
  replace: false,
  preserveState: true,
  preserveScroll: false,
  only: [],
  headers: {},
})

this.$inertia.delete(url, {
  replace: false,
  preserveState: false,
  preserveScroll: false,
  only: [],
  headers: {},
})

Note, the reload method automatically uses the current URL.

History state

By default page visits push (new) state (history.pushState) into the history, however it's also possible to replace state (history.replaceState) by setting the replace option to true. This will cause the visit to replace the current history state, instead of adding a new history state to the stack.

Local component state

By default page visits to the same page will force a fresh page component instance. However, in certain situations you may want to keep the existing page instance in order to preserve some local state. You can do this by setting the preserveState option to true.

Scroll management

By default page visits will automatically reset the scroll position back to the top of the page (and any scroll regions you've defined). You can use the preserveScroll option to disable this behaviour.

Partial reloads

The only option allows you to request a subset of the props (data) from the server on subsequent visits to the same page. This feature is called partial reloads, and can be a helpful performance optimization if it's acceptable that some page data becomes stale. For partial reloads to be effective, be sure to use lazy evaluation server-side.

Custom headers

The headers option allows you to add additional custom headers to a request. Do note that Inertia's headers take priority and therefore cannot be overwritten.

import { Inertia } from '@inertiajs/inertia'

Inertia.visit('/users', {
  headers: {
    'Custom-Header': 'value',
  },
})

Inertia.post('/users', data, {
  headers: {
    'Custom-Header': 'value',
  },
})