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)
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!
"Sure thing Toni! Tell me more.."
"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?"
"Sounds straightforward. Talk to my team's Product Owner and let's create a story!" (yes.. we're Agile)
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:
On NuxtJS: pages/index.vue
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`
We will solve this using the power of NuxtJS modules. So the first step is to add routes module on your nuxt.config.js:
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.
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 🙏