Local-First Web Development and How Can We Build It With Vue

on YouTube ↗25m

" summary

Argues that making apps local-first yields instant local operations, offline resilience and user-controlled data by storing to IndexedDB and syncing later; demonstrates a Vue.js PWA converted to use Dexie.js + Dexie Cloud with an auth flow, liveQuery/useObservable reactivity and UUID-style IDs so local edits sync and appear on other devices immediately. Builds a working to‑do POC (add/toggle/delete, login, cloud sync) that succeeds in demo, notes Safari storage expiry and partial-sync limits for large datasets.

AI-written summary · about

" chapters (17)

1. 0:00Local-first intro
2. 1:06Traditional web problems
3. 3:14Seven principles
4. 5:44Local-first explained
5. 6:50Vue ingredients
6. 8:35Storage limits & conflicts
7. 10:20Choosing tools for local-first development
8. 11:43To-do app with Dexie
9. 13:13Dexie Cloud setup
10. 15:47Reactive to-do logic
11. 17:58Auth guard component
12. 19:24Dexie + Vue integration
13. 20:29When to use local-first
14. 22:16Advantages of local-first performance
15. 22:38Community & future
16. 22:59Q&A: Offline
17. 23:41Q&A: Storage limits

" related talks

• 30mOffline First: Making Your App Awesome When the Network Isn'tTeri Chadbourne · Node+JS Interactive 2018
• 45mOffline First (Web) AppsAlex Feyerke · ColdFront Conference 2015
• 38mHow we developed an Offline‑First app using Persistent StorageTimofey Lavrenyuk · JavaScript fwdays'19
• 45mVue.js, PWA and the subway dilemmaIgnacio Anaya · Frontend United 2019
• 41mIntroduction to Offline First Web ApplicationsMax Gfeller · Build Stuff 2022
• 59mProgressive React AppsSebastian Springer · iJS 2018 Spring
• 14mOffline first applications, syncing with PouchDB & CouchDBFrançois Gengler · Devoxx Belgium 2017
• 21mOffline first in AngularMarta Wiśniewska · AngularConnect 2019