Best practice url structure for crud
With nuxt I can't have a page structure like this:
/cars
* [id].vue
* create.vue
* index.vue
Cause if I navigate to /cars/create it assumes that create is an id? But I like to have my urls like this:
/cars
/cars/123/edit
/cars/create
Isn't this best practice?
6 Replies
Hi @Mads. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You're correct that with Nuxt's file-based routing, if you have both
Yes, your proposed URL structure is a best practice, and the way to implement it in Nuxt is to use a folder for
[id].vue and create.vue inside the same pages/cars/ directory, navigating to /cars/create will match [id].vue and treat "create" as an id parameter. This is because dynamic routes like [id].vue will catch any path segment that doesn't match a more specific static route.
Best practice in Nuxt for your desired URL structure:
To achieve:
- /cars → pages/cars/index.vue
- /cars/create → pages/cars/create.vue
- /cars/123/edit → pages/cars/[id]/edit.vue
Directory structure:
Explanation:
- By placing [id] as a folder, you can have both /cars/create (handled by create.vue) and /cars/123 (handled by [id]/index.vue), and /cars/123/edit (handled by [id]/edit.vue).
- Nuxt will prioritize the static create.vue route over the dynamic [id] route, so /cars/create will not be mistaken for an ID.
This approach is documented as the recommended way to avoid conflicts between static and dynamic routes in Nuxt's file-based routing system. The documentation and migration guides confirm that static routes take precedence over dynamic ones, and using a folder for [id] is the way to achieve this structure in Nuxt 3 and 4.x [Dynamic Routes].
Summary:Yes, your proposed URL structure is a best practice, and the way to implement it in Nuxt is to use a folder for
[id] and place static routes like create.vue alongside it. This ensures /cars/create is not treated as an ID [Dynamic Routes].
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@335112909350895632> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Yes, so I did what you said @kapa.ai :
pages/
cars/
index.vue // /cars
create.vue // /cars/create
[id]/
edit.vue // /cars/123/edit
index.vue // /cars/123
Still same error.
Let me check the knowledge base for you again. One moment! :books:
----------------------
Based on the official Nuxt documentation, the structure you provided should work as expected:
With this setup, Nuxt's file-based routing should prioritize the static
Make sure you are using Nuxt 3 or 4.x, as this routing behavior is documented for these versions. If you are using an older version, the routing logic may differ [Migration: Pages]. 2. File/Folder Naming:
Double-check for typos in your folder and file names. The folder should be exactly
Sometimes, Nuxt's build cache can cause unexpected behavior. Try stopping your dev server, deleting
In Nuxt 4, the
create.vue route over the dynamic [id] route, so /cars/create should render create.vue and not be treated as an ID [Dynamic Routes].
If you are still seeing the same error (e.g., /cars/create being treated as an ID), here are a few things to check:
1. Nuxt Version:Make sure you are using Nuxt 3 or 4.x, as this routing behavior is documented for these versions. If you are using an older version, the routing logic may differ [Migration: Pages]. 2. File/Folder Naming:
Double-check for typos in your folder and file names. The folder should be exactly
[id], not _id or any other variation.
3. Build Cache:Sometimes, Nuxt's build cache can cause unexpected behavior. Try stopping your dev server, deleting
.nuxt and node_modules, and then running npm install and restarting the dev server.
4. pages Directory Location:In Nuxt 4, the
pages directory should be inside the app directory (/app/pages). If you are using Nuxt 4 and your pages directory is at the root, routes may not be recognized correctly [GitHub Issue].
If after checking these points the issue persists, the knowledge sources do not provide further troubleshooting steps for this specific scenario. You may want to share your exact directory structure and Nuxt version for more targeted help.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@335112909350895632> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
My mistake. I just had to restart the server