Let’s say I have a page with a list of articles and I want to display the selected article in a nested page. Can the selected article be passed down to the nested page so it doesn’t have to be fetched from the server again?

pages/articles.vue:

<template>
  <NuxtLink v-for="article in articles" :to="`/articles/{article.id}`">{{ article.title }}</NuxtLink>

  <NuxtPage />
</template>

<script setup>
const { data: articles } = useFetch('/articles/`)
</script>

pages/articles/[articleId].vue:

<template>
  <h1>{{ article.title }}</h1>

  <main>{{ article.body }}</main>
</template>

The closest I got is passing the entire articles list:

<NuxtPage :articles="articles" />

And then finding the selected one in the child page using the route param:

<script setup>
const { articles } = defineProps(['articles'])
const route = useRoute()

const article = computed(() => articles.value.find((a) => a.id === route.params.id))
</script>

However, passing the entire list is unnecessary and messy and might have performance implications.

Let’s say I have a page with a list of articles and I want to display the selected article in a nested page. Can the selected article be passed down to the nested page so it doesn’t have to be fetched from the server again?

pages/articles.vue:

<template>
  <NuxtLink v-for="article in articles" :to="`/articles/{article.id}`">{{ article.title }}</NuxtLink>

  <NuxtPage />
</template>

<script setup>
const { data: articles } = useFetch('/articles/`)
</script>

pages/articles/[articleId].vue:

<template>
  <h1>{{ article.title }}</h1>

  <main>{{ article.body }}</main>
</template>

The closest I got is passing the entire articles list:

<NuxtPage :articles="articles" />

And then finding the selected one in the child page using the route param:

<script setup>
const { articles } = defineProps(['articles'])
const route = useRoute()

const article = computed(() => articles.value.find((a) => a.id === route.params.id))
</script>

However, passing the entire list is unnecessary and messy and might have performance implications.

• vue.js
• vuejs3
• nuxt.js
• nuxt3.js

Share Improve this question Follow asked Mar 3 at 9:42 Pawel DecowskiPawel Decowski 1,62122 gold badges1515 silver badges2424 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Passing the entire articles object might not be necessary and may not have a significant impact on performance, but you could also consider the following approach. I hope this can be helpful to you:

<template>
  <NuxtLink v-for="article in articles" :to="`/articles/${article.id}`">{{ article.title }}</NuxtLink>

  <NuxtPage :article="article" />
</template>

<script setup>
const route = useRoute()
const { data: articles } = useFetch('/articles/')

const article = computed(() => articles.value.find((a) => a.id === route.params.id))
</script>

You can use Pinia and save all articles in a Pinia state.
Then articles.vue would get all articles from there, while articles/[articleId].vue would get only the article it is interested in via a getArticleById(route.params.id) getter defined in the state.

export const useArticleStore = defineStore('article', () => {
  const articles = ref([])

  const getArticleById = computed(() => (id) => {
    return articles.value.find(article => article.id === id)
  })

  const fetchArticles = async () => {
      // articles.value = ...
  }

  return { articles, getArticleById, fetchArticles }
})