Initialization ordering: can I manually initialize Pinia instance **before** Vue app instance is created?

[IS-Kuan]

I'm migrating a legacy Vue 3 + Vuex app to Pinia, but I stuck in the initialization ordering. This is this the simplified example:

// main.ts
import App from './ui/App.vue'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import { useMyStore } from './ui/store'   // Vuex stores / Pinia stores

const pinia = createPinia()
const myStore = useMyStore()
const app = createApp(App)    // App.vue  -> import { apiManager } from 'singleton.ts' -> `apiManager` also uses `useMyStore()` in './ui/store'
app.use(pinia)     // Too late... Can this Pinia instance be initialized earlier?
app.mount('#vue-app')

• App.vue uses apiManager in singleton.ts
• apiManager in singleton.ts uses useMyStore in './ui/store'
• (apiManager is responsible to fetch data from API, then call Vuex store->mutation functions to update State.)

With Vuex, this is no problem in these 4 years, but when I'm migrating these legacy code to Pinia, I totally don't know how to fix this elegantly.

NOTE: This is an extremely simplified example of a complex legacy project. Not only useMyStore, but there are also still lots of other imported modules loaded when const app = createApp(App), so it's impractical to re-arrange all dependencies only for Pinia.

Is there any way to manually force initialize Pinia before vue.createApp()?

[posva]

See https://pinia.vuejs.org/core-concepts/outside-component-usage.html#Using-a-store-outside-of-a-component. In short, put your pinia in a different file and import it in those singletons and pass it explicitly to the useStore() functions.

// src/pinia.ts
export const pinia = createPinia()

// src/singleton.ts
import { useStore } from './stores/store.ts
import { pinia } from './pinia.ts

useStore(pinia)