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

[RustyJoeM]

I've hit the same issue with latest/current Quasar framework app.

• installed quasar cli as per quasar install instructions
• created new app template using npm init quasar@latest - addded pinia as state management component in CLI wizard
• started app via quasar dev (quasar CLI command, and Pinia / dev tools are no show :(

(edit: same behavior in my pendign app in development - has 3-4 pinia stores wrriten in typescript, lot of data/getters/actions etc.) app works fine, but pinia is not accessible/impossible to debug in dev-tools)