Inertia.js version 2.0 was announced at Laracon US 2024 with new features including async requests, polling, deferred props, prefetching, load when visible and merging props (infinite scroll). Let's look at the recently released beta version and some examples showing how the new features work. GitHub Repo: https://github.com/drehimself/inertia-v2-features 00:00 Intro 1:07 Polling 5:40 Deferred Props 13:02 Prefetching 17:09 Load When Visible 21:52 Merging Props (Infinite Scroll) # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Laravel Pulse is a first-party package that gives you at-a-glance insights into your application’s performance and usage. Let's take a look at how to use it and some of the default cards it provides to help monitor your application in production. Jess Archer's talk: https://www.youtube.com/watch?v=-9jV5ra5KB4 Aaron Francis Blog Post on Creating a custom Pulse card: https://aaronfrancis.com/2023/composer-outdated-laravel-pulse Aaron has a video now too: https://www.youtube.com/watch?v=oFxcWcP6bVE # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Tiptap is a modern, headless WYSIWYG editor that can be easily integrated into your web applications. It has support for modern JavaScript frameworks like React, Vue, and Svelte and offers a ton of functionality via its plugin/extension system. In this video, we’ll look at using Tiptap with an Inertia app using Vue 3, Tailwind, and Laravel. We’ll cover installation, styling with Tailwind CSS and the typography plugin, using v-model, persisting content to the backend, and protecting from cross-site scripting attacks using the Laravel Purify package. GitHub Example Repo: https://github.com/drehimself/tiptap-inertia-vue-example 00:00 Introduction 01:26 Installation 05:46 Customize Editor with Tailwind classes 08:26 Add buttons 16:21 Style tags with Tailwind typography plugin 22:14 Add icons for buttons 25:40 Using v-model and extracting to component 40:18 Persisting to the backend 51:13 Protecting against cross-site scripting attacks # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

shadcn/ui is a popular component library in the React ecosystem that has now been ported over to Vue.js. It's built on top of Tailwind CSS and Radix and allows for easy control and customization of components. Let's take a look at some of the features available and how you would use it in a Vue.js project. shadcn-vue: https://www.shadcn-vue.com/ radix-vue: https://www.radix-vue.com/ GitHub Repo Example: https://github.com/drehimself/shadcn-vue-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

HTMX is a simple way to perform AJAX calls and update DOM elements using HTML attributes and no JavaScript. In this video, we'll take a look at a few practical examples of using HTMX within a Laravel app. GitHub Repo: https://github.com/drehimself/htmx-laravel-example 0:00 - Intro and Basics 5:25 - Contact Form Example 15:27 - Users List and Form Example 22:46 - Users Search and Filter Example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Laravel Prompts brings interactive forms on the web into our command-line applications with features like placeholder text, real-time validation, and autocomplete. Even if you don't create custom CLI applications or artisan commands, prompts is built right into the Laravel installer and the default artisan commands making for a wonderful command-line experience. Jess Archer's Larcon talk: https://www.youtube.com/watch?v=PW-2_-KxF-8 GitHub Repo: https://github.com/drehimself/laravel-prompts-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Laravel Folio allows you to automatically generate routes based on files you create in a specific location. It's similar to the Next.js or Nuxt application routing but for your blade files. In this video, we look at an example of the basics, then refactor an existing blog application to use Folio routes. Taylor's talk at Laracon: https://www.youtube.com/watch?v=1P3wLy49t2c GitHub Repo: https://github.com/drehimself/laravel-folio-example # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

NativePHP is a framework for building native desktop applications using Laravel and the tools you're already familiar with. It has support for bundling your application with Electron with support for Tauri coming soon. In this video, we'll take a look at some of the basics of NativePHP and build an example desktop application that pulls data from the Reddit API. NativePHP: https://nativephp.com/ Marcel's talk at Laracon: https://www.youtube.com/watch?v=iG7VscBFnqo GitHub Repo: https://github.com/drehimself/nativephp-example 0:00 - Intro and Show Demo App 1:16 - Installation and setup with Vite 7:05 - Opening New Window 11:37 - Native Notifications 13:57 - Application Menu 21:39 - Menu Bar 23:31 - Database was SQLite 27:39 - Settings - Light and Dark Theme 35:54 - Demo App Reddit API # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Laravel Herd is the easiest way to get started with a PHP and Laravel Development environment. It's like Laravel Valet, but lives in your menu bar and does not require Homebrew to manage dependencies. It's perfect for anyone who is just starting out with PHP or Laravel development. We also take a look at pairing Herd with DBngin, so we have quick access to create and manage databases from our menu bar as well. Check out this blog post by Marcel Pociot for more info and insight from the creator: https://beyondco.de/blog/announcing-laravel-herd Laravel Herd: https://herd.laravel.com/ # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Tanstack Table is Headless UI that makes it easy to create powerful datatables or datagrids with complete control over your markup and styles. We'll be looking at how to use Tanstack Table with Vue.js including pagination, sorting, filtering, and how to make your table components re-usable. Tanstack Table: https://tanstack.com/table/v8 GitHub: https://github.com/drehimself/tanstack-table-vue-example If you want to learn it in React, check out this video by Mafia Codes: https://www.youtube.com/watch?v=AuLg79Th3xE 0:00 - Introduction 2:30 - Installation and Rendering thead and body 12:30 - Customizing Cells 20:17 - Pagination 29:06 - Sorting 36:31 - Filtering 39:09 - Reusing components # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Phone Number formatting and validation often get overlooked when working with forms. In this video, we take a look at two packages that make this process easier. Laravel Phone takes care of server-side validation and MazPhoneNumberInput is a Vue component that formats a phone number as you type and also has a country code dropdown. GitHub Repo: https://github.com/drehimself/laravel-vue-phone-example Laravel Phone: https://github.com/Propaganistas/Laravel-Phone MazPhoneNumberInput from Maz-UI: https://louismazel.github.io/maz-ui-3/components/maz-phone-number-input # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

We look at a few ways to use Vue's v-model in your child components. This includes a manual implementation, using writable computed, using a composable in the VueUse library, and using defineModel which is currently experimental in Vue 3.3. GitHub Repo: https://github.com/drehimself/vue-vmodel-child-example RFC link: https://github.com/vuejs/rfcs/discussions/503 # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

The Laravel Frontend site has a really cool 3D perspective grid of icons that caught my eye when I saw it. I thought it would be a fun project to try and re-create it using Tailwind CSS and Vue. GitHub Repo: https://github.com/drehimself/frontend-website-rebuilds Demo App Site: https://frontend-website-rebuilds.netlify.app/laravel-frontend # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

A quick overview of using CSS Container Queries within Tailwind CSS. GitHub Repo: https://github.com/drehimself/yt-container-queries-tailwind # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself

Container queries allow you to style your components and layouts based on the size of the container instead of the size of the viewport. This allows us to reuse components across different containers, regardless of size. Let's take a look at two practical examples of how container queries are a better solution than traditional media queries. GitHub Repo: https://github.com/drehimself/yt-container-queries Example Components using Container Queries: https://lab.ishadeed.com/container-queries/ # LINKS My courses: https://codewithdre.com Sign up for my newsletter: http://andremadarang.com/newsletter My website: http://andremadarang.com Twitter: http://twitter.com/drehimself GitHub: http://github.com/drehimself CodePen: http://codepen.io/drehimself