Unable to see Pinia option in Vue DevTools Standalone app.

[shriramkure]

Hi,

I am using Vue DEV Tools standalone app. I have added vue-devtools as a dependency in my package.json & connect to devtools before app initialization. Vue Dev Tools shows all the components but it does not show Pinia to Debug State Management. Any help in this regard is highly appreciated.

[kevinluo201]

I don't know whether it's related. We have a multi-app application. The Pinia option only shows up when I switch to the second app in the devtool. It never shows up for the first app

[webfansplz]

Can you provide a mini repo? Thanks 🙏.

[kevinluo201]

After testing on multi-app/, I think it's just a misunderstanding. I think the Pinia icon only shows up when the app explicitly calls app.use(pinia)

import { createApp } from 'vue'

import App2 from './App2.vue'
import App from './App.vue'
import { createPinia } from 'pinia'

const pinia = createPinia()
const app = createApp(App)
app.use(pinia)
app.mount('#app')

const app2 = createApp(App2) // <== app2 doesn't call use(pinia) so the pinia icon doesn't show up
app2.mount('#app2')

It will result in this:
https://github.com/user-attachments/assets/2d0365be-d92f-430c-80ce-6e70ce0467ea
App2 accesses the store but it doesn't have the Pinia button on the devtool

Nonetheless, it can be a design decision. Since the Pinia stores are shared among all apps. I think the devtool can show the pinia icon when as long as there is one app calls use(pinia)

I had a problem of this issue because the company I work for is adding Vue.js into the existing Backbone.js app. We "inject" Vue components into the existing app, which create a new app everytime. We can have tens to more than one hundred apps exist at the same time. Not every app calls .use(pinia) (I don't know if it's intentional or not...) so I need to switch apps many times to find one having the Pinia button