is it possible to fill pinia in server-side on nuxt 3?

[ghost]

store/todos.ts

import { defineStore } from 'pinia'
import axios from '@/utils/axios'

export const useTodos = defineStore('todos', {
  state: () => ({
    todo: {}
  }),

  actions: {
    async fetch() {
      const { data } = await axios.get('/todos/1')

      this.todo = data
    }
  }
})

plugins/init.server.ts

import { useTodos } from '@/store/todos'

const todos = useTodos()

todos.fetch()

I am trying to replicate the nuxtServerInit() function of Nuxt2, to start populating data in components once all the data is loaded from the API.

[ghost]

my bad

import { defineNuxtPlugin } from '#app'
import { useTodos } from '@/store/todos'

export default defineNuxtPlugin(async (nuxtApp) => {
  const todos = useTodos(nuxtApp.$pinia)

  await todos.fetch()
})

[abdinurkz]

same issue

[doantu05150]

I hate to do this but set nuxtApp: any to ignore this issue.

[alfianriv]

@AbdinurK you can try nuxtApp.$nuxt.$pinia

[bastianjoel]

As of mentioned here you should use useNuxtApp().$pinia.

[YadBro]

Try this:
export default defineNuxtPlugin(({ vueApp }) => {
vueApp.$nuxt.$pinia.use(MyPiniaPlugin)
});

"nuxt": "^3.6.5"

[minhyentcu]

Can you share the source code? i am having the same problem but haven't solved it yet.

[Dorianslavov]

✅ This is the way I've made it work

Let's say in somewhere in your store you have a method initProfile which you want to call server-side

Call that method in layouts/default.vue or in all of your /layouts/*.vue using useAsyncData
example - await useAsyncData('init', initProfile)

// layouts/default.vue
<script setup lang="ts">
import { useUserStore } from '~/store/user'

const userStore = useUserStore()
const { isLogged, initProfile } = userStore

// Init profile on server
if (isLogged) await useAsyncData('profile', initProfile)
</script>

That way your high-level layout would always populate the store on the server-side

❗️The issue with this method would be that pages with layout: false can't call this method. For this issue, you can create your own no-layout ( or call it whatever you want ) layout which still calls the init method in it's <script setup> but includes only the <NuxtPage /> in the <template> like that and use the no-layout layout instead of layout: false

<template>
    <main>
        <NuxtPage />
    </main>
</template>

That way you would ensure that all of the pages will call initProfile

[briansackett]

This worked for me, so thank you! Just wanted to put this here for reference..
When using destructuring refs from a store you should be using storeToRefs() so they are reactive.. not required for functions.

import { storeToRefs } from 'pinia'; const userStore = useUserStore(); const { isLogged } = storeToRefs(userStore); const { initProfile } = userStore();

[melokki]

Hello, I tried the above implementation, but the function in store is executed every time I click on a <NuxtLink>
When I check the length of the store array property, so I can stop its execution, the length is always 0 despite the fact that it was previously filled with data that I can see in devtools.
I don't understand how to make this work

Does anyone have some ideas?

I use rc.11 version of nuxt

[MuhammadM1998]

How can I do it with a nitro plugin (putting my code in /server/plugins ?

[SuperIbm]

Did you find any solution to do this? I want to elaborate why I personally need this. I want to use Server Storage in order to cache my data via redis. But I do not know how to combine pinia + nuxt + axios + nitro plugin all together. The problem is that you are not able to use useStorage out of defineEventHandler it means that you can't just use useStorage in the pinia side. Also I tried to include Redis directly https://github.com/redis/node-redis and https://github.com/luin/ioredis in order to cache data with my own solution, but it didn't work with Nuxt 3 also.

[MuhammadM1998]

I had no luck sorry

[LeonardoRick]

Hey, is this still possbile? i'm not being able to call composables inside plugins at all

[nuxt] [request error] [unhandled] [500] Must be called at the top of a setup function                                                                                                               4:26:29 PM
  at Module.createCompileError (./node_modules/@intlify/message-compiler/dist/message-compiler.mjs:54:19)  
  at createI18nError (./node_modules/vue-i18n/dist/vue-i18n.mjs:97:34)  
  at Module.useI18n (./node_modules/vue-i18n/dist/vue-i18n.mjs:2248:15)  
  at ./store/index.ts:12:33  
  at EffectScope.run (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:42:16)  
  at ./node_modules/pinia/dist/pinia.mjs:1438:43  
  at runWithContext (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3855:18)  
  at ./node_modules/pinia/dist/pinia.mjs:1438:16  
  at EffectScope.run (./node_modules/@vue/reactivity/dist/reactivity.cjs.js:42:16)  
  at createSetupStore (./node_modules/pinia/dist

[johannschopplich]

You can also use nuxt-prepare if it is enough for you to fetch data at build time (not runtime).

I have written an article on how to pass state from a prepare script to Nuxt.

In a nutshell, you can import your prefetched data anywhere from the #nuxt-prepare import:

// `stores/todo.ts`
import { defineStore } from 'pinia'
import { todos } from '#nuxt-prepare'

export const useTodos = defineStore('todos', {
  state: () => ({
    todos: todos || [],
  })
})

For the prepare script, see the docs. It basically boils down to:

// `store.prepare.ts`
import { $fetch } from 'ofetch'
import { defineNuxtPrepareHandler } from '../src/config'

export default defineNuxtPrepareHandler(async () => {
  const todos = await $fetch('todos/1', {

  return {
    // Pass your todos data to Nuxt and import it
    // anywhere from `#nuxt-prepare`
    state: {
      todos,
    },
  }
})