The rewritten title is: How can I access the Pinia store in a child VueJS application?

Question

I'm creating a library to reuse VueJS applications in several other projects. It is a plugin that generates and displays forms in any VueJS project.

I used pinia as the store in this library and Vite to build it. How can I make a library's storage readable at the level of the project that imports it? My problem is that in the chrome extension for VueJS I don't have access to the store.

Example in the library I created this store in the library:

In the main.ts file I have the install method:

export default {
  install: (app: App, options: PluginOptions) => {
    app.component('UsfBuilder', UsfBuilder)

    app.use(createPinia())
  },
}

...But in my Vue extension I only see the app store and not the library's store...

I know it works because when I use "console.log" in the library store, the status element shows the correct value!

Stack:

• VueJS：3.2.41
• Pinia: 2.0.23
• Visited: September 2, 2015

Answer 1

I found the solution on reddit. If you use Pina to build the library, you must add the Pinia options external and global in the rollupOptions file ：

export default defineConfig({
  //...
build: {
    commonjsOptions: {
      esmExternals: true,
    },
    lib: {
      entry: resolve(__dirname, 'src/main.ts'),
      name: 'Formbuilder',
      fileName: 'formbuilder-plugin',
    },
    rollupOptions: {
      external: ['vue', 'pinia'],
      output: {
        globals: {
          vue: 'Vue',
          pinia: 'pinia',
        },
      },
    },
  },
})