Vue3: migrating from vuex to Pinia

package.json

@@ -21,6 +21,7 @@
     "js-cookie": "^2.2.1",
     "js-sha256": "^0.9.0",
     "libphonenumber-js": "^1.10.44",
+    "pinia": "^2.1.7",
     "prismjs": "^1.24.1",
     "qrcode": "^1.5.1",
     "query-builder-vue": "^1.2.0",
@@ -38,8 +39,7 @@
     "vue-signature-pad": "^3.0.2",
     "vue3-editor": "^0.1.1",
     "vue3-vt-notifications": "^1.0.0",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.1.0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

resources/js/app.js

@@ -1,5 +1,5 @@
 import { createApp, configureCompat, ref } from 'vue'
-import store from '~/store'
+import { createPinia } from 'pinia'
 import router from '~/router'
 import App from '~/components/App.vue'
 import Base from './base.js'
@@ -11,9 +11,10 @@ import '~/components'
 
 import '../sass/app.scss'
 
+const pinia = createPinia()
 const app = createApp(App)
   .use(router)
-  .use(store)
+  .use(pinia)
   .mixin(Base)
 
 registerPlugin(app)
@@ -25,7 +26,9 @@ configureCompat({
   // GLOBAL_MOUNT: false,
   COMPONENT_V_MODEL: false,
   INSTANCE_SET: false,
-  INSTANCE_DELETE: false
+  INSTANCE_DELETE: false,
+  ATTR_FALSE_VALUE: false,
+  WATCH_ARRAY: false
 })
 
 router.app = app

resources/js/components/App.vue

@@ -37,14 +37,15 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useAppStore } from '../stores/app'
 import Loading from './Loading.vue'
 import Hotjar from './service/Hotjar.vue'
 import Amplitude from './service/Amplitude.vue'
 import Crisp from './service/Crisp.vue'
 import StopImpersonation from './pages/StopImpersonation.vue'
 import Notifications from './common/Notifications.vue'
 import SeoMeta from '../mixins/seo-meta.js'
-import { mapState } from 'vuex'
 
 // Load layout components dynamically.
 const requireContext = import.meta.glob('../layouts/**.vue', { eager: true })
