Nuxt3 and Pinia: Why does the initial data not load during SSR?

Viewed 64

Does anyone know why my Nuxt3 app won't load initial comments during SSR?

When I disable JavaScript in the browser, the comments array is empty, but if I enable JS, it will fill with the comments data. I thought Pinia works with SSR?

Comments.vue:

<template>
  <section>
        <CommentsList :comments="commentStore.comments" />
  </section>
</template>

<script setup>
import { useCommentStore } from '@/stores/comment'

const route = useRoute()
const selected = ref('newest')

const commentStore = useCommentStore()
commentStore.sortByNewest(route.params.id)

</script>

stores/comment.ts:

import {defineStore} from 'pinia'

export const useCommentStore = defineStore('comment', {

    state: () => {
        return {
            comments: []
        }
    },
    actions: {

        async sortByNewest(routeParamsId: String) {
            const data = await $fetch(`/api/comments/newest/${routeParamsId}`)
            this.comments = data
        },
...snip..
}
0 Answers
Related