Ability to add pages dynamically based on an API call #27643
Open
Description
Describe the feature
What is this for?
- Many projects utilize a CMS, allowing users to fully customize the slug of pages. This results in a situation where the specific page file to use for a given route is unknown in advance.
- For example, visiting
/foo
would result in an API call to retrieve the name of the.vue
file to use and perhaps some additional data. The correct page would then be mounted just like in regular Nuxt routing. These slugs, managed by the website's admin, do not have any prefix and can be customized dynamically.
Many developers are unsure about the best approach to implement something like this in Nuxt.
Here are the main concerns:
- No Nuxt routing features should be sacrificed (e.g., runtime page hooks, page transitions, layout switching, page meta, etc.).
- Normal Nuxt routing should still work, and the developer should have control over whether or not to make the API call for Nuxt-generated routes as well.
- Nuxt should not generate routes for these “dynamic” page files automatically (so that I cannot access the dynamic page
foo.vue
, for example, when no API call to get the page type was made prior) - NuxtLinks to the dynamic pages should be allowed to appear in the template without causing a Vue Router warning about a non-existing route.
- The async request should ideally be able to run in parallel with everything else before rendering (plugins, etc.)
——
@danielroe has stated multiple times that all of this is already possible (in multiple ways), so this may just be a matter of mentioning this use case in the documentation (which I would happily do once we figure out everything)
I'm linking the original issue here: #7437
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.
Activity