Why can't I see Pinia in Vue devtools?

Question

I am developing an app using Vue 3, Vuetify 3, and Pinia, all of which I'm in the process of learning. I'm trying to follow this video to learn Pinia and at about 17:50, the presenter says to install Vue Devtools if necessary. I did that and was able to see a new Vue option added but when I clicked on it, I did NOT see Pinia despite the video showing plainly that my Pinia stores would be visible.

Why isn't this working? I'm using the version of Vue Devtools that is made by Vuejs.org, which is at version 6.50 and I have two Pinia stores but nothing to do with Pinia (aside from an acknowledgement that they were installed) appears in the Vue window of Devtools as you can see in this screen cap:

I'd appreciate if someone can tell me how to make Devtools show my Pinia store.

Insistence

The one symbol at the top next to the arrows is a dropdown. Check for pinia there. – Matelot

@Matelot - Thank you!! Now I can see my Pinia stores just fine :-) – Insistence

Answer 1

I had the same issue and moving app.use(createPinia()) to bottom solved my problem.

that was the code when I cant see the pinia plugin at vue devtools

app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(VeeValidatePlugin)


app.mount('#app')

Then I moved the pinia down like this

app = createApp(App)

app.use(router)
app.use(VeeValidatePlugin)
app.use(createPinia())

app.mount('#app')

after that pinia plugin appeared.

Kellner

For what it's worth, I find that Pinia comes and goes from Vue Devtools: sometimes it's there and working fine, other times it's not there and no menu will make it appear. However, if you close and open CTRL-SHIFT-i or duplicate the tab and then do CTRL-SHIFT-i it may suddenly appear. I don't know if my browser or computer are wonky somehow or if there's a bug in the Vue Devtools code. – Insistence

Confirmed, moving Pinia down helped. – Serpigo

Confirmed as of today. createApp(App) .use(router) .use(createPinia()) .mount('#app') – Sollows

Answer 2

Did you try refreshing the page while console and DevTools is open? This worked for me.

Note: Please check if you have disabled cache in the Network tab, anyways refreshing the page would help.

Gynous

you might have "disable cache" checked in network tab of devtools. – Usk

yes I think that's the root cause, thanks. – Gynous

let me hug you! thanks! – Chau

Answer 3

I was just having this issue and this solution fixed my problem:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => ({
  ...
  define: {
    __VUE_PROD_DEVTOOLS__: mode !== 'production'
  },
}))

So basically you're just defining __VUE_PROD_DEVTOOLS__ to be false in your config.

Warr