CINXE.COM

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <script src="https://www.googletagmanager.com/gtag/js?id=UA-140425344-1" async></script> <link rel="preload" as="style" href="https://inertiajs.com/build/assets/app-d7e0265e.css" /><link rel="modulepreload" href="https://inertiajs.com/build/assets/app-33726d8e.js" /><link rel="stylesheet" href="https://inertiajs.com/build/assets/app-d7e0265e.css" /><script type="module" src="https://inertiajs.com/build/assets/app-33726d8e.js"></script> <title inertia>Manual visits - Inertia.js</title> </head> <body> <div id="app" data-page="{"component":"manual-visits","props":{"errors":{}},"url":"/manual-visits","version":"98a0dd0764a4bd0df6c50c60d320c18d"}"><div class="font-sans leading-none text-gray-800 antialiased"><div class="text-white" style="background:linear-gradient(to right, #9553e9, #6d74ed)"><div class="relative mx-auto max-w-6xl px-6 md:px-12 xl:px-0"><div class="absolute top-0 left-0 h-full w-full overflow-hidden"><svg class="w-auto" style="height:600px;fill:#b2b6ff;opacity:.08" viewBox="0 0 95 52.8"><path d="M27.3 0H0l26.4 26.4L0 52.8h27.3l26.4-26.4z"></path><path d="M68.6 0H41.3l26.4 26.4-26.4 26.4h27.3L95 26.4z"></path></svg></div><header class="relative flex items-center justify-between py-12"><a class="md:flex md:items-end" href="/"><svg class="block fill-current text-white" style="height:25px" viewBox="0 0 275.3 50.5"><path d="M231.2 16.1h-17.8l17.2 17.2-17.2 17.2h17.8l17.2-17.2z"></path><path d="M258.1 16.1h-17.8l17.2 17.2-17.2 17.2h17.8l17.2-17.2z"></path><path d="M6 15.3h10.3l-6 34.2H0l6-34.2zm.6-9.1C7.2 2.9 10.3 0 13.7 0s5.7 2.8 5.2 6.2c-.5 3.4-3.7 6.2-7.2 6.2s-5.6-3-5.1-6.2zM54.3 28.5l-3.7 21H40.4L43.8 30c.8-4.4-1.6-6.2-4.9-6.2-3.4 0-6.5 2-7.5 6.6L28 49.5H17.8l6-34.2h10.3l-.5 3.2c2.3-2.6 6.2-4.2 10.1-4.2 6.9.1 12.2 5.1 10.6 14.2zM94.5 32.4c-.1.8-.5 2.7-1.1 4.1H68.9c.6 3.8 3.8 4.8 7 4.8 2.9 0 5.2-.8 7.2-2.7l7.2 5.9c-4 4-8.7 6-15 6-11.8 0-18-8.5-16.3-18.7a20.7 20.7 0 0 1 20.5-17.4c9.8 0 16.9 7.6 15 18zm-9.7-3.7c-.3-3.8-3-5.3-6.2-5.3a8.9 8.9 0 0 0-8.3 5.3h14.5zM123.9 14.6l-2 11.6c-4-.6-10.5.8-11.7 7.8l.1-.4-2.8 15.9H97.3l6-34.2h10.3l-1.1 6.2c2.1-4.7 6.6-6.9 11.4-6.9zM137.8 37.3c-.5 3.1 2 3.3 6.6 2.9l-1.6 9.3c-12.3 1.4-16.9-2.7-15.2-12.2l2.1-12.1h-5.5l1.8-9.9h5.4l1.2-6.5 10.8-3.1-1.7 9.6h7.1l-1.8 9.9h-7l-2.2 12.1zM155.3 15.3h10.3l-6 34.2h-10.3l6-34.2zm.6-9.1c.5-3.3 3.7-6.2 7.1-6.2s5.7 2.8 5.2 6.2c-.5 3.4-3.7 6.2-7.2 6.2s-5.7-3-5.1-6.2zM208.1 15.3l-6 34.2h-10.3l.4-2.3a15.5 15.5 0 0 1-10.3 3.3c-11.1 0-15.3-9.6-13.5-18.9 1.6-8.8 8.6-17.2 19.2-17.2 4.5 0 7.7 1.8 9.6 4.6l.6-3.6h10.3zm-13.2 17.2c.9-5.2-1.9-8.4-6.6-8.4a9.5 9.5 0 0 0-9.5 8.3c-.9 5.1 1.8 8.3 6.6 8.3 4.6.1 8.6-3.1 9.5-8.2z"></path></svg><svg class="mt-2 block fill-current text-white md:mt-0 md:ml-4" style="height:8px" viewBox="0 0 328.3 16"><path d="M11.1 2.2H6.6v13.5h-2V2.2H0V.3h11.1v1.9zM29.1.3v15.4h-2V8.8h-7.5v6.9h-2V.3h2v6.5h7.5V.3h2zM46 13.8v1.9h-9.2V.3h9.1v1.9h-7V7h6.5v1.9h-6.5v4.9H46zM77.2 15.7h-2v-12l-5 8.4h-.3l-5-8.4v12h-2V.3h2.3L70 8.4 74.9.3h2.3v15.4zM84 8a8 8 0 0 1 8-8c4.5 0 8 3.5 8 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8zm13.9 0c0-3.4-2.6-6-5.9-6a5.8 5.8 0 0 0-5.9 6c0 3.4 2.6 6 5.9 6 3.4 0 5.9-2.6 5.9-6zM120.2 8c0 4.3-3.1 7.7-7.3 7.7h-6V.3h6c4.2 0 7.3 3.4 7.3 7.7zm-2 0c0-3.3-2.2-5.8-5.3-5.8h-4v11.5h4c3.1.1 5.3-2.5 5.3-5.7zM136.2 13.8v1.9H127V.3h9.1v1.9h-7V7h6.5v1.9h-6.5v4.9h7.1zM148.8 9.8h-3.6v5.9h-2V.3h6.2c2.6 0 4.8 2.1 4.8 4.8 0 2-1.3 3.8-3.2 4.5l3.6 6.2h-2.3l-3.5-6zm-3.6-1.9h4.1c1.5 0 2.8-1.3 2.8-2.9 0-1.6-1.2-2.9-2.8-2.9h-4.1v5.8zM172.6.3v15.4H171l-8-11.5v11.5h-2V.3h1.7l7.9 11.5V.3h2zM204.6 15.7h-2v-12l-5 8.4h-.3l-5-8.4v12h-2V.3h2.3l4.9 8.1 4.9-8.1h2.3v15.4zM211.5 8a8 8 0 0 1 8-8c4.5 0 8 3.5 8 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8zm13.9 0c0-3.4-2.6-6-5.9-6a5.8 5.8 0 0 0-5.9 6c0 3.4 2.6 6 5.9 6 3.3 0 5.9-2.6 5.9-6zM245.9.3v15.4h-1.6l-7.9-11.5v11.5h-2V.3h1.7l7.9 11.5V.3h1.9zM252.8 8a8 8 0 0 1 8-8c4.5 0 8 3.5 8 8a8 8 0 0 1-8 8 8 8 0 0 1-8-8zm13.9 0c0-3.4-2.6-6-5.9-6a5.8 5.8 0 0 0-5.9 6c0 3.4 2.6 6 5.9 6 3.3 0 5.9-2.6 5.9-6zM284.3 13.8v1.9h-8.7V.3h2v13.5h6.7zM292.8.3v15.4h-2V.3h2zM310.3 2.2h-4.6v13.5h-2V2.2h-4.5V.3h11.1v1.9zM328.3.3v15.4h-2V8.8h-7.5v6.9h-2V.3h2v6.5h7.5V.3h2z"></path></svg></a><div class="relative z-10 md:hidden"><button class="focus:outline-none block" type="button"><svg class="block h-6 w-6 fill-current text-white" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path></svg></button></div><div class="hidden items-center text-white md:flex"><div class="relative -my-2 mr-5"></div><a class="mr-5 flex items-center hover:text-purple-900" href="https://github.com/inertiajs"><svg class="h-6 w-6 fill-current" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path></svg></a><a class="mr-5 flex items-center hover:text-purple-900" href="https://twitter.com/inertiajs"><svg class="h-6 w-6 fill-current" viewBox="0 0 20 20"><title>Twitter</title><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path></svg></a><a class="flex items-center hover:text-purple-900" href="https://discord.gg/inertiajs"><svg class="h-6 w-6 fill-current" viewBox="0 0 146 146"><title>Discord</title><path d="M107.75 125.001s-4.5-5.375-8.25-10.125c16.375-4.625 22.625-14.875 22.625-14.875-5.125 3.375-10 5.75-14.375 7.375-6.25 2.625-12.25 4.375-18.125 5.375-12 2.25-23 1.625-32.375-.125-7.125-1.375-13.25-3.375-18.375-5.375-2.875-1.125-6-2.5-9.125-4.25-.375-.25-.75-.375-1.125-.625-.25-.125-.375-.25-.5-.375-2.25-1.25-3.5-2.125-3.5-2.125s6 10 21.875 14.75c-3.75 4.75-8.375 10.375-8.375 10.375-27.625-.875-38.125-19-38.125-19 0-40.25 18-72.875 18-72.875 18-13.5 35.125-13.125 35.125-13.125l1.25 1.5c-22.5 6.5-32.875 16.375-32.875 16.375s2.75-1.5 7.375-3.625c13.375-5.875 24-7.5 28.375-7.875.75-.125 1.375-.25 2.125-.25 7.625-1 16.25-1.25 25.25-.25 11.875 1.375 24.625 4.875 37.625 12 0 0-9.875-9.375-31.125-15.875l1.75-2S110 19.626 128 33.126c0 0 18 32.625 18 72.875 0 0-10.625 18.125-38.25 19zM49.625 66.626c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875.125-7.625-5.625-13.875-12.75-13.875zm45.625 0c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875s-5.625-13.875-12.75-13.875z"></path></svg></a></div></header></div></div><div class="mx-auto flex max-w-6xl py-12 md:px-12 md:py-24 xl:px-0"><nav class="hidden flex-shrink-0 border-r md:block md:w-48 lg:w-56"><div class="-mx-6 mt-4 mb-6 flex justify-center border-b pb-4 md:hidden"><a class="mr-5 flex items-center text-gray-500 hover:text-gray-700" href="https://github.com/inertiajs"><svg class="h-5 w-5 fill-current" viewBox="0 0 20 20"><title>GitHub</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path></svg></a><a class="mr-5 flex items-center text-gray-500 hover:text-gray-700" href="https://twitter.com/inertiajs"><svg class="h-5 w-5 fill-current" viewBox="0 0 20 20"><title>Twitter</title><path d="M6.29 18.25c7.55 0 11.67-6.25 11.67-11.67v-.53c.8-.59 1.49-1.3 2.04-2.13-.75.33-1.54.55-2.36.65a4.12 4.12 0 0 0 1.8-2.27c-.8.48-1.68.81-2.6 1a4.1 4.1 0 0 0-7 3.74 11.65 11.65 0 0 1-8.45-4.3 4.1 4.1 0 0 0 1.27 5.49C2.01 8.2 1.37 8.03.8 7.7v.05a4.1 4.1 0 0 0 3.3 4.03 4.1 4.1 0 0 1-1.86.07 4.1 4.1 0 0 0 3.83 2.85A8.23 8.23 0 0 1 0 16.4a11.62 11.62 0 0 0 6.29 1.84"></path></svg></a><a class="flex items-center text-gray-500 hover:text-gray-700" href="https://discord.gg/gwgxN8Y"><svg class="h-5 w-5 fill-current" viewBox="0 0 146 146"><title>Discord</title><path d="M107.75 125.001s-4.5-5.375-8.25-10.125c16.375-4.625 22.625-14.875 22.625-14.875-5.125 3.375-10 5.75-14.375 7.375-6.25 2.625-12.25 4.375-18.125 5.375-12 2.25-23 1.625-32.375-.125-7.125-1.375-13.25-3.375-18.375-5.375-2.875-1.125-6-2.5-9.125-4.25-.375-.25-.75-.375-1.125-.625-.25-.125-.375-.25-.5-.375-2.25-1.25-3.5-2.125-3.5-2.125s6 10 21.875 14.75c-3.75 4.75-8.375 10.375-8.375 10.375-27.625-.875-38.125-19-38.125-19 0-40.25 18-72.875 18-72.875 18-13.5 35.125-13.125 35.125-13.125l1.25 1.5c-22.5 6.5-32.875 16.375-32.875 16.375s2.75-1.5 7.375-3.625c13.375-5.875 24-7.5 28.375-7.875.75-.125 1.375-.25 2.125-.25 7.625-1 16.25-1.25 25.25-.25 11.875 1.375 24.625 4.875 37.625 12 0 0-9.875-9.375-31.125-15.875l1.75-2S110 19.626 128 33.126c0 0 18 32.625 18 72.875 0 0-10.625 18.125-38.25 19zM49.625 66.626c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875.125-7.625-5.625-13.875-12.75-13.875zm45.625 0c-7.125 0-12.75 6.25-12.75 13.875s5.75 13.875 12.75 13.875c7.125 0 12.75-6.25 12.75-13.875s-5.625-13.875-12.75-13.875z" fill-rule="nonzero"></path></svg></a></div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/">Introduction</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/demo-application">Demo app</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/upgrade-guide">Upgrade guide</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">Installation</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/server-side-setup">Server-side</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/client-side-setup">Client-side</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">Core concepts</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/who-is-it-for">Who is it for</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/how-it-works">How it works</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/the-protocol">The protocol</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">The basics</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/pages">Pages</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/responses">Responses</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/redirects">Redirects</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/routing">Routing</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/title-and-meta">Title & meta</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/links">Links</a></li><li class="md:pr-3"><a class="block -ml-3 pl-3 pr-2 py-1 md:py-2 font-medium border-l-4 rounded-r border-purple-400 bg-purple-100 text-purple-700" href="/manual-visits">Manual visits</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/forms">Forms</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/file-uploads">File uploads</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/validation">Validation</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/shared-data">Shared data</a></li></ul><div class="mt-8 mb-3 text-xs font-bold uppercase tracking-widest text-gray-500 md:mt-12">Advanced</div><ul><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/events">Events</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/testing">Testing</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/partial-reloads">Partial reloads</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/scroll-management">Scroll management</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/authentication">Authentication</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/authorization">Authorization</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/csrf-protection">CSRF protection</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/error-handling">Error handling</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/asset-versioning">Asset versioning</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/progress-indicators">Progress indicators</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/remembering-state">Remembering state</a></li><li class="md:pr-3"><a class="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-700" href="/server-side-rendering">Server-side rendering</a></li></ul></nav><div class="flex-1 overflow-hidden px-6 text-lg leading-relaxed md:pl-12 md:pr-0 lg:pl-16 xl:pl-16 xl:pr-20" id="top"><h1 class="mb-12 text-4xl font-bold leading-none text-gray-700">Manual visits</h1><p class="my-6">In addition to <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/links">creating links</a>, it's also possible to manually make Inertia visits / requests programmatically via JavaScript. This is accomplished via the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">router.visit()</code> method.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">visit</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'get'</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">replace</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">preserveState</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">preserveScroll</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token literal-property property">only</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">errorBag</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token literal-property property">forceFormData</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token function-variable function">onCancelToken</span><span class="token operator">:</span> <span class="token parameter">cancelToken</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onCancel</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onBefore</span><span class="token operator">:</span> <span class="token parameter">visit</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onStart</span><span class="token operator">:</span> <span class="token parameter">visit</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onProgress</span><span class="token operator">:</span> <span class="token parameter">progress</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onSuccess</span><span class="token operator">:</span> <span class="token parameter">page</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onError</span><span class="token operator">:</span> <span class="token parameter">errors</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onFinish</span><span class="token operator">:</span> <span class="token parameter">visit</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">However, it's generally more convenient to use one of Inertia's shortcut request methods. These methods share all the same options as <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">router.visit()</code>.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> options<span class="token punctuation">)</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> options<span class="token punctuation">)</span> router<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> options<span class="token punctuation">)</span> router<span class="token punctuation">.</span><span class="token function">patch</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> data<span class="token punctuation">,</span> options<span class="token punctuation">)</span> router<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> options<span class="token punctuation">)</span> router<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span> <span class="token comment">// Uses the current URL</span></code></pre></div><p class="my-6">The <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">reload()</code> method is a convenient, shorthand method that automatically visits the current page with <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveState</code> and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveScroll</code> both set to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">true</code>, making it the perfect method to invoke when you just want to reload the current page's data.</p><h2 id="method" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Method</h2><p class="my-6">When making manual visits, you may use the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">method</code> option to set the request's HTTP method to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">get</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">post</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">put</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">patch</code> or <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">delete</code>. The default method is <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">get</code>.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">visit</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'post'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><div class="my-8 rounded-r border-l-4 border-orange-400 bg-orange-200 px-6 py-4 text-base leading-normal text-orange-900">Uploading files via <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">put</code> or <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">patch</code> is not supported in Laravel. Instead, make the request via <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">post</code>, including a <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">_method</code> field set to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">put</code> or <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">patch</code>. This is called <a href="https://laravel.com/docs/8.x/routing#form-method-spoofing" class="text-blue-700 hover:text-orange-700 font-medium underline">form method spoofing</a>.</div><h2 id="data" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Data</h2><p class="my-6">You may use the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">data</code> option to add data to the request.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">method</span><span class="token operator">:</span> <span class="token string">'post'</span><span class="token punctuation">,</span> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John Doe'</span><span class="token punctuation">,</span> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token string">'john.doe@example.com'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">For convenience, the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">get()</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">post()</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">put()</code>, and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">patch()</code> methods all accept <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">data</code> as their second argument.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John Doe'</span><span class="token punctuation">,</span> <span class="token literal-property property">email</span><span class="token operator">:</span> <span class="token string">'john.doe@example.com'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><h2 id="custom-headers" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Custom headers</h2><p class="my-6">The <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">headers</code> option allows you to add custom headers to a request.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">headers</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">'Custom-Header'</span><span class="token operator">:</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><div class="my-8 rounded-r border-l-4 border-orange-400 bg-orange-200 px-6 py-4 text-base leading-normal text-orange-900">The headers Inertia uses internally to communicate its state to the server take priority and therefore cannot be overwritten.</div><h2 id="file-uploads" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">File uploads</h2><p class="my-6">When making visits / requests that include files, Inertia will automatically convert the request data into a <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">FormData</code> object. If you would like the request to always use a <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">FormData</code> object, you may use the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">forceFormData</code> option.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/companies'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">forceFormData</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">For more information on uploading files, please consult the dedicated <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/file-uploads">file uploads</a> documentation.</p><h2 id="browser-history" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Browser history</h2><p class="my-6">When making visits, Inertia automatically adds a new entry into the browser history. However, it's also possible to replace the current history entry by setting the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">replace</code> option to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">true</code>.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">search</span><span class="token operator">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">replace</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><div class="my-8 rounded-r border-l-4 border-orange-400 bg-orange-200 px-6 py-4 text-base leading-normal text-orange-900">Visits made to the same URL automatically set <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">replace</code> to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">true</code>.</div><h2 id="state-preservation" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">State preservation</h2><p class="my-6">By default, page visits to the same page create a fresh page component instance. This causes any local state, such as form inputs, scroll positions, and focus states to be lost.</p><p class="my-6">However, in some situations, it's necessary to preserve the page component state. For example, when submitting a form, you need to preserve your form data in the event that form validation fails on the server.</p><p class="my-6">For this reason, the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">post</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">put</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">patch</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">delete</code>, and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">reload</code> methods all set the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveState</code> option to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">true</code> by default.</p><p class="my-6">You can instruct Inertia to preserve the component's state when using the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">get</code> method by setting the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveState</code> option to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">true</code>.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">search</span><span class="token operator">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">preserveState</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">If you'd like to only preserve state if the response includes validation errors, set the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveState</code> option to "errors".</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">search</span><span class="token operator">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">preserveState</span><span class="token operator">:</span> <span class="token string">'errors'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">You can also lazily evaluate the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveState</code> option based on the response by providing a callback.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">preserveState</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=></span> page<span class="token punctuation">.</span>props<span class="token punctuation">.</span>someProp <span class="token operator">===</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><h2 id="scroll-preservation" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Scroll preservation</h2><p class="my-6">When navigating between pages, Inertia mimics default browser behavior by automatically resetting the scroll position of the document body (as well as any <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/scroll-management#scroll-regions">scroll regions</a> you've defined) back to the top of the page.</p><p class="my-6">You can disable this behavior by setting the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveScroll</code> option to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">false</code>.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">visit</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">preserveScroll</span><span class="token operator">:</span> <span class="token boolean">false</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">If you'd like to only preserve the scroll position if the response includes validation errors, set the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveScroll</code> option to "errors".</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">visit</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">preserveScroll</span><span class="token operator">:</span> <span class="token string">'errors'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">You can also lazily evaluate the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">preserveScroll</code> option based on the response by providing a callback.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">preserveScroll</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=></span> page<span class="token punctuation">.</span>props<span class="token punctuation">.</span>someProp <span class="token operator">===</span> <span class="token string">'value'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">For more information regarding this feature, please consult the <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/scroll-management">scroll management</a> documentation.</p><h2 id="partial-reloads" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Partial reloads</h2><p class="my-6">The <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">only</code> option allows you to request a subset of the props (data) from the server on subsequent visits to the same page, thus making your application more efficient since it does not need to retrieve data that the page is not interested in refreshing.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">visit</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">search</span><span class="token operator">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">only</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'users'</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">For more information on this feature, please consult the <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/partial-reloads">partial reloads</a> documentation.</p><h2 id="visit-cancellation" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Visit cancellation</h2><p class="my-6">You can cancel a visit using a cancel token, which Inertia automatically generates and provides via the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">onCancelToken()</code> callback prior to making the visit.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">onCancelToken</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">cancelToken</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>cancelToken <span class="token operator">=</span> cancelToken<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">// Cancel the visit...</span> <span class="token keyword">this</span><span class="token punctuation">.</span>cancelToken<span class="token punctuation">.</span><span class="token function">cancel</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">The <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">onCancel()</code> and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">onFinish()</code> event callbacks will be executed when a visit is cancelled.</p><h2 id="event-callbacks" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Event callbacks</h2><p class="my-6">In addition to Inertia's <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/events">global events</a>, Inertia also provides a number of per-visit event callbacks.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/users'</span><span class="token punctuation">,</span> data<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">onBefore</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">visit</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onStart</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">visit</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onProgress</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">progress</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onSuccess</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">page</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onError</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">errors</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onCancel</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function-variable function">onFinish</span><span class="token operator">:</span> <span class="token parameter">visit</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">Returning <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">false</code> from the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">onBefore()</code> callback will cause the visit to be cancelled.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">delete</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">/users/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>user<span class="token punctuation">.</span>id<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">onBefore</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Are you sure you want to delete this user?'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div><p class="my-6">It's also possible to return a promise from the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">onSuccess()</code> and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">onError()</code> callbacks. When doing so, the "finish" event will be delayed until the promise has resolved.</p><div class="my-8 overflow-hidden rounded"><div class="flex px-4 pt-3" style="background:#303f6d"><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Vue 2</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6" style="color:white;background:#202e59">Vue 3</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">React</button><button type="button" class="focus:outline-none mr-1 rounded-t px-3 pt-3 pb-2 text-sm font-medium text-gray-500 hover:text-gray-200 sm:px-6">Svelte</button></div><pre><code style="height:auto" class="p-6 leading-normal block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token keyword">import</span> <span class="token punctuation">{</span> router <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'@inertiajs/vue3'</span> router<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span>url<span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token function-variable function">onSuccess</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">doAnotherThing</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token function-variable function">onFinish</span><span class="token operator">:</span> <span class="token parameter">visit</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// This won't be called until doThing()</span> <span class="token comment">// and doAnotherThing() have finished.</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div></div><div class="relative -mt-8 hidden w-44 flex-shrink-0 xl:block"><div class="sticky top-0 pt-8"><div class="mb-12"><div class="text-xs font-bold uppercase tracking-widest text-gray-500">On this page</div><ul><li class="mt-4"><a href="#method" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Method</a></li><li class="mt-4"><a href="#data" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Data</a></li><li class="mt-4"><a href="#custom-headers" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Custom headers</a></li><li class="mt-4"><a href="#file-uploads" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">File uploads</a></li><li class="mt-4"><a href="#browser-history" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Browser history</a></li><li class="mt-4"><a href="#state-preservation" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">State preservation</a></li><li class="mt-4"><a href="#scroll-preservation" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Scroll preservation</a></li><li class="mt-4"><a href="#partial-reloads" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Partial reloads</a></li><li class="mt-4"><a href="#visit-cancellation" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Visit cancellation</a></li><li class="mt-4"><a href="#event-callbacks" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Event callbacks</a></li></ul></div><div class="mb-6 text-xs font-bold uppercase tracking-widest text-gray-500">Our partners:</div><a class="block w-3/4" href="https://forge.laravel.com" title="Laravel Forge"><svg class="h-auto w-full" viewBox="0 0 217.38 39.97"><path fill="#19b59b" d="M77.94.32c4.13 0 6.03.74 7.2 2.22 1.68 2.22 2.64 6.66-.11 17.55S79.2 35.3 76.36 37.64c-1.9 1.48-4.23 2.22-8.36 2.22H54.8c-4.13 0-6.13-.74-7.2-2.22-1.68-2.22-2.63-6.66.22-17.55 2.75-10.9 5.92-15.23 8.78-17.55C58.49 1.06 60.8.32 64.94.32h13zM58.7 30.24c.21.32.74.42 2.43.42h5.08c1.69 0 2.32-.1 2.75-.42.52-.42 1.48-1.48 3.59-10.15 2.22-8.67 1.8-9.73 1.48-10.15-.21-.32-.74-.42-2.43-.42h-4.97c-1.7 0-2.33.1-2.75.42-.53.42-1.48 1.48-3.6 10.15-2.32 8.77-1.9 9.73-1.58 10.15zm51.28-3.17c-.42-.53-.85-.74-3.38-.74h-4.97c-.53 0-1.06.42-1.17.95L97.61 38.9c-.1.53-.64.95-1.16.95H86.19c-.53 0-.85-.42-.74-.95l9.4-37.64c.11-.53.64-.95 1.17-.95h24.1c3.92 0 6.03.53 7.2 2 1.27 1.8 1.69 3.7.32 9.2-1.8 7.4-4.55 9.52-9.3 10.47v.1c3.7.96 5.7 2.23 4.43 7.94-.74 3.27-1.27 6.55-1.58 8.77-.11.53-.64 1.06-1.17 1.06h-10.46c-.43 0-.85-.32-.74-.85.31-2.43.74-4.86 1.37-7.93.42-2.85.21-3.38-.21-4.01zm-.74-9.3c2.22 0 2.85-.11 3.28-.43.74-.53 1.26-1.48 1.8-3.8s.42-3.18 0-3.7c-.32-.32-.85-.43-3.07-.43h-5.5c-.53 0-1.06.42-1.16.95L103 16.92c-.1.53.21.95.74.95h5.5v-.1zM160.94 0c4.23 0 6.45.53 7.72 2 1.48 1.8 2 4.56.84 10.69-.1.53-.63.95-1.16.95h-9.83c-.53 0-.85-.42-.74-.85.42-2.43-.1-2.75-.43-3.17-.2-.32-.63-.42-2.43-.42h-5.07c-1.8 0-2.33.1-2.75.42-.64.53-1.8 2.33-3.7 10.36s-1.59 9.94-1.27 10.47c.21.32.74.42 2.54.42h5.39c1.59 0 2.22-.1 2.64-.42.53-.42 1.59-1.48 2.22-4.33l.1-.32h-7.6c-.53 0-.85-.43-.74-.95l1.48-6.35c.1-.53.63-.95 1.16-.95h18.3c.52 0 .84.42.73.95l-.95 3.91c-2.22 9.63-4.86 13-7.61 15.23-2.01 1.7-4.87 2.33-8.57 2.33H138c-4.13 0-6.14-.74-7.3-2.33-1.8-2.33-2.75-6.66-.1-17.66s5.7-15.43 8.56-17.65C141.06.74 143.39 0 147.51 0h13.43zm41.23 39.97h-31.6c-.54 0-.85-.43-.75-.96L178.7.95c.1-.53.64-.95 1.17-.95h36.79c.63 0 .95.63.53 1.27-1.59 2.54-7.72 7.93-14.6 7.93H189.8c-.52 0-1.05.42-1.16.95l-.95 4.23c-.1.53.21.95.74.95h17.23c.53 0 .85.42.74.95l-1.48 6.66c-.1.53-.63.95-1.16.95h-17.23c-.53 0-1.06.43-1.17.96l-1.16 4.86c-.1.53.21.95.74.95h19.35c.53 0 .84.42.74.95l-1.7 7.3c-.1.63-.63 1.06-1.16 1.06zM50.24.32H6.9c-.53 0-1.05.42-1.16.95l-1.06 3.8c-.1.43.1.75.43.96 1.69.53 10.78.74 9.4 5.81l-.31 1.38-3.7 13.85-.32 1.37c-1.37 5.08-6.24 5.29-8.25 5.82-.42.1-.74.52-.84.95L.02 39c-.1.53.21.96.74.96h17.66c.53 0 1.05-.43 1.16-.96l3.17-12.26c.1-.53.64-.95 1.16-.95h11.32c.53 0 1.06-.43 1.16-.95l1.7-6.56c.1-.53-.22-.95-.75-.95H26.03c-.53 0-.85-.42-.74-.95l1.59-5.92c.1-.53.63-.95 1.16-.95h17.02c.53 0 1.06-.43 1.16-.96l4.55-7.19c.21-.63 0-1.05-.53-1.05z"></path></svg></a><div class="mt-12 border-t pt-12" id="ad"></div></div></div></div></div></div> </body> </html>