Dynamic Routing in Nuxt 3, Ionic and Sanity
Hey everyone. I'm running into an issue with dynamic routing in a Nuxt 3, Ionic and Sanity project. I have a live test project in production:
Repo: https://github.com/edwardz8/nuxt3-test
Live Test Site: https://nuxt3-ionic-sanity.vercel.app/
When attempting to go to a single route param on this page: https://nuxt3-ionic-sanity.vercel.app/blog
I get the following error:
GET https://2mnyaa05.apicdn.sanity.io/v1/data/query/production?query=*%5B_type+%3D%3D+%22post%22+%26%26+slug.current+%3D%3D+%24slug%5D%5B0%5D&returnQuery=false&perspective=raw 400 (Bad Request)
"error": {"description": "param $slug referenced, but not provided",
"end": 41,
"query": "*[_type == "post" && slug.current == $slug][0]",
"start": 37,
"type": "queryParseError"
"Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus."
I'm not sure if all of the above errors are related or what's going on/what I'm missing.
I know i'm not supposed to be using nuxt-link within ionic, but even when i use ionic's router-link, it still doesn't work so nuxt-link is not the root issue.
Any direction would be appreciated.
GitHub
GitHub - edwardz8/nuxt3-test
Contribute to edwardz8/nuxt3-test development by creating an account on GitHub.
2 Replies
Hi @zach. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your issue with dynamic routing in a Nuxt 3, Ionic, and Sanity project. The knowledge sources don't contain information about integrating Ionic or Sanity with Nuxt 3.
However, I can provide some general guidance about dynamic routing in Nuxt 3 based on the available information:
1. For dynamic routes in Nuxt 3, you should use the
[param] syntax in your file names instead of the old _param syntax used in Nuxt 2. For example, a dynamic blog post page might be named [slug].vue inside your pages/blog/ directory.
2. The error message you're seeing from Sanity suggests that you're trying to use a $slug parameter in your query, but it's not being provided. This is likely an issue with how you're passing the slug parameter to your Sanity query, rather than a Nuxt routing issue.
3. For handling nested dynamic routes, you might want to look into using catch-all routes. As mentioned in the Stack Overflow post about endless nested routes (https://stackoverflow.com/questions/78241559), you can use a file named [...id].vue to handle multiple levels of nesting.
4. The warning about aria-hidden is an accessibility issue and is not directly related to routing. It's suggesting that you might want to use the inert attribute instead of aria-hidden in some cases.
5. Regarding the use of <NuxtLink> vs Ionic's router-link, Nuxt's documentation doesn't cover integration with Ionic, so I can't provide specific guidance on that.
If you're still having issues, you might want to create a minimal reproduction of your problem and seek help through the Nuxt community channels (https://nuxt.com/docs/community/getting-help). They might be able to provide more specific assistance with your Nuxt 3, Ionic, and Sanity integration.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@396129316372742154> Kapa.ai is still learning and improving, please let me know how I did by reacting below.