Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Browse all series

Let's Build an Offline-First Vue App

Depending on your application, you might find yourself in a position to offer your users the ability to use your program even if they have spotty or missing internet connectivity. By thinking about your app in terms of being offline-first, you can increase the overall response time of your application while providing a safety net for users to fall back on that allows them to continue working even in the absense of an internet connection. All of this is made possible with modern browsers, specialized files called Service Workers, and of course, Vue.js.

Progress

Series Info

Episodes
10
Run Time
1h 52m
Difficulty
Advanced
Last Updated
Feb 2, 2022
Version
Latest
Play Series

Series Episodes

  1. Episodes (10)

    1. An Offline First App?

      In this series, I'll be showing you how to build an application from the ground up that's centered around being offline-first. We'll see how the end product looks and functions, and get started creating a new Vue app using the CLI tool.

    2. The Editor Frontend

      The first thing we need for a notes app is a place to write out some notes! In order to do that, we'll have to install and configure a WYSIWYG editor. There's a lot of options to choose from, but the one I've found that works seamlessly with Vue projects is tiptap.

    3. Introducing IndexedDB

      All modern web browsers come with a fantastic local storage API called IndexedDB. It has practically unlimited storage and is great for holding large amounts of data for websites, especially because it works offline. Let's see what it takes to add one to our Vue application.

    4. Saving and Displaying Notes

      Alright so now that we have an IndexedDB database set up in our application, it's time that we put it to use. After a user types up a note, I want to save that raw HTML as a new row in the notes table (or Object Store) that we created. Also, the sidebar is looking a little bare, so let's fill it up with the notes in our database whenever the app loads up.

    5. Let's Talk PWA

      Progressive Web App technology helps power the backbone of offline-first features. Using a specialized script called a service worker, we're able to cache resources, pre-cache offline pages, and allow our app to be installable to a home screen or desktop. All of this is easily added in with a single line in the terminal.

    6. Running Database Updates

      Before we start diving into more offline-first features, let's finish up the main functionality of our app. We need to give our users the ability to update notes in the database, improve the UI to create a new note, and display a whole list of notes and their content from the database.

    7. Caching Assets

      Now that we've added a service worker and some PWA functionality, we can expand on it a bit. First, we need to make sure to bust any cached content that might have been updated from the server. Then, let's take care of those favicons that aren't showing up in the cache and so aren't displaying when we're offline.

    8. Oops, I'm Offline

      Just because our application is offline-first and able to run without internet access, doesn't mean there wouldn't be parts in it that need to connect to an external server. The best example for this is syncing some kind of changes or user data with an API, especially when a user regains connectivity.

    9. Time to Refactor

      Right now our application is a single monolith contained in one Vue component. While it's functional, it doesn't really look great and could get even worse if we try to expand on it in the future. Let's take some time to properly refactor this, by splitting our main codebase into child components and introducing a central store for the application state.

    10. Wrapping Up and Next Steps

      We're finished! Over the last nine episodes, you've learned how to create a fully-fledged offline-first Vue app from scratch. So, where do we go from here? There's a few different paths you can take to expand on this application and provide more features and functionality to your users.

Continue Learning

Blaze Deep-Dive thumbnail

Blaze Deep-Dive

With Caleb Porzio

Blade components are slow. Really slow. At scale, they quietly become the biggest bottleneck in your Laravel application. We discovered this while trying to make Flux as fast as possible, and the result is Blaze: a package that fundamentally rethinks how Blade components are compiled and rendered. With multiple levels of optimization, Blaze can shave hundreds of milliseconds off a page load, making Blade rendering up to 25x faster in some cases.In this series, we'll install it, benchmark it, build a toy version from scratch so you truly understand how it works, and then master every directive and edge case so you can squeeze maximum performance out of your own apps.

  • 20 Episodes
Customizing Filament For User-Facing Apps thumbnail

Customizing Filament For User-Facing Apps

With Shruti Balasa

In this series, we'll build a real, user-facing app called Booknest using Laravel and Filament. We'll begin with a fresh install and begin pushing Filament beyond the usual "internal admin only" setup that you typically see. It's capable of so much more.

  • 14 Episodes
Filament 5 in Depth thumbnail

Filament 5 in Depth

With Kevin McKee

Filament's powers have increased exponentially. Now at version 5, it's more powerful and capable than ever. In this series, we'll build a practical Roadmap app from scratch, using Filament for the admin panel and Livewire for the public-facing side.Along the way, we'll cover panel configuration, enum-driven UI, strict authorization with policies, and newer form inputs like ToggleButtons, Sliders, and the TipTap-powered RichEditor. By the end, you'll have a full-featured app and a solid handle on everything new in Filament.

  • 16 Episodes
Build Native Apps With PHP thumbnail

Build Native Apps With PHP

With Simon Hamp

Welcome to my CreatorSeries! I’m Simon, and in this series we’re going to learn about NativePHP and use it to build true native applications for desktop and mobile. We're not talking about web apps accessed through the browser. Your users will be able to install directly on their devices. This is a big leap forward for the PHP ecosystem, and while it’s a real paradigm shift from the way we normally build with PHP and Laravel, we’ve worked hard to keep it familiar and approachable. So grab a warm drink, get comfortable, and let's start building!

  • 17 Episodes
Everything New in Livewire 4 thumbnail

Everything New in Livewire 4

With Caleb Porzio

Livewire 4 is a major release, and it's packed with features you're going to love. View-based components keep your PHP and Blade together in one file. Islands let you create isolated, independently-updating regions without the overhead of nested components. New directives like wire:sort tackle big things with minimal code. And a powerful JavaScript interceptor system gives you fine-grained control over every request.Whether you're upgrading an existing app or starting fresh, this series will walk you through everything new, from the fundamentals to the advanced stuff. Let's dig in.

  • 25 Episodes