SVGs with Vite and Vue
Adding SVGs to your Vue project doesn't need to be complicated. In this snippet, we'll take a look at using the vite-svg-loader package to make this a breeze, then clean things up by building our own component to handle loading SVGs effortlessly.
Comments
Suggested courses
Build An Uptime Monitor with Inertia
Ready to dive into Inertia? Let's build a real-world app with Laravel, Inertia and Vue! If you're already working with Inertia, you'll pick up some tips and techniques for future projects. This uptime monitor allows you to create and switch between sites, then add endpoints to monitor with frequency intervals. Using the power of scheduling and queues, it'll automatically alert the email addresses you've added via the UI when an endpoint goes down. In this course, you'll learn to: * Build a real app from scratch with Inertia * Work with Laravel queues * Perform actions on models at user-defined intervals * Work with sub-minute schedules in Laravel * Send out channel notifications with Laravel * Use API resources to simplify Inertia data * Organise apps with events and observers * Create modals in Vue * Perform inline editing with Inertia forms
Learn Inertia
Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API. Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API. To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.
Translations with Laravel and Inertia
Localisation is a breeze in Laravel applications, but what happens when you need to bring this to the client-side? Turns out in Inertia, it's pretty simple. In this course, we'll build a language switcher, share translations with the client, and build a simple translation helper for Vue to use directly in templates. We'll also cover caching translations to keep things running smoothly. The best part? With the magic of reactivity, we'll be able to switch languages without any page refresh, and see everything instantly translated.