Vue.js vs Next.js: How Two Frameworks Handle Modal Routing Differently

When you click a link and a dialog pops up instead of a full page reload, that's modal routing at work. On June 30, 2026, this pattern is more common than ever in modern web apps, but Vue.js and Next.js take fundamentally different approaches — and understanding those differences can save you hours of confusion.

The key insight: Vue.js puts routing logic in your code, while Next.js bakes it into your file structure. Both work, but they require a completely different mental model.

What Is Modal Routing?

Traditional navigation replaces your entire page. You click a photo link, the page refreshes, and you see the photo in a full view. Modal routing is sneakier: the URL changes to reflect that you clicked something, but the page stays mostly the same — a modal (a popup dialog) appears on top, showing the photo. When you close the modal or hit the back button, the URL rewinds and the modal vanishes.

This feels smoother to users because the page doesn't flash or reload. But it's trickier to build because your routing system needs to know: "Is this route supposed to show a modal, or a full page?"

The Vue.js Approach: Code-Driven Logic

In Vue.js, you control this entirely in your router configuration. Here's the mental model:

1. Set up your router — Define your routes and their components in code.
2. Add child routes — Create nested routes that represent modals.
3. Check the state — Your component decides whether to show a modal or a full page based on how the user arrived.

For example, if you're building a photo gallery:

import { createRouter, createWebHistory } from 'vue-router'
import GalleryView from './views/GalleryView.vue'

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: GalleryView,
      children: [
        {
          path: 'photo/:id',
          component: PhotoModal
        }
      ]
    }
  ]
})

Your GalleryView component checks if there's a child route active. If yes, it renders both the gallery and the modal. If the user visits /photo/123 directly, your component displays the full photo page instead.

This approach is flexible: you have full control in your component code. But it requires discipline — you need to remember to handle both cases (modal vs. full page) every time.

The Next.js Approach: File-System Routing and Intercepted Routes

Next.js 13+ introduced a different idea called intercepted routes. Instead of writing routing logic in code, you use your file structure to declare which routes should be modals.

The file system becomes your routing table:

app/
  photo/
    [id]/
      page.js         (full page view)
  (.)photo/
    [id]/
      page.js         (modal view)

The (.) syntax means "intercept routes that match the next segment." So when a user clicks a link to /photo/123 from within the gallery, Next.js serves the (.)photo version (the modal). But if they visit /photo/123 directly in the browser, they get the full photo/[id] page.

Next.js handles the complexity for you. You don't need to write conditionals in your component. The framework knows which file to render based on the routing context.

The Mental-Model Shift

Here's where things diverge in your head:

Vue.js says: "Write the logic. You decide what to render."

Next.js says: "Structure your files. I'll decide what to render."

Vue.js is more explicit but requires more code. Next.js is more implicit but depends on naming conventions and file structure — and if you misunderstand the convention, things break silently.

When to Choose Vue.js

Pick Vue.js if:

• You want full control over your routing logic.
• Your modals have complex conditional behavior that doesn't fit a file-system pattern.
• You're already building with Vue and want to add modal routing incrementally.
• Your team prefers explicit code over magical conventions.

When to Choose Next.js

Pick Next.js if:

• You like letting the framework handle routing magic.
• Your modal patterns are straightforward ("this route shows a modal, that one doesn't").
• You value less boilerplate and fewer decisions.
• You're starting fresh and can structure files from the ground up.

The Trade-Off in Action

Let's say you want a photo to open as a modal when clicked from the gallery, but as a full page when visited from a search result or bookmark.

In Vue.js: You manually check the referrer or store state in your component, then decide what to render. It's more work, but you see exactly what's happening.

In Next.js: You define separate file paths for each scenario and let the framework route automatically. Less code, but you have to trust that your file structure is correct.

A Concrete Example: Photo Gallery

Imagine you're building an app.example.com photo gallery. When you click a photo thumbnail, a modal should appear. When you navigate back, the modal closes.

Vue.js approach:

Your router has a parent route (the gallery) and a child route (the photo). Your gallery component checks if route.name === 'photo' — if yes, render the gallery and the modal. If no, just render the gallery.

Next.js approach:

Your files live in app/gallery/page.js and app/(.)gallery/[id]/page.js. When you click a thumbnail on the gallery page, Next.js intercepts the navigation and renders the modal. You don't need conditional logic; the file structure handles it.

Debugging and Maintenance

Vue.js modals are easier to debug because the logic is visible in your code. If a modal doesn't show, check your conditional.

Next.js modals can be trickier to debug if you forget how intercepted routes work. A misnamed folder or misplaced file can silently break things without an obvious error message.

Conclusion

Modal routing is a powerful pattern for smooth, fast-feeling web apps. Vue.js and Next.js both support it, but with opposite philosophies: Vue puts control in your hands, while Next.js hides it in convention. Neither is wrong — they're just different bets about whether developers prefer explicit code or implicit magic. Choose based on your team's style and how complex your routing needs to be.

Merits

• Vue.js: Full control, explicit code, works incrementally in existing projects, easy to debug.
• Next.js: Less boilerplate, framework-managed routing, cleaner components, great if your patterns are standard.

Demerits

• Vue.js: More code to write, requires discipline to handle both modal and full-page cases, harder for beginners to grok.
• Next.js: File-structure magic can confuse new developers, harder to debug when conventions aren't followed, less flexible for unusual patterns.

Caution

The names, paths, and syntax shown here are placeholders. Test your modal routing thoroughly before going to production — modal state and browser history can be finicky, and a mistake might break the back button or cause modals to appear unexpectedly. These examples are simplified; real projects often need extra handling for scroll position, body overflow, and accessibility. Always verify the current version of Vue Router and Next.js documentation for your specific version, as syntax may have changed since this article was written.

Frequently asked questions

• What is intercepted routing in Next.js?
• How do I prevent a modal from showing on direct page visits?
• Can I use modal routing with Next.js Pages Router or only App Router?
• How do I handle the browser back button with modal routing?
• Is modal routing better for SEO or regular page navigation?
• What happens if a user has modals disabled in their browser?
• How do I test modal routing with Vue Router?
• Can I use modals for every route or are there performance limits?

Tags

#vuejs #nextjs #routing #modals #webdevelopment #javascript #frontend #componentarchitecture