Nuxt Pages Plus

Nuxt Pages Plus is an open-source Nuxt module that extends Nuxt's file-based routing with parallel routes, modal routes, and named routes defined inside the pages directory.

What is Nuxt Pages Plus?

Nuxt Pages Plus is a Nuxt module that adds complex routing capabilities on top of Nuxt's existing pages system. It takes your Nuxt project's pages directory as input and outputs additional route handling for parallel routes and modal routes, so multiple pages can render within a single URL or modals can be opened and closed with URL synchronization. The module works with Nuxt's server-side rendering and static site generation, and it is published on npm under the package name nuxt-pages-plus. The project is inspired by Next.js App Router, and the parallel routes idea is credited to Anthony Fu.

Key Features

• Parallel Routes — Render multiple pages inside a single route, either synchronously or with manual control, which is useful for master-detail layouts and split views.
• Modal Routes — Navigate modal routes with real-time URL changes, so modals are deep-linkable and work with the browser back button.
• File-based Routing — Create named routes directly in the pages directory using file naming conventions, without editing separate config files.
• SSR Friendly — Optimized for Nuxt server-side rendering and static site generation, so complex routes still work without a client-side JavaScript runtime.
• Toolkit — Includes components and composables that let you build custom UI around parallel and modal routes with minimal glue code.
• Flexible Configuration — Adjust behavior globally through module options or per route with route-specific settings.

Who is it for?

• Nuxt developers building dashboards, admin panels, or any application that needs multiple page components visible within the same URL.
• Frontend teams who want modal windows to behave like first-class pages, with shareable URLs and proper history navigation.
• Static site developers using Nuxt's SSG output who still need advanced routing patterns without a running server.

What can you do with Nuxt Pages Plus?

• E-commerce sites: create product quick-view modals that have their own URLs, letting shoppers share a specific product state directly.
• Media platforms: run a video player in a parallel route while the rest of the page stays mounted, preserving scroll and component state.
• Content dashboards: combine a list view and a detail view into one route, updating the detail pane without reloading the full page.

How does Nuxt Pages Plus work?

Install the module with npx nuxi module add nuxt-pages-plus, or add it manually to your nuxt.config.ts modules array. Once installed, you define named route files in the pages directory and the module generates the parallel and modal route handling for you. The full usage examples and API reference are available in the official documentation at nuxt-pages-plus.pages.dev.