Nuxt•3mo ago

Using same page for different paths

I have two pages that use the same component: - /users/add - /users/:id/edit Is there a way inside the page component to define both paths? I would like to avoid using router or 'pages:extend'

6 Replies

kapa.ai•3mo ago

Hi @JuanMCe. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt 3, you can define custom paths for a page using the definePageMeta macro within your page component. This allows a single page component to match multiple routes by specifying multiple paths. However, the knowledge sources only show examples of defining a single custom path per page using the path property in definePageMeta. There is no explicit documentation or example in the provided sources that demonstrates how to assign multiple paths to a single page component directly within the page file itself. For example, you can do this for a single custom path:

<script setup lang="ts">
definePageMeta({
  path: '/users/add'
})
</script>

<script setup lang="ts">
definePageMeta({
  path: '/users/add'
})
</script>

But there is no documented way to provide an array of paths or multiple path entries in definePageMeta to match both /users/add and /users/:id/edit in a single file. If you want to avoid using router options or the pages:extend hook, the standard approach in Nuxt is to create two separate files in the pages/ directory (e.g., pages/users/add.vue and pages/users/[id]/edit.vue) and have both import and use the same component for their content. This keeps routing simple and leverages Nuxt's file-based routing conventions. If you need more advanced routing (such as mapping multiple paths to a single file), you would need to use custom routing via router options or the pages:extend hook, as described in the documentation, but you mentioned you want to avoid that approach Custom Routing. In summary:
There is no documented way in the provided knowledge sources to define multiple paths for a single page component directly inside the page file using only definePageMeta. The recommended approach is to use separate files or custom routing if you need this functionality. definePageMeta examples
Custom Routing ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@281911171919904778> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Cake•3mo ago

@JuanMCe how did you end up doing it

JuanMCeOP•3mo ago

Still thinking on the best apprach, I guess I'll end up separating the page logic in different files and refactor the form component

Cake•3mo ago

I was thinking via alias? otherwise u can extract the code to a component and use the component in both pages

JuanMCeOP•3mo ago

alias was a no go because the paths don't share the same params

Gaming

Programming

Using same page for different paths

Did you find this page helpful?