How can I use the store of Pinia in the child VueJS application

Question

I am creating a library to reuse a VueJS app in several other projects. It's a plugin to generate and display forms in any VueJS project.

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

Example in the library I created this store in my 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 stores, and I don't see the store of the library ...

I know it works because when I use "console.log" in the library store, the state elements are displayed with the good values!

Stack:

• VueJS: 3.2.41
• Pinia: 2.0.23
• Vite: 2.9.15

Answer 1

I found the solution to reddit. If you build a library with Pina, in the vite.config.ts file you have to add Pinia option in the rollupOptions in external & globals:

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',
        },
      },
    },
  },
})