CODEWITHSUNDEEP
typescriptvuejs3piniavuetifyjs3
Nallamachu
Nallamachu

Reputation: 1488

Pinia store issue with Vite + Vue + Vuetify project

Actually we have the requirement of migrating from Vue-2 to Vue-3. In our existing project we were using the stack like,

While trying to migrate from Vue-2 to Vue-3, we choose the stack like,

We have successfully converted the vue-2 project login and landing page components into vue-3 after lot of struggles but finally end up with a problem of state/store management of application components because we haven't used the PINIA. We have implemented the basis store which was bit similar to vue-2 supported and later found an issue of resetting the global values when application is getting refreshed or reloaded.

I came to know after investigating about the problem and found Pinia is the better library to solve my problem because Vuex-4 is out of the date. I found a POC project which is implemented using the PINIA + Vue-3 POC. Since I am not able to mention the entire project source code, I shared the link.

Here multiple problems I need to mention,

  1. When I try to install Vuetify in the above poc project, application is not working as expected and not loading the components properly.
  2. When I try to follow the similar implementation of PINIA stores in Vue-3 + Vuetify-3 converted project, getting the problem of getActivePinia() was called with no active pinia issue. enter image description here

Store usage in login page look like below, enter image description here

I have tried couple of solutions suggested for getActivePinia was called with no active pinia problem and could not succeed as of now. If someone can help me with the example of Vue3 + Vuetify3 + Pinia + Typescript with proper store/state management will be more helpful.

Upvotes: 0

Views: 1095

Answers (1)

Nallamachu
Nallamachu

Reputation: 1488

I have finally got a proper solution and able to integrate in real-time project of Pinia State/Store management.

Since no one is able to answer the question, I am posting my POC project link here. This might be helpful to someone else who is having the requirement of same.

POC Project of Pinia with Vue3 + Vuetify 3 + Vite

Upvotes: 0

Related Questions