@@ -74,6 +75,13 @@ export default {
 
   mixins: [SeoMeta],
 
+  setup () {
+    const appStore = useAppStore()
+    return {
+      layout : computed(() => appStore.layout)
+    }
+  },
+
   data: () => ({
     metaTitle: 'OpnForm',
     metaDescription: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.',
@@ -95,9 +103,6 @@ export default {
     isOnboardingPage () {
       return this.$route.name === 'onboarding'
     },
-    ...mapState({
-      layout: state => state.app.layout
-    }),
     layoutComponent () {
       return layouts[this.layout]
     }

resources/js/components/Loading.vue

@@ -10,7 +10,8 @@
 
 <script>
 // https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-loading.vue
-import { mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAppStore } from '../stores/app';
 
 export default {
   data: () => ({
@@ -19,12 +20,13 @@ export default {
     failedColor: 'red'
   }),
 
-  computed: {
-    ...mapState({
-      percent: state => state.app.loader.percent,
-      canSuccess: state => state.app.loader.canSuccess,
-      show: state => state.app.loader.show
-    })
+  setup () {
+    const appStore = useAppStore()
+    return {
+      percent : computed(() => appStore.loader.percent),
+      canSuccess : computed(() => appStore.loader.canSuccess),
+      show : computed(() => appStore.loader.show)
+    }
   }
 }
 </script>

resources/js/components/LoginWithGithub.vue

@@ -14,9 +14,18 @@
 </template>
 
 <script>
+import { useAuthStore } from '../stores/auth'
+
 export default {
   name: 'LoginWithGithub',
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
   computed: {
     githubAuth: () => window.config.githubAuth,
     url: () => '/api/oauth/github'
@@ -34,9 +43,7 @@ export default {
     async login () {
       const newWindow = openWindow('', 'Login')
 
-      const url = await this.$store.dispatch('auth/fetchOauthUrl', {
-        provider: 'github'
-      })
+      const url = await this.authStore.fetchOauthUrl('github')
 
       newWindow.location.href = url
     },
@@ -49,9 +56,7 @@ export default {
         return
       }
 
-      this.$store.dispatch('auth/saveToken', {
-        token: e.data.token
-      })
+      this.authStore.saveToken(e.data.token)
 
       this.$router.push({ name: 'home' })
     }

resources/js/components/Navbar.vue

@@ -132,7 +132,10 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth';
+import { useFormsStore } from '../stores/forms';
+import { useWorkspacesStore } from '../stores/workspaces';
 import Dropdown from './common/Dropdown.vue'
 import WorkspaceDropdown from './WorkspaceDropdown.vue'
 
@@ -142,6 +145,18 @@ export default {
     Dropdown
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      authStore,
+      formsStore,
+      workspacesStore,
+      user : computed(() => authStore.user)
+    }
+  },
+
   data: () => ({
     appName: window.config.appName
   }),
@@ -151,12 +166,12 @@ export default {
     helpUrl: () => window.config.links.help_url,
     form () {
       if (this.$route.name && this.$route.name.startsWith('forms.show_public')) {
-        return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
+        return this.formsStore.getBySlug(this.$route.params.slug)
       }
       return null
     },
     workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent()
     },
     paidPlansEnabled () {
       return window.config.paid_plans_enabled
@@ -182,9 +197,6 @@ export default {
     isIframe () {
       return window.location !== window.parent.location || window.frameElement
     },
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     userOnboarded () {
       return this.user && this.user.workspaces_count > 0
     },
@@ -196,11 +208,11 @@ export default {
   methods: {
     async logout () {
       // Log out the user.
-      await this.$store.dispatch('auth/logout')
+      await this.authStore.logout()
 
       // Reset store
-      this.$store.dispatch('open/workspaces/resetState')
-      this.$store.dispatch('open/forms/resetState')
+      this.workspacesStore.resetState()
+      this.formsStore.resetState()
 
       // Redirect to login.
       this.$router.push({ name: 'login' })

resources/js/components/WorkspaceDropdown.vue

@@ -41,8 +41,11 @@
 </template>
 
 <script>
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth'
+import { useFormsStore } from '../stores/forms'
+import { useWorkspacesStore } from '../stores/workspaces'
 import Dropdown from './common/Dropdown.vue'
-import { mapGetters, mapState } from 'vuex'
 
 export default {
 
@@ -51,20 +54,26 @@ export default {
     Dropdown
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workspacesStore,
+      user : computed(() => authStore.user),
+      workspaces : computed(() => workspacesStore.content),
+      loading : computed(() => workspacesStore.loading)
+    }
+  },
+
   data: () => ({
     appName: window.config.appName
   }),
 
   computed: {
-    ...mapState({
-      workspaces: state => state['open/workspaces'].content,
-      loading: state => state['open/workspaces'].loading
-    }),
-    ...mapGetters({
-      user: 'auth/user'
-    }),
     workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent()
     }
   },
 
@@ -76,12 +85,12 @@ export default {
 
   methods: {
     switchWorkspace (workspace) {
-      this.$store.commit('open/workspaces/setCurrentId', workspace.id)
+      this.workspacesStore.setCurrentId(workspace.id)
       this.$refs.dropdown.close()
       if (this.$route.name !== 'home') {
         this.$router.push({ name: 'home' })
       }
-      this.$store.dispatch('open/forms/load', workspace.id)
+      this.formsStore.load(workspace.id)
     },
     isUrl (str) {
       try {

resources/js/components/common/Breadcrumb.vue

@@ -54,7 +54,8 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth';
 
 export default {
   name: 'Breadcrumb',
@@ -66,20 +67,22 @@ export default {
     path: { type: Array }
   },
 
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check)
+    }
+  },
+
   data () {
     return {
       displayHome: true
     }
   },
 
-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check'
-    })
-  },
+  computed: {},
 
-  mounted () {
-  },
+  mounted () {},
 
   methods: {}
 }

resources/js/components/common/ProTag.vue

@@ -37,15 +37,26 @@
 </template>
 
 <script>
+import { computed } from 'vue'
 import Modal from '../Modal.vue'
-import {mapGetters} from 'vuex'
+import { useAuthStore } from '../../stores/auth';
+import { useWorkspacesStore } from '../../stores/workspaces';
 import PricingTable from "../pages/pricing/PricingTable.vue";
 
 export default {
   name: 'ProTag',
   components: {PricingTable, Modal},
   props: {},
 
+  setup () {
+    const authStore = useAuthStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      user : computed(() => authStore.user),
+      currentWorkSpace : computed(() => workspacesStore.getCurrent())
+    }
+  },
+
   data() {
     return {
       showPremiumModal: false,
@@ -54,10 +65,6 @@ export default {
   },
 
   computed: {
-    ...mapGetters({
-      user: 'auth/user',
-      currentWorkSpace: 'open/workspaces/getCurrent',
-    }),
     shouldDisplayProTag() {
       if (!window.config.paid_plans_enabled) return false
       if (!this.user || !this.currentWorkSpace) return true

resources/js/components/forms/PhoneInput.vue

@@ -11,7 +11,7 @@
                 :data="countries"
                 :disabled="disabled || countries.length===1" :searchable="true" :search-keys="['name']" :option-key="'code'" :color="color"
                 :has-error="hasValidation && form.errors.has(name)"
-                :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @input="onChangeCountryCode"
+                :placeholder="'Select a country'" :uppercase-labels="true" :theme="theme" @update:model-value="onChangeCountryCode"
       >
         <template #option="props">
           <div class="flex items-center space-x-2 hover:text-white">
@@ -29,7 +29,7 @@
       </v-select>
       <input v-model="inputVal" type="text" class="inline-flex-grow !border-l-0 !rounded-l-none" :disabled="disabled"
             :class="[theme.default.input, { '!ring-red-500 !ring-2': hasValidation && form.errors.has(name), '!cursor-not-allowed !bg-gray-200': disabled }]"
-            :placeholder="placeholder" :style="inputStyle" @input="onInput"
+            :placeholder="placeholder" :style="inputStyle" @update:model-value="onInput"
       >
     </div>
 

resources/js/components/forms/components/InputWrapper.vue

@@ -22,7 +22,7 @@
       </input-help>
     </slot>
     <slot name="error">
-      <has-error v-if="hasValidation" :form="form" :field="name" />
+      <has-error v-if="hasValidation && form" :form="form" :field="name" />
     </slot>
   </div>
 </template>