Automatically create and set Pinia instance as active when one does not exist

What problem is this solving

• Eliminates boilerplate createApp(...).use(createPinia()) (common usage) or setActivePinia(createPinia())
• Conceptually decouples Vue App instance from Pinia stores. You can use Pinia stores at any point… before or after Vue app creation.
• Faster bootstrapping for common usage pattern. If I am not mistaken, while more than one pinia instance can be instantiated, one pinia instance suffices and is the common usage pattern that is recommended.
• Eliminates the chicken and egg problems with up-front logic dependent on pinia stores that is ran prior to Vue App creation. (In my case, I have authentication-logic running in my main entry file before any other logic.)
• Allows for pattern where you can export single store instance using defineStore({...})() without worries opposed to useStore function defineStore({...}). Makes consumption easier where I can skip useStore() assignment to a local variable when I need to use the store instance in multiple places.
• Author does not have to deal with getActivePinia was called with no active Pinia. Did you forget to install pinia? issues again 😃

Proposed solution

As part of defineStore options (3rd parameter), introduce some new setting (e.g. createActivePinia) which will create a Pinia instance (and set it active) if it does not exist at the time the store instance is created/retrieved via useStore(). Default setting to true.

Describe alternatives you’ve considered

• Same as proposed solution but default createActivePinia setting to false.

[Maxim-Mazurok]

Not sure why setActivePinia(createPinia()) isn’t clean, but I’ve used it with my Custom Elements project, like so:

import { createPinia, setActivePinia } from "pinia";
import HelloWorld from "./components/HelloWorld";
import ByeWorld from "./components/ByeWorld";

setActivePinia(createPinia());

customElements.define("hello-world", HelloWorld);
customElements.define("bye-world", ByeWorld);

(since it’s elements project only, no app instance)

And it seems to work fine on a basic counter example.

[3zzy]

Yes, something like this would also be useful when Vue components are consumed as Custom Elements and there’s no Vue instance available to install the plugin. See this thread for context.