Working with APIs in Vue.js

Working with APIs is the ninth chapter of the free Vue.js tutorial. It connects a Vue app to a server, logs users in and shows live data.

What each lesson covers:

  • HTTP Requests: HTTP, REST and JSON, fetch() for every method, res.ok and status codes, loading, empty and error states, AbortController, Axios instances and interceptors, a CRUD screen, service modules and .env URLs.
  • Authentication and Real-Time Data: Token login, where to store tokens, the Authorization header, a Pinia auth store with a route guard, refresh and retry on 401, logout, polling, Server-Sent Events and WebSockets with reconnect and cleanup.

Every box runs real Vue 3 in your browser. Pick TypeScript or JavaScript in the top bar, and every box switches. Each lesson ends with exercises that check what your app does, not how your code is written.

Lessons in this section

  1. HTTP Requests

    HTTP, REST and JSON in plain words, fetch() for GET, POST, PUT, PATCH and DELETE with headers, bodies and query strings, response.ok and status codes, loading, success, empty and error states, refetching, stale responses and AbortController, Axios instances, interceptors and cancellation, a full CRUD screen, API service modules and env-based URLs.

    • Send GET, POST, PUT, PATCH and DELETE requests with fetch()
    • Check response.ok and show loading, empty and error states
    • Cancel stale requests with AbortController
    • Use Axios instances and interceptors, and organise calls in a service module
  2. Authentication and Real-Time Data

    Logging in with a token, where to keep tokens safely, sending the Authorization header, an auth store with Pinia, protecting routes, refreshing an expired token and retrying, logging out, and live data with polling, Server-Sent Events and WebSockets, with reconnect and cleanup.

    • Log in, store a token safely and send it with every request
    • Refresh an expired token and retry the request once
    • Protect pages with an auth store and a router guard
    • Show live data with polling, Server-Sent Events or a WebSocket, and clean up