Skip to content

Ability to add pages dynamically based on an API call #27643

Open
@cernymatej

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions