Nuxt•5d ago

Cant acces nested page with i18n and custom route name

Hey everyone, I'm running into a strange routing issue in my Nuxt application and could really use some help. The Problem: I have a page at app/pages/dashboard/knowledge/notes/[uuid]/index.vue. In this file, I'm explicitly setting the route name using definePageMeta:

// app/pages/dashboard/knowledge/notes/[uuid]/index.vue
definePageMeta({
  name: 'dashboard-knowledge-notes-details',
  title: 'Note Details',
})

// app/pages/dashboard/knowledge/notes/[uuid]/index.vue
definePageMeta({
  name: 'dashboard-knowledge-notes-details',
  title: 'Note Details',
})

When I check the routes in the Nuxt devtools, this route (dashboard-knowledge-notes-details) appears correctly with the dynamic uuid parameter. However, when I try to navigate to this route by its name from another page (app/pages/dashboard/knowledge/topic/[topicId.vue) using a helper function navigateWithLocale:

// app/pages/dashboard/knowledge/topic/[topicId].vue
const editNote = (noteId: string) => {
  return navigateWithLocale({
    name: 'dashboard-knowledge-notes-details',
    params: {
      uuid: noteId,
    },
  })
}

// app/pages/dashboard/knowledge/topic/[topicId].vue
const editNote = (noteId: string) => {
  return navigateWithLocale({
    name: 'dashboard-knowledge-notes-details',
    params: {
      uuid: noteId,
    },
  })
}

I consistently get a No match for route error in the console for the object {"name":"dashboard-knowledge-notes-details","params":{"uuid":"..."}}. What I've tried/Observed: 1. The route name dashboard-knowledge-notes-details is visible in the devtools. 2. The navigation uses a helper navigateWithLocale, which I assume wraps router.push or similar and likely adds locale information (my app uses i18n). 3. I've tried restarting the development server to clear any potential cache. Thanks!

9 Replies

kapa.ai•5d ago

Hi @magius. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your issue—getting a "No match for route" error when navigating by a custom route name with i18n and dynamic params—relates to how Nuxt generates route names, especially with dynamic routes and i18n customizations. Key Points from the Knowledge Sources 1. Nuxt Route Naming for Dynamic Routes
By default, Nuxt generates route names based on the file structure. For a file at pages/dashboard/knowledge/notes/[uuid]/index.vue, the default route name would be something like dashboard-knowledge-notes-uuid (with uuid as the param). When you override the name with definePageMeta({ name: 'dashboard-knowledge-notes-details' }), you expect to use this name for navigation. However, with i18n and custom routes, the actual route name used for navigation may differ, especially if i18n or custom route logic modifies it. 2. i18n and Route Name Mapping
When using @nuxtjs/i18n with custom routes, the route names can be changed or suffixed to handle locale-specific routing. For example, in a similar scenario, the answer on Stack Overflow points out that the actual route name for a dynamic route may be products-type instead of just products due to how Nuxt generates names for dynamic routes (Dynamic routing in Nuxt 3 with I18n). 3. Custom Route Name Pitfalls
If you set a custom name in definePageMeta, but i18n or custom route logic (like custom route generation or plugins) modifies or expects a different name, navigation by your custom name may fail. This is especially true if you use custom route generation or plugins that alter route names for localization, as seen in the GitHub issue where route names were programmatically suffixed for children to avoid errors after a Nuxt upgrade (Folder-based routing breaks after migrating from 3.11 to 3.16). 4. How to Debug and Fix
- Check the actual route name: Use Nuxt DevTools or log the router's route list to see the exact name Nuxt/i18n assigned to your route. It may be suffixed or altered (e.g., dashboard-knowledge-notes-details___en or similar). - Use the generated name: When using i18n, you may need to use the localized route name or use helpers like localePath or useLocalePath to generate the correct route object. - Custom Route Plugins: If you have custom plugins that manipulate routes (as in the GitHub issue), ensure your navigation uses the final, localized route name. What To Do - Inspect the actual route name in the router (not just what you set in definePageMeta). It may be different due to i18n or custom route logic. - Use i18n helpers like localePath or useLocalePath to generate the route, passing the name and params. For example:

  const localePath = useLocalePath()
  const editNote = (noteId) => {
    return navigateTo(localePath({
      name: 'dashboard-knowledge-notes-details', // or the actual generated name
      params: { uuid: noteId }
    }))
  }

  const localePath = useLocalePath()
  const editNote = (noteId) => {
    return navigateTo(localePath({
      name: 'dashboard-knowledge-notes-details', // or the actual generated name
      params: { uuid: noteId }
    }))
  }

- If you use custom route generation/plugins, ensure your navigation code matches the final route name as generated after all plugins and i18n processing. Summary The most likely cause is that the route name you are using (dashboard-knowledge-notes-details) does not match the actual route name after i18n or custom route processing. Double-check the generated route name and use i18n helpers to ensure correct navigation. If you have custom plugins that modify route names, make sure your navigation code is in sync with those changes. If you still have issues, please provide the output of your route list (from Nuxt DevTools or router.getRoutes()) to further diagnose the problem. References:
- Dynamic routing in Nuxt 3 with I18n
- Folder-based routing breaks after migrating from 3.11 to 3.16 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

magiusOP•5d ago

@kapa.ai My thoughts: It's puzzling because the route name seems registered and visible, but navigation by that name fails. Could this be related to: * How definePageMeta interacts with dynamic routes ([uuid]/index.vue) in this specific Nuxt version? * Something happening inside the navigateWithLocale function or how it interacts with the router, perhaps related to i18n processing? * A timing issue where the route isn't fully available when editNote is called (though this seems less likely for standard page navigation)? Has anyone encountered a similar issue where a route is visible in devtools but fails to match during navigation by name, especially in a setup involving definePageMeta, dynamic routes, and potentially i18n? Any pointers on what else to check or how to debug the router's state at the moment of navigation would be greatly appreciated! screenshot of nuxt devtool with my custom route but when i look the page i still got this

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your observations are valid, and this kind of issue—where a route name is visible in Nuxt DevTools but navigation by that name fails—has been reported in setups involving dynamic routes, custom route names via definePageMeta, and i18n. What the Knowledge Sources Reveal 1. Route Name Generation and i18n
When using i18n and custom routes, the actual route name used for navigation may differ from what you set in definePageMeta. For dynamic routes, Nuxt often generates names like dashboard-knowledge-notes-uuid (not just your custom name), and i18n can further modify these names (e.g., by adding locale suffixes or altering the structure) Dynamic routing in Nuxt 3 with I18n. 2. Custom Route Plugins and Name Mismatches
If you have custom plugins or logic that manipulate route names (as seen in the GitHub issue), the final route name may not match what you expect. This can cause navigation by name to fail, even if the route appears in DevTools Folder-based routing breaks after migrating from 3.11 to 3.16. 3. Debugging Route State
The recommended way to debug is to inspect the actual route names at runtime. You can do this by logging the output of router.getRoutes() or by checking the route list in Nuxt DevTools at the moment you attempt navigation. This will show you the exact names and params expected by the router. 4. i18n Helpers
When using i18n, it's best to use helpers like useLocalePath or localePath to generate the correct route object, as these take into account any modifications made by i18n to the route names and paths Dynamic routing in Nuxt 3 with I18n. What to Check - Log the available routes just before navigation:

  const router = useRouter()
  console.log(router.getRoutes().map(r => r.name))

  const router = useRouter()
  console.log(router.getRoutes().map(r => r.name))

This will help you confirm the exact route name you should use. - Check if i18n is modifying the route name (e.g., adding a locale suffix like ___en). - Use i18n helpers for navigation:

  const localePath = useLocalePath()
  navigateTo(localePath({ name: 'dashboard-knowledge-notes-details', params: { uuid: noteId } }))

  const localePath = useLocalePath()
  navigateTo(localePath({ name: 'dashboard-knowledge-notes-details', params: { uuid: noteId } }))

- Review any custom plugins that might alter route names or structure. Summary This is a known pitfall when combining dynamic routes, custom route names, and i18n. The route name you see in DevTools may not be the one the router expects for navigation, especially if i18n or custom plugins are involved. Always check the actual route name at runtime and use i18n helpers for navigation to ensure compatibility. If after these checks the issue persists, please share the output of router.getRoutes() and the exact navigation call for further diagnosis. References:
- Dynamic routing in Nuxt 3 with I18n
- Folder-based routing breaks after migrating from 3.11 to 3.16 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

magiusOP•5d ago

@kapa.ai

import type { RouteLocationRawI18n } from 'vue-router'

// Infer the type of the second parameter of navigateTo
type NavigateToOptions = Parameters<typeof navigateTo>[1]

export function navigateWithLocale(path: RouteLocationRawI18n, options?: NavigateToOptions, locale?: 'en' | 'fr') {
  const localePath = useLocalePath()
  return navigateTo(localePath(path, locale), options)
}

import type { RouteLocationRawI18n } from 'vue-router'

// Infer the type of the second parameter of navigateTo
type NavigateToOptions = Parameters<typeof navigateTo>[1]

export function navigateWithLocale(path: RouteLocationRawI18n, options?: NavigateToOptions, locale?: 'en' | 'fr') {
  const localePath = useLocalePath()
  return navigateTo(localePath(path, locale), options)
}

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your navigateWithLocale helper is designed to wrap Nuxt's navigateTo with locale-aware routing using useLocalePath. This is a common pattern in Nuxt projects with i18n, and your implementation aligns with recommended practices from the knowledge sources. Key Points from the Knowledge Sources - Using useLocalePath for i18n Navigation:
The recommended way to generate locale-aware routes is to use the useLocalePath composable. This ensures that the route name and parameters are correctly mapped according to the current or specified locale, which is especially important when route names or paths are modified by i18n configuration or custom routes.
Example usage from the sources:

  const localePath = useLocalePath()
  navigateTo(localePath({ name: 'route-name', params: { ... } }))

  const localePath = useLocalePath()
  navigateTo(localePath({ name: 'route-name', params: { ... } }))

Dynamic routing in Nuxt 3 with I18n - Type Inference for navigateTo Options:
Your use of Parameters<typeof navigateTo>[1] to infer the options type is a valid TypeScript approach, though the knowledge sources do not explicitly discuss this. - Locale Parameter:
Passing the locale as an argument to localePath is supported and allows you to generate a path for a specific locale, as shown in the i18n documentation and examples. Limitations - The knowledge sources do not provide the exact type RouteLocationRawI18n, but the pattern of passing a route object with name and params is consistent with Nuxt and Vue Router usage. - There is no explicit mention of the internal implementation of navigateWithLocale, but your approach matches the documented and community-recommended usage. Summary Your navigateWithLocale function is correct and follows best practices for locale-aware navigation in Nuxt with i18n. It uses useLocalePath to resolve the localized route and then calls navigateTo with the resulting path and options. This approach is supported by the knowledge sources and should work as expected for navigating to named routes with dynamic parameters and locale support. If you encounter issues with route matching, ensure that the route name and params you pass match the actual route definitions after i18n processing, as route names may be altered by i18n or custom route logic Dynamic routing in Nuxt 3 with I18n. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

magiusOP•5d ago

i replicated this bug on stack blitz https://stackblitz.com/edit/bobbiegoede-nuxt-i18n-starter-nm9qpugv?file=pages%2Fprojects.vue the link on this reproduction doesnt work either like in my real project

bertyn

StackBlitz

Nuxt I18n #3185 (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Gaming

Programming

Cant acces nested page with i18n and custom route name

Did you find this page helpful?