Nuxt•3mo ago

Reuse pages?

Good evening! I have a set of pages I would like to use in different locations, without duplications. Let's imagine the global structure. /my-module/ /my-module/a.vue /my-module/b.vue I now want to use those pages in a different context. /context/my-module /context/my-module/a.vue /context/my-module/a.vue Behaviour should remain the same, only context is changing. As those are pages, not components, I'm not sure how to achieve this. Any clue? #layer #pages #reuse

7 Replies

Eric•3mo ago

Pages are just components stored in the /pages folder to make them accessible in the folder based routing. I'm not sure I understand what your goal is but if you store these 'files' in the components folder, you'll be able to reuse them as you wish. Once all your components are created, ou can create pages to builld your router structure and import the components where you need them.
Does that make sense for your project ?

kogratte•3mo ago

Nop. What I want to avoid is to avoid duplication in routes declarations, as my model is slightly complex. Given a module provide a set of pages, let's say /A, /B and /B/C, I would like to be able to add a page on my page tree, and say "from here, use this set of pages with this context elements". This way, I'll be able to reproduce a navigation tree using the module anywhere I need it. Add: Path alias does not seems to work, and I cannot use name because I need to use the generated ones

Single•3mo ago

What about a [...slug]?

pyplacca•3mo ago

how about page alias ?

Nuxt

definePageMeta · Nuxt Utils

Define metadata for your page components.

kogratte•3mo ago

I think I've got an idea using alias. Will try.

Patrity•3mo ago

You could simply have the pages load a component that does what you need it to do. You may also be looking for dynamic routes: https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes

kogratte•3mo ago

I guess I can use path alias on the module entry point, then rely on tree structure to get child routes. If my understanding is fine, it may work. I may be dumb, but I cannot figure out how to make it work. Here is my situation:

/my_module/pages/[context]/[myEntryPoint].vue ==> Redirect to childSubject
/my_module/pages/[context]/[myEntryPoint]/[childSubject].vue ==> Define page meta as below:

definePageMeta({
    path: '[context](/[context2])?/[childSubject]/[myEntryPoint].vue',
    alias: '/context/context2/childSubject/myEntryPoint',
});


/my_module/pages/[context]/[context2]/[myEntryPoint].vue
__/my_module/pages/[context]/[context2]/[myEntryPoint]/[childSubject].vue__ ==> Does not exists. Should be covered by previously defined alias

/my_module/pages/[context]/[myEntryPoint].vue ==> Redirect to childSubject
/my_module/pages/[context]/[myEntryPoint]/[childSubject].vue ==> Define page meta as below:

definePageMeta({
    path: '[context](/[context2])?/[childSubject]/[myEntryPoint].vue',
    alias: '/context/context2/childSubject/myEntryPoint',
});


/my_module/pages/[context]/[context2]/[myEntryPoint].vue
__/my_module/pages/[context]/[context2]/[myEntryPoint]/[childSubject].vue__ ==> Does not exists. Should be covered by previously defined alias

I hope childSubject own childs will then be available inside context2. Any idea of what I missunderstood?

Gaming

Programming

Reuse pages?