Currently, I am in the process of developing a Nuxt application that features a list of products. When a user clicks on a product from the list, it opens up a dedicated page for that particular item, which is functioning as intended.
The current structure of the application is as follows:
/pages/featured // This directory contains the products
/pages/product/:id/:slug // Dedicated page for each product
Now, I have a new feature in mind that I would like to implement:
- I want to maintain the dedicated product page layout if a user accesses it from a page other than the products directory or if they land directly on it;
- If a user clicks on a product from the products directory, I wish to open an almost full-screen dialog displaying the product over the directory;
- Ensure that the routing changes are reflected on the dialogs as well.
An example of what I envision is similar to the photo directory feature on Youpic.
The goal is to present a list of "products" entirely within a dialog box with internal navigation capabilities.
I have been researching the documentation on Nuxt routing and Vue Router to work on this development, but I am still quite far from finding a solution.
Although the code snippet presented here seems promising and aligns with my requirements, I am having trouble understanding how to implement it correctly and create custom routing for my Nuxt project:
export default {
router: {
extendRoutes (routes, resolve) {
routes.push({
path: '/users/:id',
components: {
default: resolve(__dirname, 'pages/users'),
modal: resolve(__dirname, 'components/modal.vue')
},
chunkNames: {
modal: 'components/modal'
}
})
}
}
}