Vue.js vs Next.js: Code-Driven vs Folder-Driven Modal Routing Compared

Vue.js vs Next.js: Modal Routing — A Side-by-Side Breakdown

Heba Allah Hashim provides a side-by-side comparison of Vue.js and Next.js modal routing techniques. The Vue approach uses watchers and explicit state management, while Next.js relies on folder-based parallel and intercepted routes.

Why This Matters

Modern web applications increasingly demand seamless UX patterns like modals that preserve browser history and deep-linkability. While both Vue.js and Next.js implement modal routing, they differ fundamentally: Vue.js uses imperative code with watchers and nested routes that can fail on hard refresh without careful state management, whereas Next.js uses a declarative folder structure with parallel and intercepted routes that automatically handle fallback pages but require precise file naming conventions. This architectural shift impacts developer onboarding, debugging complexity, and scalability for teams building multi-layered navigation systems.

Key Insights

• Vue.js requires manual watchers to sync route params with modal state, as shown in the GalleryView component code.
• Next.js utilizes parallel route slots (e.g., @modal) and intercepted routes (e.g., (.)photo) to handle modals declaratively via the file system.
• Next.js fallback page (app/gallery/photo/[id]/page.tsx) ensures a standalone full-screen view when the modal is accessed directly, preventing broken navigation.
• Vue.js approach uses a nested child route under the gallery, with a watcher that triggers modal visibility on hard refresh.
• Next.js requires a default.tsx file in the slot directory to avoid unmounted slot mismatch crashes during initial load.

Working Examples

Vue.js router configuration for photo modal routing with nested child route.

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: () => import('./components/PhotoModal.vue'),
props: true
}
]
}
]
})

Next.js gallery page using Link components for client-side navigation.

import Link from 'next/link';

export default function GalleryPage() {
return (
<div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
<h1>Next.js Photo Gallery</h1>
<div style={{ display: 'flex', gap: '20px' }}>
{['sunset', 'ocean', 'mountains'].map((photoId) => (
<Link
key={photoId}
href={`/gallery/photo/${photoId}`}
style={{
width: '150px',
height: '100px',
background: '#ef4444',
color: 'white',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
textDecoration: 'none',
borderRadius: '8px'
}}
>
View {photoId}
</Link>
))}
</div>
</div>
);
}

Next.js layout with parallel route slot for modal rendering.

export default function GalleryLayout({
children,
modal
}: {
children: React.ReactNode;
modal: React.ReactNode;
}) {
return (
<div>
{children}
{modal}
</div>
);
}

Next.js intercepted route modal component for popup overlay.

'use client';
import { useRouter, useParams } from 'next/navigation';

export default function InterceptedPhotoPopup() {
const router = useRouter();
const params = useParams();
return (
<div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.5)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 9999 }}>
<div style={{ background: 'white', padding: '30px', borderRadius: '12px', textAlign: 'center', width: '300px' }}>
<h2>Next.js Intercepted Popup</h2>
<p style={{ fontSize: '24px', fontWeight: 'bold', textTransform: 'uppercase', color: '#ef4444' }}>
📸 {params.id}
</p>
<button onClick={() => router.back()} style={{ marginTop: '20px', padding: '8px 16px', cursor: 'pointer' }}>
Close Overlay
</button>
</div>
</div>
);
}

Practical Applications

• Use Vue.js modal routing with watchers and nested routes for dynamic modal overlay in single-page applications like photo galleries.
• Adopt Next.js parallel and intercepted routes for SEO-friendly modal interactions combined with soft navigation, ideal for content-driven sites like e-commerce product quick-views.
• Pitfall: In Vue.js, failing to use a watcher with immediate: true on route.params.id leads to modal not opening on direct URL access or hard refresh.
• Pitfall: In Next.js, forgetting the default.tsx file for a parallel route slot causes layout crashes due to missing fallback when no modal content is rendered.

References:

• https://dev.to/heba_allah/parallel-and-intercepted-routes-between-vue-and-next-1cf1