Nuxt•3d ago

Using v-for with NuxtLink?

I'm trying to create NuxtLinks using an array of links and am having trouble getting the v-for syntax correct. Is this possible to do?

5 Replies

kapa.ai•3d ago

Hi @Tyr4el. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, it's absolutely possible to create NuxtLinks using an array of links with v-for in Nuxt. Here's how you can do it:

<template>
  <nav>
    <NuxtLink 
      v-for="link in links" 
      :key="link.to" 
      :to="link.to"
    >
      {{ link.label }}
    </NuxtLink>
  </nav>
</template>

<script setup>
const links = [
  { to: '/getting-started', label: 'Documentation' },
  { to: '/playground', label: 'Playground' },
  { to: '/roadmap', label: 'Roadmap' },
  { to: '/pro', label: 'Pro' }
]
</script>

<template>
  <nav>
    <NuxtLink 
      v-for="link in links" 
      :key="link.to" 
      :to="link.to"
    >
      {{ link.label }}
    </NuxtLink>
  </nav>
</template>

<script setup>
const links = [
  { to: '/getting-started', label: 'Documentation' },
  { to: '/playground', label: 'Playground' },
  { to: '/roadmap', label: 'Roadmap' },
  { to: '/pro', label: 'Pro' }
]
</script>

In this example, we're iterating over an array of links using v-for. Each link object in the array has a to property (for the destination) and a label property (for the link text). The :key attribute is important for Vue's rendering optimization, and we're using the to property as the key since it should be unique for each link. This approach is commonly used in Nuxt applications. For instance, the Header component in Nuxt UI Pro (https://ui.nuxt.com/pro/getting-started/structure#appvue) uses a similar pattern to create navigation links. Remember that NuxtLink is a component provided by Nuxt for creating links in your application, and it's fully compatible with Vue's v-for directive. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

Tyr4elOP•3d ago

Ah yes of course. Thank you! @kapa.ai that did it ty

kapa.ai•3d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- You're welcome! I'm glad the solution worked for you. If you have any more questions about Nuxt or need further assistance, feel free to ask. I'm here to help! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

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

Gaming

Programming

Using v-for with NuxtLink?