Help migrating from Vue2 to Vue3

[chamby]

I am trying to migrate the use of mapStores() on the root App. In Vue2 this was possible because of Vue.use(PiniaVuePlugin);. But in Vue3 app.use(pinia); comes after the definition of my App. The code does not throw errors, but the mapping never seems to take place and the mapped state is not defined at runtime. Based on the documentation, this makes sense, but am I missing an easy way to make this work without refactoring? It seems like using Pinia at the App level instead of only at Components is an antipattern.

vue2

import Vue from "vue";
import { createPinia, PiniaVuePlugin, mapStores } from "pinia";
import { useMyStore } from "@/store/index.js";

Vue.use(PiniaVuePlugin);
const pinia = createPinia();

new Vue({
  pinia,

  computed: {
    ...mapStores(useMyStore),
  },
});

vue3

import { createApp } from "vue";
import { createPinia, mapStores } from "pinia";
import { useMyStore } from "@/store/index.js";

const pinia = createPinia();

const app = createApp({
  computed: {
    ...mapStores(useMyStore),
  },
});

app.use(pinia);

[Deckluhm]

It works pretty well on my side with a similar setup:

import { createApp } from 'vue'
import { createPinia, mapStores } from 'pinia'
import { defineStore } from 'pinia'

const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 5
  })
})

const pinia = createPinia()

const app = createApp({
  template: 'Count: {{ counterStore.count }}',

  computed: {
    ...mapStores(useCounterStore)
  }
})

app.use(pinia)

app.mount('#app')

Can you provide a link to the repo? If not, can you try to provide a minimal reproduction?

[chamby]

After more development, this behavior disappeared due to another one of my changes. I did not keep track of exactly what I was doing wrong but this is indeed fine in Vue3.