Structure des pages dans NuxSaaS

Ce document explique comment NuxSaaS organise le contenu et les composants d’une page ainsi que la logique derrière cette structure. Il utilise la page app/pages/admin/user comme exemple de référence.

Comment NuxSaaS organise une page

Chaque page dans NuxSaaS est représentée comme un dossier sous app/pages/, suivant le système de routage basé sur les fichiers de Nuxt. Par exemple :

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

• index.vue : Le composant Vue principal de la page.
• i18n.json : Les chaînes de traduction spécifiques à la page.
• Des fichiers additionnels (par exemple, des composables, des sous-composants) peuvent être inclus pour plus de modularité.

Détection des pages Nuxt et comportement de routage personnalisé

Par défaut, Nuxt considère chaque fichier et dossier sous app/pages/ comme une route, générant automatiquement une page pour chaque fichier selon son système de routage basé sur les fichiers. Cela signifie que, sans personnalisation, même les fichiers dans des sous-dossiers comme components sous un dossier de page seraient considérés comme des pages séparées et inclus dans la table de routage.

Cependant, dans NuxSaaS, le comportement de routage a été personnalisé dans nuxt.config.ts. Un hook est utilisé pour filtrer toutes les routes dont le chemin contient component ou /api. Ainsi, les fichiers dans n’importe quel dossier components sous app/pages/ (comme app/pages/admin/user/components/) ne seront pas considérés comme des pages et ne généreront pas de routes. Seuls les fichiers principaux comme index.vue et les autres fichiers non filtrés seront enregistrés comme pages.

Cette approche garantit que les sous-composants et fichiers utilitaires placés dans les dossiers components sont utilisés exclusivement comme éléments internes de la page, et ne sont pas exposés comme routes indépendantes.

// 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)
    })
  }
}

Pourquoi cette structure ?

• Scalabilité : Chaque page est autonome, ce qui facilite l’ajout, la modification ou la suppression de pages sans impacter les autres.
• Maintenabilité : Les fichiers i18n localisés et les composants modulaires gardent le code organisé et facile à mettre à jour.
• Séparation des responsabilités : La logique métier, l’interface utilisateur et les traductions sont clairement séparées.

Conclusion

En suivant cette structure, NuxSaaS garantit que chaque page est robuste, maintenable et facile à étendre, tout en offrant une expérience fluide tant pour les utilisateurs que pour les développeurs.