Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nuxt 2 - using a store in a plugin outputs an error in console #1063

Open
guillaumeduliscouet opened this issue Feb 15, 2022 · 3 comments · May be fixed by #1392
Open

Nuxt 2 - using a store in a plugin outputs an error in console #1063

guillaumeduliscouet opened this issue Feb 15, 2022 · 3 comments · May be fixed by #1392
Labels
contribution welcome help wanted Any external help on this topic is welcomed 🧑‍💻 pkg:devtools Related to devtools ⛰ pkg:nuxt Related to @pinia/nuxt vue 2.x Specific to Vue 2 usage

Comments

@guillaumeduliscouet
Copy link
Contributor

Reproduction

https://github.com/guillaumeduliscouet/example-nuxt-2

It is a fork of the official exemple with only this added as a nuxt plugin:

export default async ({ $pinia }) => {
    useUserStore($pinia).logout()
}

Steps to reproduce the behavior

  1. Open the app
  2. Open the vue devtools
  3. Wait 1 minute
  4. See the error

Expected behavior

Using a store in a plugin should be possible (right ?) without breaking the devtools

Actual behavior

Everything seems to work in the devtools, but:

  • the message "user" store installed does not appear
  • after 1 minute we have an error message:

image

Here is what I have if I remove the store usage in the plugin:

image

Additional information

I imagine that the plugin gets called before the Vue app creation ? Seems like pinia is trying to install it's devtools plugin with app: null
@posva
Copy link
Member

posva commented Feb 15, 2022

The problem is the devtools plugin requires the app to exist in order to be used. Unsure if this is something that should be fixed here or in vue-devtools or if it is actually fixable as nuxt plugins might be executed too early for it to work.

@posva posva added contribution welcome help wanted Any external help on this topic is welcomed vue 2.x Specific to Vue 2 usage ⛰ pkg:nuxt Related to @pinia/nuxt 🧑‍💻 pkg:devtools Related to devtools labels Feb 15, 2022
popov-a-e pushed a commit to popov-a-e/pinia that referenced this issue Jun 24, 2022
@21skills
fix: install plugins after app is set (vuejs#1063)
4c45ec0
@popov-a-e popov-a-e linked a pull request Jun 24, 2022 that will close this issue
Draft
@kim-dokyung
Copy link

kim-dokyung commented Aug 2, 2023 •
edited
Loading

@posva It's been a while, but I'm facing the same issue while migrating from vuex to pinia. Is there no way to use pinia inside nuxt plugin then? Any advise about how to manage nuxt plugin logic during migration?

@posva Volta.net
Copy link
Member

posva commented Aug 2, 2023

It should work, this error is just about devtools. Normally, Nuxt plugins added in modules are installed before user plugins.
The only thing I can recommend is using nuxt-bridge with nuxt 2 so newer versions of @pinia/nuxt can be used.

Other than that, any help in fixes or docs are very welcome as I really don't have the bandwidth to give this more time.

@github-project-automation github-project-automation bot moved this to 🆕 Triaging in Pinia Roadmap Sep 6, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
contribution welcome help wanted Any external help on this topic is welcomed 🧑‍💻 pkg:devtools Related to devtools ⛰ pkg:nuxt Related to @pinia/nuxt vue 2.x Specific to Vue 2 usage
Projects
Pinia Roadmap
Status: Vue 2
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: install devtools plugin only after app is created and installed (#1063) popov-a-e/pinia
3 participants
@posva @guillaumeduliscouet @kim-dokyung