CODEWITHSUNDEEP
vue.jsvuejs3google-chrome-devtoolspiniavue-devtools
Henry
Henry

Reputation: 1755

Why can't I see Pinia in Vue devtools?

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:

Screen grab

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

Upvotes: 19

Views: 12707

Answers (4)

T.Todua
T.Todua

Reputation: 56341

If you are on Windows and use PNPM for project, there was a case when none of things helped (cleaning caches, reinstalling modules...) and was only solved by creating a fresh clone of repository.

Upvotes: -1

thats my first answer
thats my first answer

Reputation: 289

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.

Upvotes: 28

rebinnaf
rebinnaf

Reputation: 513

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.

Upvotes: 10

Nathan Wailes
Nathan Wailes

Reputation: 12222

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.

Upvotes: -1

Related Questions