In this episode, we start fresh with a brand new Laravel project and go through all the steps to get Inertia.js up and running from scratch. We begin by setting up the backend: installing the Inertia Laravel dependency, creating our root Blade template, and setting up the essential middleware. Next, we wire up a basic controller and Inertia response so we can render our first Inertia-powered page.
After the backend is set up, we dive into the frontend, installing Inertia's NPM packages along with Vue 3, and getting the Vite configuration done to work with Vue. We then build out the app.js
file to bootstrap our Inertia app, carefully walking through what each part of the configuration does.
Once everything is running, we set up basic page titles (including a dynamic brand name from the environment/config), and demonstrate how to inject the title into the HTML using Inertia's Head component. Throughout the video, you'll see how to make the backend data available client side in a safe way and how to connect all the dots so you can see your pages rendered in the browser.
By the end, we have a solid, working Inertia setup in Laravel, rendering a homepage component from Vue with everything you need to start building out the rest of your app!