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>Upgrade guide - Inertia.js</title> </head> <body> <div id="app" data-page="{"component":"upgrade-guide","props":{"errors":{}},"url":"/upgrade-guide","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="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="/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="inline-block py-1 md:py-2 hover:text-blue-700 hover:underline font-medium text-gray-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">Upgrade guide for v1.0</h1><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">You can find the legacy docs for Inertia.js v0.11 at <a href="https://legacy.inertiajs.com" class="text-blue-700 hover:text-orange-700 font-medium underline">legacy.inertiajs.com</a>.</div><h2 id="whats-new" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">What's new</h2><p class="my-6">Inertia.js v1.0 focuses on simplifying the overall architecture of the project with the goal of making Inertia easier to maintain and easier to use.</p><p class="my-6">It includes a number of breaking changes, mostly related to package names and updated named exports. This guide explains how to upgrade your project to v1.0.</p><p class="my-6">For a complete list of all the changes, see the <a href="https://github.com/inertiajs/inertia/releases/tag/v1.0.0" class="text-blue-700 hover:text-orange-700 font-medium underline">release notes</a>.</p><h2 id="new-dependencies" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">New dependencies</h2><p class="my-6">To use previous Inertia releases, you had to install a number of libraries, including the core library (<code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">@inertiajs/inertia</code>), the adapter of your choice (<code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">@inertiajs/inertia-vue|vue3|react|svelte</code>), the progress library (<code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">@inertiajs/progress</code>), and if you were using server-side rendering, the server library (<code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">@inertiajs/server</code>).</p><p class="my-6"><strong class="font-bold text-gray-700">Moving forward you are now only required to install a single library</strong> — the adapter of your choice (Vue, React, or Svelte), and all other core libraries are automatically installed for you.</p><p class="my-6">To get started, remove <em>all</em> of the old Inertia libraries.</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 function">npm</span> remove @inertiajs/inertia @inertiajs/inertia-vue3 @inertiajs/progress @inertiajs/server</code></pre></div><p class="my-6">Next, install the new Inertia adapter of your choice. The new adapter libraries have been renamed, and no longer include <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">inertia-</code> in them.</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 function">npm</span> <span class="token function">install</span> @inertiajs/vue3</code></pre></div><h2 id="renamed-imports" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Renamed imports</h2><p class="my-6">Next, update all the Inertia related imports in your project to use the new adapter library name. All imports are now available from the adapter library, meaning you no longer import anything from the Inertia core library, progress library, or server library.</p><p class="my-6">Additionally, some exports have been renamed and previously deprecated exports have been removed. For example, the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">Inertia</code> export has been renamed to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">router</code>.</p><p class="my-6">Here is a complete list of all the import changes:</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 deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { Inertia } from '@inertiajs/inertia' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { router } from '@inertiajs/vue3' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import createServer from '@inertiajs/server' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import createServer from '@inertiajs/vue3/server' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { createInertiaApp } from '@inertiajs/inertia-vue3' </span><span class="token prefix deleted">-</span><span class="token line"> import { App } from '@inertiajs/inertia-vue3' </span><span class="token prefix deleted">-</span><span class="token line"> import { app } from '@inertiajs/inertia-vue3' </span><span class="token prefix deleted">-</span><span class="token line"> import { plugin } from '@inertiajs/inertia-vue3' </span><span class="token prefix deleted">-</span><span class="token line"> import { InertiaApp } from '@inertiajs/inertia-vue3' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { createInertiaApp } from '@inertiajs/vue3' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { usePage } from '@inertiajs/inertia-vue3' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { usePage } from '@inertiajs/vue3' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { useForm } from '@inertiajs/inertia-vue3' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { useForm } from '@inertiajs/vue3' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { useRemember } from '@inertiajs/inertia-vue3' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { useRemember } from '@inertiajs/vue3' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { Head } from '@inertiajs/inertia-vue3' </span><span class="token prefix deleted">-</span><span class="token line"> import { InertiaHead } from '@inertiajs/inertia-vue3' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { Head } from '@inertiajs/vue3' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { Link } from '@inertiajs/inertia-vue3' </span><span class="token prefix deleted">-</span><span class="token line"> import { link } from '@inertiajs/inertia-vue3' </span><span class="token prefix deleted">-</span><span class="token line"> import { InertiaLink } from '@inertiajs/inertia-vue3' </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> import { Link } from '@inertiajs/vue3'</span></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">It is no longer possible to manually configure Inertia using the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">App</code> export. Instead, you should use the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-orange-300">createInertiaApp()</code> helper. See the <a class="text-blue-700 hover:text-orange-700 font-medium underline" href="/client-side-setup#initialize-the-inertia-app">client-side setup</a> documentation for more information.</div><h2 id="progress" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Progress</h2><p class="my-6">Previously, the progress indicator was available as a separate plugin (<code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">@inertiajs/progress</code>). It is now installed and enabled by default.</p><p class="my-6">If you haven't yet, remove the old progress library.</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 function">npm</span> remove @inertiajs/progress</code></pre></div><p class="my-6">Next, remove the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">InertiaProgress</code> import and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">InertiaProgress.init()</code> call, as they are no longer required.</p><pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> import { InertiaProgress } from '@inertiajs/progress' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> InertiaProgress.init()</span></span></code></pre><p class="my-6">Finally, if you have defined any progress customizations, you can move them to the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">progress</code> property of the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">createInertiaApp()</code> helper.</p><pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token function">createInertiaApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">progress</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#29d'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre><p class="my-6">If you're using a custom progress indicator, you can disable the default progress indicator by setting the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">progress</code> property to <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">false</code>.</p><pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token function">createInertiaApp</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">progress</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre><h2 id="setup-arguments" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Setup arguments</h2><p class="my-6">We've removed the previously deprecated lowercase <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">app</code> argument from the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">setup()</code> method in <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">createInertiaApp()</code>. Use <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">App</code> instead.</p><pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> createInertiaApp({ </span><span class="token prefix unchanged"> </span><span class="token line"> // ... </span></span><span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> setup({ app, props }) { </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> setup({ App, props }) { </span></span><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> // ... </span><span class="token prefix unchanged"> </span><span class="token line"> }, </span><span class="token prefix unchanged"> </span><span class="token line"> })</span></span></code></pre><h2 id="simplified-use-page" class="mt-16 mb-4 text-2xl font-bold leading-tight text-gray-700">Simplified usePage</h2><p class="my-6">In the Vue 3 adapter, we simplified the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">usePage()</code> hook to no longer require adding <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">.value</code> after the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">component</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">props</code>, <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">url</code> and <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">version</code> properties.</p><p class="my-6">If you're using the <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">usePage()</code> hook, remove all instances of <code class="whitespace-nowrap rounded p-1 font-mono text-sm bg-gray-200">.value</code>.</p><pre><code style="height:auto" class="my-8 p-6 leading-normal rounded block overflow-auto bg-[#202e59] text-[.85rem] text-white"><span class="token unchanged"><span class="token prefix unchanged"> </span><span class="token line"> import { computed } from 'vue' </span></span> <span class="token deleted-sign deleted"><span class="token prefix deleted">-</span><span class="token line"> const appName = computed(() => usePage().props.value.appName) </span></span><span class="token inserted-sign inserted"><span class="token prefix inserted">+</span><span class="token line"> const appName = computed(() => usePage().props.appName)</span></span></code></pre></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="#whats-new" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">What's new</a></li><li class="mt-4"><a href="#new-dependencies" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">New dependencies</a></li><li class="mt-4"><a href="#renamed-imports" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Renamed imports</a></li><li class="mt-4"><a href="#progress" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Progress indicator</a></li><li class="mt-4"><a href="#setup-arguments" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Setup arguments</a></li><li class="mt-4"><a href="#simplified-use-page" class="font-medium text-gray-700 hover:text-blue-700 hover:underline">Simplified usePage</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>