Custom route path for injected route.

[tirojal]

I found no way to define custom path for page injected in module with customRoutes: 'config'

I cannot use customRotes: 'page' since some modules is not opinionated to be used with i18n.
And I have multiple instances of project for different countries, and I want to maintain just one file per country to define customRoutes. Or even externalize the maintenance and import and apply pages-config from DB during build.

I working on implementation in my fork and I have several ideas how I can achieve it:

1. Additional customRoutes option: names (working title)
   Will behave similar to config. But will use route.name as key and expects to get resolved paths.

i18n: {
  customRoutes: 'config',
  pages: {
    'my/[param]/page': {
      en: 'my/[param]/page',
      de: 'mein/[param]/seite'
    }
  }
}

i18n: {
  customRoutes: 'names',
  pages: {
    'my-param-page': {
      en: 'my/:param()/page',
      de: 'mein/:param()/seite'
    }
  }
}

2. Add fallback pageMeta generation in pages.ts/analyzeNuxtPages for injected routes based on route path

{path: '/injected/:param(), ...} => {inRoot: true, path:'/injected/[param]'}

it will allow to use regular `customRoutes: 'config'
but I dont like that the route will be processed and transformed back and forth:
vueRouterPath -> nuxtFsLikePath -> vueRouterPath

3. Addition to route itself

nuxt.hook('pages:extend', pages => {
      pages.push({
        name: 'injected-param',
        path: '/injected/:param()',
        file: resolve('./pages/injected.vue'),
        i18n: {
          paths: {
            en: '/injected/[param]',
            de: '/gespritzt/[param]'
          },
          // OR 
          resolvedPaths: {
            en: '/injected/:param()',
            de: '/gespritzt/:param()'
          },
        }
      })
    })

So there will be ability to add another module that will process all pages and append i18n to route.

4. Addition of AnalyzedNuxtPageMeta to route itself

nuxt.hook('pages:extend', pages => {
      pages.push({
        name: 'injected-param',
        path: '/injected/:param()',
        file: resolve('./pages/injected.vue'),
        i18n: {
          pageMeta: {
            inRoot: true,
            path: 'injected/[param]'
          }
        }
      })
    })

Basically it's a hybrid of (2) and (3) but requires some knowledge about i18n-module internals.

Conclusion

I think the final solution should implement not only one but several ways to achieve routes custom paths. Not sure yet about their priority. Would like to read your thoughts. Thanks

[kazupon]

Thank you for your proposal!

For your idea, I have the following opinion:

custom route path syntax

We should use nuxt file system path syntax than vue router path.
If we allow using of the vue router path, our nuxt application has two types route path syntax, so we have caused cognitive load.

How to define a custom route path for a route (page) inserted from the outside

There are many ways to do this, but I think passing meta-information via pages:extend (extendPages) is the way to go. This is because nuxt i18n also uses that interface when extending routes.

The meta-information to be passed should be in the same format as nuxt.config. Because there is no cognitive load on how to configure it.

[tirojal]

I see you point. But in the end we still resolving it as vue-router path and it's already a cognitive load for me.

nuxt.hook('pages:extend', pages => {
      pages.push({
        name: 'injected-param',
        // * here we using vue-router path
        path: '/injected/:param()',
        file: resolve('./pages/injected.vue'),
        i18n: {
          paths: {
            // * here we using nuxt-fs path
            en: '/injected/[param]',
            de: '/gespritzt/[param]'
          },
        }
      }

Maybe we can support both? So every i18n.path will be converted to nuxt-fs path and then back to vue-router-path
So it will eliminate the whole cognitive load.

{
  i18n: {
    paths: {
      // use whatever syntax you prefer
      en: '/injected/:param()/:opt?',
      de: '/gespritzt/[param]/[[opt]]',
      // even that weird declaration should work
      fr: '/injected-fr/[param]/:opt?'
    }
  }
}