Pinia with Vue 2.7 and router example

[MarcelGeo]

Hello. We are migrating legacy code base to Vue 2.7 and in future to Vue 3. One part is pinia store. We are lost in Vue 2.7 and endless errors with getPiniaInstance missing pinia. We are facing errors with missing pinia instance also in stores in random order. Is on the world example , which is running with pinia 2.1.6 and Vue 2.7 + Vue-router? We have to use

const store = useStore(pinia) everywhere, also in store actions (sometimes).

In official docu is not example with useXxxStore with passing pinia instance as argument in web browser (only SSR example available).

[posva]

This sounds like you have 2 copies of Pinia (or some other vue related library) in your code. Depending on the bundler, you will have to ensure only one is used. For example in Vite, you use the optimizeDeps and dedupe

[MarcelGeo]

Thanks for answer. I will try to dedupe some libraries in vite. We have monorepo with several /lib , /lib2 folders linked with yarn link. Therefore includeDepths I can not use (maybe :) )

/lib1
/lib2
/app

/app is importing something from /lib2 and /lib2 from /lib1 there could be situation of two pinia instances.

How to check if there is pinia instance installed or not activated? are there any events handlers?

pinia.onError((e) => {})

Or something like this?

[MarcelGeo]

Sometimes setup in compnents, define store methods and other places in lib1 is not having active pinia. But everythink looks good. Vue dev tools showing active stores setup is called after init of application. Dont now what is error with pinia instance. Can not debug it.

I have to do?

resolve.dedupe = ['pinia', ...]

[MarcelGeo]

It would be very nice to have some example with following stack Vite + Vue 2.7 + vue-router 3.6.5 + pinia
It would be also very nice to have some documentation for vue 2.7 usage with useXxxStore(pini) approach :)

[MarcelGeo]

Dedupe pinia does not help.

[MarcelGeo]

Hi. After hours of debugging. There are rules for using pinia, router and vue 2.7 in monorepo worksapces:

• properly remove pinia dependency from libraries bundle

rollupOptions: {    
 // make sure to externalize deps that shouldn't be bundled     
// into your library     
  external: ['vue', 'pinia', ...Object.keys(packageJson.dependencies)],     
  output: {       
    exports: 'named',       
    // Provide global variables to use in the UMD build       
    // for externalized deps       
    globals: {        
        vue: 'Vue',         
        pinia: 'pinia'       
    }    
 },

• use dedupe (maybe helping for something :) )

• router have to be created before mounting with $mount() vue
  example of creating application in our codebase:
  https://github.com/MerginMaps/mergin/blob/pinia-with-vue2/web-app/packages/app/src/main.ts

• all router guards have to add pinia as argument in useStore(pinia)
  example of router in our codebase
  https://github.com/MerginMaps/mergin/blob/pinia-with-vue2/web-app/packages/app/src/router.ts

I think it would be usefull to have documentation about vite configuration and using SSR mode of pinia in SPA. :)