Turn off light
← Back

Modal page on index route

Dec 23, 2022

nuxt, dev


Quite a long time ago I was looking for a way to construct routes like Dribbble or Unsplash. They both have the same type of modal where it overlays on top of index page, but has its own route/URL. I wasn't able to figure it out back then, but later I found a way to make it happen with Nuxt.

The idea is to utilize nuxt-child and Nuxt's nested routes with some specific arrangement of the folders, so it will create routes that are similar to Dribbble or Unsplash. I often use nuxt-child, but never use it on the index page, which makes me unsure at the beginning about how to make it. Turns out the index folder is all I need, inside it, I utilize a dynamic page to load whatever content is, based on params.

I made a diagram to visualize the folder structure for this case.

The Blog of Rizal Renaldi

2022 © rizalrenaldi.com — Made with 🖖