Nuxt Pages Plus

A Nuxt module that enables complex routing for Nuxt Pages.

Important

This project is in beta. APIs and features may change without notice. If you decide to use it in a production environment, please assess the risks on your own. Your suggestions and contributions are welcome! Feel free to submit issues or pull requests.

Features

• 🛤️  Parallel Routes - Render multiple pages in a single route, synchronously or manually.
• 🖼️  Modal Routes - Navigate modals routes with real-time URL changes for seamless browsing.
• 📁  File-base Routing - Create named routes right inside pages directory of your Nuxt project.
• 🔋  SSR Friendly - Optimized for Nuxt server-side rendering and static site generation.
• ⚙️  Comprehensive Toolkit - Extensive components and composables for flexible usage and easy integration.
• 🛠  Flexible - Tailor settings globally or for specific pages; fully customizable.

Quickstart

Install the module to your Nuxt application with nuxi command:

npx nuxi module add nuxt-pages-plus

Install manually

npm i -D nuxt-pages-plus

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-pages-plus']
})

Documentation

Please refer to the Nuxt Pages Plus documentation for detailed usage and examples.

Contribution

Local development

# Install dependencies
pnpm install

# Generate type stubs
pnpm dev:prepare

# Develop with the examples
pnpm dev examples/...

# Develop with the playground
pnpm play

# Build the playground
pnpm play:build

# Run ESLint
pnpm lint

# Run Vitest
pnpm test
pnpm test:watch

# Release new version
pnpm release

Inspiration

This module is inspired by Next.js App Router. Many thanks to Anthony Fu for providing the opinion of implementing Parallel Routes feature using Nuxt.