2019-06-21
2160
#vue
Dotun Jolaoso
3291
Jun 21, 2019 ⋅ 7 min read

Understanding Vue middleware pipelines

Dotun Jolaoso Software developer.

Recent posts:

Improving Frontend Workflows With In-Browser Database Tools

​​Improving frontend workflows with in-browser database tools

In-browser database tools like RxDB and Neo4j Sandbox help frontend devs manage data, work offline, and streamline tasks with AI support.

Muhammed Ali
Jun 3, 2025 ⋅ 7 min read
How To Iterate Over Enums In TypeScript

How to iterate over enums in TypeScript (with code examples)

Learn exactly how to iterate over numeric and string enums in TypeScript, with practical code snippets and type-safe patterns.

Matteo Di Pirro
Jun 2, 2025 ⋅ 9 min read
How To Import SVGs Into Your Next.js Apps

How to import SVGs into your Next.js apps: A 2025 guide

Learn the best 2025 methods to import SVGs in Next.js 14+, with tips on performance, styling, and App Router integration.

Joseph Mawa
Jun 2, 2025 ⋅ 9 min read
designing llm first products

Designing LLM-first products, not just features

Everyone’s building chat-first AI products. And most of them suck. Here’s how to break the mold and ship LLM-native software that actually solves problems.

Rosario De Chiara
May 30, 2025 ⋅ 4 min read
View all posts

11 Replies to "Understanding Vue middleware pipelines"

  1. Interesting pattern as a first check, but since you’ll be making authenticated API requests to the backend to fetch data for these protected routes, which could fail if they’re not logged in or don’t have appropriate permissions, it seems redundant to also have a front-end middleware checking against the local VueX store. The redirects or error message display could be wrapped into an ApiClient class instead when the front-end gets an unauthorized error?

  2. Hello Dotun,
    Thanks for the a the blog, it was very insightful. Is there any way to apply middleware to all children routes instead of defining middleware to each route??

  3. Hello,

    Unfortunately, next code is not working:

    return middleware[0]({
    …context,
    next: middlewarePipeline(context, middleware, 1)
    })

    middleware[0] is not a function.

  4. How to pass more variable to middleware. Something like this

    meta: {
    middleware: [
    role(‘admin’)
    ]
    }

    And then I can check the user can enter or not a page via role

Leave a Reply