How to Build Modern Laravel Apps With Inertia - Full 3 Hour Laracasts Course, with Jeffrey Way
ฝัง
- เผยแพร่เมื่อ 8 ก.ค. 2024
- Inertia.js, created by Jonathan Reinink, is an incredible tool that glues a server-side framework, like Laravel, to a client-side framework, like Vue. Watch this full series in episodic form on Laracasts: laracasts.com/series/build-mo...
Think of it as a new, modern way to build traditional server-driven applications. With Inertia, you can continue using server-side routing, and controllers, and authentication, and validation. With Inertia, you don't need to learn how to build an API, and you definitely don't need to use OAuth. Instead, relax and continue creating apps the way you traditionally would. .
I really think you're going to enjoy Inertia as much as I do. In fact, Laracasts itself uses Inertia under the hood; I wouldn't have it any other way. So let me show you everything I know about building modern apps with Laravel, Vue, and Inertia.js in this series.
Watch thousands of videos, track your progress, and participate in a massive Laravel community at Laracasts.com.
Laracasts: laracasts.com
Laracasts Twitter: / laracasts
Jeffrey Way Twitter: / jeffrey_way
00:00 - What is Inertia.js
05:37 - Install and Configure Inertia
12:00 - Pages
17:47 - Inertia Links
25:00 - Progress Indicators
26:57 - Perform Non-GET Requests
33:40 - Preserve the Scroll Position
37:43 - Active Links
44:27 - Layout Files
51:48 - Shared Data
58:36 - Global Component Registration
01:03:03 - Persistent Layouts
01:06:58 - Default Layouts
01:09:32 - Code Splitting and Dynamic Imports
01:14:47 - Dynamic Head and Meta Tags
01:24:03 - The Most Important SPA Security Concern
01:30:55 - Pagination
01:44:05 - Filtering
01:57:41 - Inertia Forms 101
02:08:27 - Render Failed Validation Messages
02:13:58 - Inertia Form Helpers
02:21:21 - Better Performance With Debounce and Throttle
02:25:57 - Authentication With Inertia
02:42:56 - Authorization Tips
Hey, folks. Sorry, but we had to reupload this. There was an audio glitch for one of the chapters, and TH-cam doesn't allow you to update an existing video.
I WISH I COULD LIKE IT 10 TIMES OVER AND OVER, sincerely thank you.
I have paid for laracasts since I think 2014 or so, even through periods of unemployment because Jeffrey Way gave me a career.
Thanks Jeffrey for this amazing intensive series of inertia
Really incredible ! I can watch your videos for hours even if it's about something I don't use.
Thanks for this amazing series.
Absolutely brilliant video!
Beautifully explained ❤
Every second of this video is just knowledge. I wonder why such a low view count and almost no like. Huge fan of the Jeffrey....
Thank you, this is a great tutorial, I liked more because of the use of script setup
Awesome Thank you for this wonderful tutorial
This is awesome
Thank you very much. Very helpful!
Amazing... Thank you
I haven't watched this video for 3 minutes but I am leaving a comment because I know it will be great!
Goat tutorial guy
Amazing your tutorial video for me and motivate to buy Laracasts Package!
thank you
thank you sir
thank you so much you are the best
Great video, I hope you make an updated one. Regards
All I can say is wow! The way you deliver so much knowledge in a logical progression is a skill!
Yeah,... I agree with you...
That was exactly the word that came out of my mouth after I finished the video ... 🤯🤯
Amazing tutorial, please update the PHPSTorm tips and tutorials!
thanks you
What a fantastic tutorial! I will definitely continue my journey on Laracasts
thanks
Grazie.
Thank you!!
Nice Tutorial Jeffery on Inertia, keep up the good work! What do you think is the best use case of using Inertia in our project?
Good job Jeffrey, could you share your color scheme and font with us ? Really nice contrast.
can you do a video on unit testing (at least configurations) with the inertia, as I don't use the vue/cli = i find it very hard to configure things out.
I love how you tutor, Jeffrey. You're the best!
I loved this tutorial but I use React instead of Vue, and there's not much community support for React with Laravel. Could you create something similar that explains the Inertia.js documentation for React developers? It would be incredibly helpful not just for me, but also for other developers using React with Laravel.
How to deal with layouts and composition API in vue3? Is there any chance to use persistent layouts?
How should be in a case when I need request data to populate my vue component (some dropdown for example)?
what the difference if we using lrv 9 ? because we not use export default again. thank you😢
can i ask for your vscode theme, font, padding and etc?.. looks clean
Is there an updated version of this course? I was trying to follow until you edited the webpack.mix.js file. I'm on laravel 10 and I have vite instead of webpack.
This is awesome. But how to you override global layout
Can you show how to do the code splitting and dynamic imports if using vite instead of mix?
vite does it by default you don't need to do any thing
Can you make a video introducing i18n to Laravel + Inertia.
That is the ONE thing that I am struggling with.
How about to hosting this project, is it the hosting normal laravel, right sir? thanks 🙏
what is the relationship bewteen splade and inertia?
Default layouts chapter: This doesnt work if we use Laravel 9 with pre-installed Inertia Vue3, it uses resolvePageComponent from 'laravel-vite-plugin/inertia-helpers', any solution?
i search and do this in my project it is work with me
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [
vue(),
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
});
// app.js
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
createInertiaApp({
resolve: name => import(`./Pages/${name}.vue`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
})
// app.blade.php
Vue 3 in Laravel 9 with inertiajs
@vite('resources/css/app.css')
@inertiaHead
@inertia
@vite('resources/js/app.js')
I hope this work with you bro
how does multilanguage translation work?
At 1:07:43 in the Default Layouts chapter, you tell us to swap the import to a require, but this doesn't seem to be supported by Laravel anymore because of Vite. What do we do instead in that situation?
Ok, now I just feel dumb.. You told us this just a few minutes later in the video :3 You should have led with that lol
Turns out a bit more work was needed for us Vite users.
resolve: name => {
const page = resolvePageComponent(
`./Pages/${name}.vue`,
import.meta.glob('./Pages/**/*.vue')
);
page.then((module) => {
if (module.default.layout === undefined) {
module.default.layout = Layout;
}
});
return page;
},
@@pl3x-net It was very helpfull! thanx!
Valeu!
Thank you!!
Inertia docs says Inertia isn't a FRAMEWORK, Sir Jeff Passed it as a one of the used technology frameworks at this series !! ?? Anyway I'm a big fan of you. You're doing a great job. Thank you so much
What is that app for sqlite db viewer?
why do you use composition API i am little comfortable in options api
When installing Laravel 9, it does not show webpack.js in the root directory to add vue...
Because laravel use Vite instead of webpack now
hi! Is the same course that you published a few days ago?
Yes. Same course, just with fixed audio.
@@Laracastsofficial nice!
Make a new one with react and inertia 1
why nobody asks about this font.. editor font please?
It's Fira Code or Fira Mono If I'm not mistaken.
I was so excited about this tutorial. But Laravel moved to Vite and now, after trying so many things (trying vite, then trying migrating to mix) and wasting so many hours, I give up. I just can't get arround to even starting with Inertia... What a bummer...
What's the roadblock? You can use Inertia with Vite or Mix.
@@Laracastsofficial When I make a new inertia vue project I get a blank screen
@@Laracastsofficial Thank you for responding... I found another tutorial on youtube for Installing inertia on Vite Laravel , and now I'm proceeding with this tutorial
@@Mark1_ Problem is probably that you don't run npm run dev ;)
@@justianspijkerbosch7584 I figured it out, the inertia docs are made with Mix (and Laravel uses Vite by default now) in mind and I copied and pasted blindly kekw
why webpack.mix.js dont appear to me :(
me too
They updated the structure, and changed it into vite.
Webpack is outdated, Vite is the new bundler, faster and easier to use
Why do i pay for laracasts when they are all free on youtube...
They aren't "all" free on yt
For me The Filtering section didn't work as described with vue3 / vite. The key was to use the router function:
import Pagination from "../Shared/Pagination.vue";
import { ref, watch } from "vue";
import { router } from "@inertiajs/vue3"; // use router
defineProps({ users: Object });
let search = ref("");
watch(search, (value) => {
router.get("/users", { search: value }, { preserveState: true, preserveScroll: true, replace: true });
});
Thank you very much!