How to use Pinia with Nuxt, composition-api (vue2) and SSR?

Viewed 975

I'm trying to get Pinia to work in Nuxt with SSR (server-side rendering).

When creating a page without Pinia, it works:

<script>
import { reactive, useFetch, useContext } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { $axios } = useContext()
    const invitesStore = reactive({
      invites: [],
      loading: true,
    })

    useFetch(async () => {
      invitesStore.loading = true
      await $axios.$get('invite/registermember').then((result) => {
        invitesStore.loading = false
        invitesStore.invites = result.invites
      })
    })

    return {
      invitesStore,
    }
  },
}
</script>

But when introducing Pinia, I get the error "Converting circular structure to JSON --> starting at object with constructor 'VueRouter'"

I'm using Pinia this way:

// /store/invitesStore.js
import { defineStore } from 'pinia'

// useStore could be anything like useUser, useCart
export const useInvitesStore = defineStore({
  // unique id of the store across your application
  id: 'storeId',

  state() {
    return {
      invites: [],
      loading: true,
    }
  },
})
<script>
import { useInvitesStore } from '@/store/invitesStore'
import { reactive, onMounted, useFetch, useContext } from '@nuxtjs/composition-api'

export default {
  setup() {
    const { $axios } = useContext()
    const invitesStore = useInvitesStore()

    useFetch(async () => {
      invitesStore.loading = true
      await $axios.$get('invite/registermember').then((result) => {
        invitesStore.loading = false
        invitesStore.invites = result.invites
      })
    })

    return {
      invitesStore,
    }
  },
}
</script>

Is it possible to get this to work? How?

0 Answers
Related