Added named routes module

[tiborpino]

Added named routes module

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[Atinux]

Hi @tiborpino

I am not sure to fully understand the purpose of the module, could you give me an example of using it vs creating in pages/ directory?

[tiborpino]

Hi @Atinux The main purpose is you can set custom key for every page inside pages directory and also custom url path for every route. Here is the example

I set named route key custom-key and custom url /custom-url-for-homepage for /pages/homepage.vue

export default defineNuxtConfig({
  modules: [
    'nuxtjs-named-routes'
  ],
  namedRoutes: {
    routes: {
        'custom-key': {
            path: '/custom-url-for-homepage',
            file: '/pages/homepage.vue'
        }
    }
  }
}

Now I can use it as follows

<NuxtLink :to="{name: 'custom-key'}">Link to the homepage</NuxtLink>

And the generated HTML link will look like

<a href="/custom-url-for-homepage">Link to the homepage</a>

And now if I want to change file name to something like /pages/index.vue or just url /new-url-for-homepage all I can do is to change nuxt.config namedRoutes object and all of my <NuxtLink> directives for homepage will be the same and I don't have to change anything in my code base.

[Atinux]

Indeed, I thought definePageMeta in the Vue page could actually do the trick, but it seems not: https://stackblitz.com/edit/github-n8wcq6?file=pages%2Fcustom-url-example.vue,pages%2Findex.vue

It would be nice to be able to leverage definePageMeta to update those meta informations. Would that be possible @pi0 @danielroe ?

[pi0]

It should be possible overriding name with pageMeta indeed. We already support similar alias: '/custom' with definePageMeta (https://stackblitz.com/edit/github-n8wcq6-p7fn2c?file=pages%2Fcustom-url-example.vue,pages%2Findex.vue)

[danielroe]

Agreed 👍

[Atinux]

I guess this will land in RC13 👀

[danielroe]

~> nuxt/framework#8633

[tiborpino]

Indeed, I thought definePageMeta in the Vue page could actually do the trick, but it seems not: https://stackblitz.com/edit/github-n8wcq6?file=pages%2Fcustom-url-example.vue,pages%2Findex.vue

It would be nice to be able to leverage definePageMeta to update those meta informations. Would that be possible @pi0 @danielroe ?

No it won't. If you will define alias via page all your NuxtLink are fully dependent on the alias value. Change alias value and all links with that alias are broken.

My module will separate link key from file declaration and url for that page. When you decide to change page file name or page url, your key remains the same and all links are valid.

[Atinux]

By using Nuxt RC 13 (coming):

definePageMeta({
  name: 'my-key'
})

Will specify the name of the route, you can rename the page but the name won't change.

[tiborpino]

The code above will generate page on the url /my-key

When you want to change the url, you have to change the value of the name key in definePageMeta function. Then all keys are invalid.