Nuxt.js: Custom route names

[SteveEdson]

What problem does this feature solve?

Currently, urls are based on the filename with the pages directory. I'd like to be able to use

export default {
    name: 'custom-page-name',
    ...
};

and have it set that as my route name for that page. That way, I can use <nuxt-link :to="{ name: 'custom-page-name' }">Link</nuxt-link>, without worrying that if I change my page file name (and therefore the URL) it'll break all my links.

What does the proposed changes look like?

export default {
    name: 'custom-page-name', // This is already a Vue convention for naming components
    ...
};

<nuxt-link :to="{ name: 'custom-page-name' }">Link</nuxt-link>

_{This feature request is available on Nuxt community (#c7439)}

[galvez]

@SteveEdson the team's current position is to maintain the convention for now.

An alternative is to use the router module or extendRoutes in conjunction with routes.splice(0, routes.length, ...[new routes]).

[patrickkh7788]

router module or extendRoutes is not hard to manage with a lot pages.
this should be open as feature if the team is not plan to implant it soon.

[manniL]

@patrickkh7788 If someone wants to submit a PR, we'd be happy to look over it!

[simllll]

So is this now implemented? Or why is it closed?

[manniL]

@simllll As you can read a few comments above yours, it's not planned to get implemented very soon.

[simllll]

Ah sorry, I must have missed that. That's sad, I was running in the exact issue right now and was looking for a solution. Especially because it is not possible to pass object as parameters with a path, only with named route.

[manniL]

Maybe you could use the meta object of the routes 🤔

[traherom]

I want to add my support to this for an additional reason: transitioning existing Vue apps. Rather than doing find and replace on all route names in existing pages/components, you can simply set the name and be more confident that all your existing links work. One less barrier to moving to Nuxt.

[Atinux]

Keeping it open since this could be really handy when working with pages, but this has to be well done.

Right now, we have no way to read the page file and get the name given in it, and using RegExp is not a good idea since it would lead to more issues.

[SteveEdson]

Can we add the Hacktoberfest label to this issue please? It'd be great for the additional support. Thanks.

[manniL]

@SteveEdson Thanks for the request but as the issues incorporates a lot of internal changes it isn't "suitable" for hacktoberfest 😦

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[amritk]

Ah, I have been looking to switch to nuxt.js lately, is it possible to do nested named routing?

For example:

export default new Router({
    mode: 'history',
    routes: [
        {
            path: '/:locale',
            component: TheRoot,
            props: true,
            children: [
                {
                    path: '/sports/:id',
                    name: 'Sport',
                    component: Sport
                }
            ]
        }
    ]
})

Now I would like to be able to simply access this with :to="{ name: 'Sport', params: { id: 2} }" without having to figure out what the current locale is all the time with the full path :to="`${locale}/sports/2`"

Is this currently possible? Or are we waiting for this issue to be resolved to do this?

[aaronransley]

Bumping this one so stalebot doesn't swoop in and ruin our dreams 😢

[manniL]

@aaronransley Stale bot isn't closing feature request anymore.

[pi0]

nuxt-router-extras may be related 😊 Updated version: nuxt-community/router-extras-module

[moltar]

Would be great to be able to define custom names, to keep the code DRY.

I think the custom path name could be a static property of the component.

And then this class can be imported into places where the paths need to be referenced.

[Atinux]

The solution for this is to use the router-extra-module.

The documentation will be updated to point this module :)