Nuxt.js: Dynamic router base

[rcpires]

What problem does this feature solve?

I'm refactoring a system with nuxtjs and that system can be used by users to create your own "sites". So each site can be accessed with a configured path, for example mydomain.com/client1, mydomain.com/client2-my-site and mydomain.com/other-user-url (the pages inside each site are fixed, like mydomain.com/client1/about-us, mydomain.com/client1/our-work etc).

I was able to work with custom routes (extendRoute), like this:

extendRoutes (routes, resolve) {
  routes.splice(0, routes.length); // reset nuxt automatic routes config
  routes.push({
    name: 'about-us',
    path: '/:myclient?/about-us',
    component: 'pages/about-us.vue',
  });
}

But that way I need to set a base path variable on store (on nuxtServerInit) and use it on all links because sites can also be accessed from external domain (premium feature), like myclient-owndomain.com/about-us. So this base path variable can be "/" (accessing from external domain) or "/:myclient" (accessing from internal domain) and must be used to render links, like:

<nuxt-link :to="$store.routerBasePath+'/about-us'">About us</nuxt-link>

So I think a better way to solving this is setting the router.base config dynamically (with a function), instead a fixed string.

Or is there another way to do that on nuxtjs?

Thanks!

What does the proposed changes look like?

This feature will make router.base config more flexible (an alternative when necessary), using a syntax like that:

router: {
  base: function(context) {return context.params.myclient}
}

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

[augnustin]

Definitely need this. Same issue here: base Path is dynamic.

[augnustin]

Before that, I wrote a custom NuxtLink.vue component with the following logic:

<template>
  <nuxt-link v-bind="{...$props, ...$attrs}" :to="toWithPrefix">
    <slot></slot>
  </nuxt-link>
</template>

<script type="text/javascript">
  export default {
    computed: {
      toWithPrefix: function() {
        return `/${this.$route.params.slug}${this.to}`;
      },
    },
    props: [
      'to',
    ]
  }
</script>

[f4z3k4s]

Any news about this feature?

[codexianltd]

i need this too