Use Pinia with Nuxt and composition-api (vue2) and SSR

[HendrikJan]

I can use Pinia with Nuxt, without SSR:

import { defineStore } from 'pinia'

export const useInvitesStore = defineStore({
  id: 'storeId',

  state() {
    return {
      invites: [],
      loading: true,
    }
  },
})

<script>
import { useInvitesStore } from '@/store/invitesStore'
import { onMounted, useFetch, useContext, defineComponent } from '@nuxtjs/composition-api'

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

    onMounted(() => {
      invitesStore.loading = true
      $axios.$get('invite/registermember').then((result) => {
        invitesStore.loading = false
        invitesStore.invites = result.invites
      })
    })
   
    // !!! If I uncomment this empty useFetch, I get the error: Converting circular structure to JSON
    // useFetch(async () => {
    // })

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

But, as soon as I uncomment the useFetch part in the code above (even without doing anything inside the useFetch async function), I get an error:
Converting circular structure to JSON

Am I doing anything wrong here?

[posva]

Only from the code sample I can't tell. Did you manage to fix this or reproduce in a bare bones project?

BTW You shouldn't pass the pinia instance inside of setup(), it's automatically injected

[HendrikJan]

Thank you for the reply.
I did not solve nor create a bare-bones project.
(if time permits I might try to create a bare-bones project after my vacation; next week.)

Currently I decided that I did not need a store for the simple component I made.
And I decided to use the options-API for the component, as the options-API is easier to read (for me and my colleagues).

I do use a Pinia store in the default Nuxt template, but there I'm also using the options-API now.

[HendrikJan]

@posva, I've created a bare-bones repo to reproduce this error: https://github.com/HendrikJan/pinia_574 (Couldn't wait for my vacation to end :-) )

[posva]

It seems like $nuxt being enumerable was a problem. It should be fixed in 0.5.4!

[mirabledictu]

Hi @posva , regarding nuxt with pinia, is there an equivalent of nuxtServerInit in Vuex nuxt module? Thanks!

[posva]

There is no equivalent because all pinia stores are instantiated as they are used (as explicit imports). You would have to write a Nuxt plugin (or middleware) that runs on the server and imports all stores having that action, creates them, and then call it.

[wobsoriano]

Just create a middleware, run it on server only

// middleware/nuxt-server-init.ts
import { useAuthStore } from '~/store/auth'

export default function ({ $pinia }) {
    if (process.server) {
        const store = useAuthStore($pinia)
        store.nuxtServerInit()
    }
}

// nuxt.config.js
{
    router: {
        middleware: ['nuxt-server-init']
    }
}

Now this will be called once on server-side only