Hello! 👏🏼 I'm back after wayyy too long! Here's my first blog post on something that's actually tech-related. 👩🏻💻 This is a quick post on how to create named routes in Nuxt.js.
However, while working with Nuxt.js in a new project, I wanted to see if I could do the same with Nuxt, since it's based on Vue.js. I was worried I couldn't because Nuxt.js automatically generates Vue routing for us so hypothetically, I thought I wouldn't be able to customize the
to in the
<NuxtLink> component without adding a route name in Router instance. 🥲
But, being curious and tenacious, I tried the same feature in my Nuxt app - and voilà... It works, too!
Is equal to...
I hope this helps someone! In my process, I spent hours trying to find a concrete post on StackOverFlow and Nuxt.js documentation, but there wasn't anything at all too concrete. The only way I found out was through actually applying the idea in code 😅.
The context for this use-case was for pagination / page queries. I needed a way to pass a query for pagination in the
to portion of the
<NuxtLink>, so hence I defaulted to named routes. I didn't apply the same context in the code photos, but it should work either way (if not, please comment below or message me).
Gist of the story: You don't need to give your route names in Nuxt.js to use named routes.
Anyway, this is it for today! Stay safe and well everyone ❤️
Curious what I used for the beautiful code photos? 📸
Polacode - a VSCode extension
- NOTE: For Polacode to work, you cannot simply highlight code from bottom up as in the demo. You must copy-paste it into the Polacode panel! (An FYI since I thought I would never be able to use it until I used my eyes to read 😄)