Dynamic Menu Generation Based on Directory or Route Configuration in Nuxt 3 SSR

[lhlyu]

Describe the feature

Feature Description:

I am working on a project that requires the dynamic generation of a menu list during server-side rendering based on the project’s directory structure or a predefined route configuration. This feature would allow developers to automatically create a navigation menu without the need for manual updates every time a new page or route is added.

Use Case:

Consider a large-scale application with numerous pages. Manually updating the menu each time a new page is introduced can be cumbersome and prone to errors. Being able to automatically generate the menu based on the directory or a route configuration file would greatly simplify this process, making it more efficient and less error-prone.

Suggested Implementation:

• Directory-Based Approach: Nuxt could scan the project’s directory for files matching a specific pattern (e.g., all .vue files in a pages directory) and use this information to generate the menu.
• Route Configuration Approach: Alternatively, Nuxt could read a predefined route configuration file (e.g., router.js or a similar naming convention) and use the information within to generate the menu.
  Additional Considerations:
• The feature should allow for nested menu structures to accommodate for nested routes if needed.
• Developers should be able to customize the menu generation process, for example by specifying which files or routes to include or exclude.
• It would be beneficial if the feature could also generate an accompanying menu component that could be easily imported into the application.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[huang-julien]

Hello 👋

Frist, thank you for the feature request 👍 .
Nuxt core aims to provide the minimum for users and only provide features that are either known to be used widely, either too complex (or relying on internals) to be implemented as a module.

There's multiple ways to implement your idea:

• use the page:extends hook to get the routes
• scanning by yourself the page directoyry structure
• retrieve it at runtime with useRouter()

I'm moving it to discussions so people can discuss about it !