Page Structure in NuxSaaS

This document explains how NuxSaaS organizes the content and components of a page and the rationale behind this structure. It uses the app/pages/admin/user page as a reference example.

How NuxSaaS Organizes a Page

Each page in NuxSaaS is represented as a directory under app/pages/, following Nuxt's file-based routing. For example:

app/pages/admin/user/
├── components/
    ├── BanUserModal.vue
    ├── CreateUserModal.vue
├── i18n.json
├── index.vue

• index.vue: The main Vue component for the page.
• i18n.json: Page-specific translation strings.
• Additional files (e.g., composables, subcomponents) can be included for modularity.

Nuxt Page Detection and Custom Routing Behavior

By default, Nuxt treats every file and directory under app/pages/ as a route, automatically generating a page for each file according to its file-based routing system. This means that, without any customization, even files inside subdirectories like components under a page directory would be considered as separate pages and included in the routing table.

However, in NuxSaaS, the routing behavior has been customized in nuxt.config.ts. A hook is used to filter out any routes whose paths include component or /api. As a result, files inside any components directory under app/pages/ (such as app/pages/admin/user/components/) will not be treated as pages and will not generate routes. Only the main files like index.vue and other non-filtered files will be registered as pages.

This approach ensures that subcomponents and utility files placed in components folders are used exclusively as internal building blocks for the page, and are not exposed as standalone routes.

// nuxt.config.ts
hooks: {
  'pages:extend': function (pages) {
    const pagesToRemove: NuxtPage[] = []
    pages.forEach((page) => {
      if (page.path.includes('component') || page.path.includes('/api')) {
        pagesToRemove.push(page)
      }
    })
    pagesToRemove.forEach((page: NuxtPage) => {
      pages.splice(pages.indexOf(page), 1)
    })
  }
}

Why This Structure?

• Scalability: Each page is self-contained, making it easy to add, modify, or remove pages without affecting others.
• Maintainability: Localized i18n files and modular components keep code organized and easy to update.
• Separation of Concerns: Business logic, UI, and translations are clearly separated.

Conclusion

By following this structure, NuxSaaS ensures that each page is robust, maintainable, and easy to extend, while providing a seamless experience for both users and developers.