Pinia in an package: getActivePinia was called with no active Pinia.

[Reducetherisk]

Hi,

I've been enjoying the power of Pinia stores in our Vue 3 application and would love to implement it into our component package.
It feels like I've tried a bunch of different solutions or ways to implement without much success.
The component package is build with Rollup and I've done the required external: ['pinia'] and output.globals.pinia: 'pinia' to exclude it from the build itself.
The built output files end up with import { defineStore } from 'pinia'; in them so I guess that is good, I'm not too familiar with the package/rollup stuff yet.
So for the implementing application there is little difference between installing our package first or Pinia first.

// main.ts - implementing application
const pinia = createPinia();
const app = createApp(App);

// Initialize the component package
app.use(fotocomponent, {
  // Other options, pass Pinia to the package to add a plugin later
  Pinia: pinia,
});

app
  // Other plugins
  .use(pinia)
  .mount('#app');

Then in the plugin install function:

// index.ts - component package
// Directives
import { App as Application, Plugin } from 'vue';
import config, { FotocomponentOptions } from './config';
import * as Components from './Components';

// Other imports and exports here, nothing from pinia though

// Install function
const install: Plugin = (_instance: Application, options: FotocomponentOptions) => {
  // Other config options

  // Set the Pinia instance
  config.Pinia = options.Pinia;

  // Add the custom pinia code, this will allow actual store disposal
  if (config.Pinia) {
    config.Pinia.use(pluginContext => {
      pluginContext.store.$destroy = () => {
        pluginContext.store.$dispose();
        delete pluginContext.pinia.state.value[pluginContext.store.$id];
      };
    });
  }

  // Install the components
  for (const key in Components) {
    if (Object.prototype.hasOwnProperty.call(Components, key)) {
      // @ts-ignore
      const component = Components[key];

      if (component) {
        _instance.component(key, component);
      }
    }
  }
};

export default { install };

The stores are simply made like the docs suggest:

// DataTablesStore.ts - component package
import { defineStore } from 'pinia';

export const useDataTablesStore = defineStore('data_tables', {
  state: () => ({
    // State here
  }),

  actions: {
     // Some actions here
  },
});

At this point I'm kind of lost as to what other options I can fallback on.
One way I've gotten it to work is whenever calling the useDataTablesStore() I call it with the Pinia instance useDataTablesStore(config.Pinia), also this is impossible when working with the mapping functions I think.
However I don't think this is how it should work, I've seen people claim they can use it like it would be within an Vue3 application.

Would love some suggestions or possible fixes that people might have for me 🙏

Thank you for your time!