Infinite dynamic level nesting in Nuxt.js

Question

I would like to have the routing of nuxt.js fully dynamic, because I can't predict the user and his preferences about the amount of levels he would like to have.

So one user would create a page like this:
http://localhost/parent/level-1/level-2/

And some other would do it like this:
http://localhost/parent/level-1/level-2/level-3/level-4/level-5/level-6/level-7/

Is there a way that nuxt.js will work with this infinite nested routing?

Answer 1

You should just be able to make a single file:

pages/_.vue

This will catch any requests that do not match a more specific request.

But note that this has unintended consequences. For instance, you may want to return 404 errors and the like, and using this method will always result in any route being matched. This leaves it up to you the developer to decide how to handle missing pages.

Answer 2

i'm answering my own comment – which was "how to validate fully dynamic urls based on the given answer -> use _.vue, which then handles everything. Maybe its helpful for someone.

Adding validation to the _.vue template brings error pages back whenever you return false in the validate method. In my case i'm having an api endpoint per page and can validate the fully dynamic url by adding the following to _.vue page component:

async validate({ $axios, route }) {
    const url = getMyApiEndpointUrl(route.path)

    try {
        await $axios.$head(url)
        return true
    } catch (e) {
        return false
    }
}