n*rd*nc*d

Go to Blog

Create multiple routes to the same page on your NuxtJS project

Background

Imagine you have working NuxtJS pages with three steps onboarding forms and the url of these pages are:

  • /onboarding (step 1 - a landing page with an entrance onboarding form)
  • /onboarding/taste-preference (step 2 - share with us their taste preference)
  • /onboarding/confirm (step 3 - share with us their personal info and get free samples)
breathe...

The Rainbow Campaign

Today, your marketeer, let's call them Toni, and you, let's call you - you, had this conversation:

Yo! I have a campaign to promote our new rainbow taste! The existing onboarding page looks perfect! We can reuse it!

— Toni

"Sure thing Toni! Tell me more.."

— You

"So the first landing page will have a different design but the form can stay as is. The url of the page will be /banana-rainbow-split...

The rest of the form can stay as is, but for SEO purposes we want it to be /banana-rainbow-split/taste-preference and /banana-rainbow-split/confirm. What do you think?"

— Toni

"Sounds straightforward. Talk to my team's Product Owner and let's create a story!" (yes.. we're Agile)

— You

breathe...

Execution

There are always several ways to do it. However, you want it to be quick, easy to clean up (when the campaign is done) and NuxtJS solution.

So basically we will have:

  • /onboarding
    On NuxtJS: pages/index.vue
  • /banana-rainbow-split
    On NuxtJS: pages/banana-rainbow-split/index.vue
  • /onboarding/taste-preference = /banana-rainbow-split/taste-preference
    Pointing to the same page: `pages/taste-preference.vue`
  • /onboarding/confirm = /banana-rainbow-split/confirm
    Pointing to the same page: `pages/confirm.vue`
breathe...
NuxtJS routes
A page with multiple routes on NuxtJS

Execution

We will solve this using the power of NuxtJS modules. So the first step is to add routes module on your nuxt.config.js: 

// nuxt.config.js
export default {
    ...
    buildModules: [
        ...
        '~/modules/routes'
    ],
};

Then create a folder called modules, if you haven't had one and inside it create a file called routes.js.

Inside this routes.js, we will make the URLs magic happens. 

// modules/routes.js
export default function () {
    this.nuxt.hook('build:extendRoutes', (routes, resolve) => {
        const rainbowCampaign = [
            {
                name: 'banana-rainbow-split',
                path: '/banana-rainbow-split',
                component: 'pages/banana-rainbow-split/index.vue',
            },
            {
                name: 'banana-rainbow-split_taste-preference',
                path: '/banana-rainbow-split/taste-preference',
                component: 'pages/taste-preference.vue',
            },
            {
                name: 'banana-rainbow-split_confirm',
                path: '/banana-rainbow-split/confirm',
                component: 'pages/confirm.vue',
            },
        ];

        rainbowCampaign.map(item => {
            routes.push({
                name: item.name,
                path: item.path,
                component: resolve(`${this.options.srcDir}`, item.component)
            })
        });
    });
};

That's it! You can "reuse" the same page, with its logic, validations and fancy effects, for multiple URLs 👏

Have a better solution than this? Please let me know! I always love to improve 🙏

breathe...

Helpers