Snippets

Build a Snackbar with Vue

Playing
Build a Snackbar with Vue
18 mins3 years ago

A Snackbar is a small notification bar that pops up when a user performs an action. In this snippet, we’ll build a simple Snackbar in Vue for when you don’t want to pull in a package to handle it for you.

Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.

Suggested courses

Vue.js
Vuex

Build an Appointment Booking System With Inertia

Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course. Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments. For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots). To finish up, we’ll create an entire booking flow with Inertia (using Vue), including a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment. Phew. We’ve got a lot to learn — let’s build a booking system with Inertia!

39 episodes
5 hrs 0 mins
Vue.js
Vuex

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

44 episodes
4 hrs 59 mins
Vue.js
Vuex

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.

9 episodes
57 mins