Vue3: migrating from vuex to Pinia (#249)

* Vue3: migrating from vuex to Pinia * toggle input fixes * update configureCompat --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io>
2023-12-01 23:27:14 +05:30
parent af30067eda
commit 47653ebe64
105 changed files with 2092 additions and 1577 deletions
--- a/resources/js/pages/ai-form-builder.vue
+++ b/resources/js/pages/ai-form-builder.vue
@@ -476,7 +476,8 @@
 </template>

 <script>
-import {mapGetters} from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth'
 import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
 import SeoMeta from '../mixins/seo-meta.js'

@@ -484,6 +485,14 @@ export default {
  components: {OpenFormFooter},
  layout: 'default',
  mixins: [SeoMeta],
+
+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check),
+    }
+  },
+
  data: () => ({
    title: window.config.appName,
    metaTitle: 'AI form builder for free',
@@ -494,9 +503,6 @@ export default {
  methods: {},

  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check'
-    }),
    configLinks: () => window.config.links
  }
 }
--- a/resources/js/pages/auth/components/LoginForm.vue
+++ b/resources/js/pages/auth/components/LoginForm.vue
@@ -41,8 +41,10 @@
 </template>

 <script>
+import { computed } from 'vue'
 import Form from 'vform'
 import Cookies from 'js-cookie'
+import { useAuthStore } from '../../../stores/auth'
 import OpenFormFooter from '../../../components/pages/OpenFormFooter.vue'
 import Testimonials from '../../../components/pages/welcome/Testimonials.vue'
 import ForgotPasswordModal from '../ForgotPasswordModal.vue'
@@ -62,6 +64,13 @@ export default {
    }
  },

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
  data: () => ({
    form: new Form({
      email: '',
@@ -77,13 +86,10 @@ export default {
      const { data } = await this.form.post('/api/login')

      // Save the token.
-      this.$store.dispatch('auth/saveToken', {
-        token: data.token,
-        remember: this.remember
-      })
+      this.authStore.saveToken(data.token, this.remember)

      // Fetch the user.
-      await this.$store.dispatch('auth/fetchUser')
+      await this.authStore.fetchUser()

      // Redirect home.
      this.redirect()
--- a/resources/js/pages/auth/components/RegisterForm.vue
+++ b/resources/js/pages/auth/components/RegisterForm.vue
@@ -48,7 +48,9 @@
 </template>

 <script>
+import { computed } from 'vue'
 import Form from 'vform'
+import { useAuthStore } from '../../../stores/auth'
 import { initCrisp } from '../../../middleware/check-auth.js'

 export default {
@@ -62,6 +64,13 @@ export default {
    }
  },

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
  data: () => ({
    form: new Form({
      name: '',
@@ -112,10 +121,10 @@ export default {
        const { data: { token } } = await this.form.post('/api/login')

        // Save the token.
-        this.$store.dispatch('auth/saveToken', { token })
+        this.authStore.saveToken(token)

        // Update the user.
-        await this.$store.dispatch('auth/updateUser', { user: data })
+        await this.authStore.updateUser(data)

        // Track event
        this.$logEvent('register', { source: this.form.hear_about_us })
--- a/resources/js/pages/forms/create-guest.vue
+++ b/resources/js/pages/forms/create-guest.vue
@@ -24,18 +24,21 @@
 </template>

 <script>
-import store from '~/store'
+import { computed } from 'vue'
 import Form from 'vform'
-import { mapState, mapActions } from 'vuex'
+import { useTemplatesStore } from '../../stores/templates'
+import { useWorkingFormStore } from '../../stores/working_form'
+import { useWorkspacesStore } from '../../stores/workspaces'
 import QuickRegister from '../auth/components/QuickRegister.vue'
 import initForm from '../../mixins/form_editor/initForm.js'
 import SeoMeta from '../../mixins/seo-meta.js'
 import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'

 const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
+  const templatesStore = useTemplatesStore()
+  templatesStore.startLoading()
+  templatesStore.loadIfEmpty().then(() => {
+    templatesStore.stopLoading()
  })
 }

@@ -45,13 +48,25 @@ export default {
    QuickRegister, CreateFormBaseModal
  },
  mixins: [initForm, SeoMeta],
+  middleware: 'guest',

  beforeRouteEnter (to, from, next) {
    loadTemplates()
    next()
  },

-  middleware: 'guest',
+  setup () {
+    const templatesStore = useTemplatesStore()
+    const workingFormStore = useWorkingFormStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      templatesStore,
+      workingFormStore,
+      workspacesStore,
+      workspaces : computed(() => workspacesStore.content),
+      workspacesLoading : computed(() => workspacesStore.loading)
+    }
+  },

  data () {
    return {
@@ -66,21 +81,17 @@ export default {
  },

  computed: {
-    ...mapState({
-      workspaces: state => state['open/workspaces'].content,
-      workspacesLoading: state => state['open/workspaces'].loading
-    }),
    form: {
      get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
      },
      /* We add a setter */
      set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
      }
    },
    workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent()
    }
  },

@@ -100,12 +111,12 @@ export default {
      is_enterprise: false,
      is_pro: false
    }
-    this.$store.commit('open/workspaces/set', [guestWorkspace])
-    this.$store.commit('open/workspaces/setCurrentId', guestWorkspace.id)
+    this.workspacesStore.set([guestWorkspace])
+    this.workspacesStore.setCurrentId(guestWorkspace.id)

    this.initForm()
    if (this.$route.query.template !== undefined && this.$route.query.template) {
-      const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
+      const template = this.templatesStore.getBySlug(this.$route.query.template)
      if (template && template.structure) {
        this.form = new Form({ ...this.form.data(), ...template.structure })
      }
@@ -121,16 +132,13 @@ export default {
  unmounted () {},

  methods: {
-    ...mapActions({
-      loadWorkspaces: 'open/workspaces/load'
-    }),
    openRegister () {
      this.registerModal = true
    },
    afterLogin () {
      this.registerModal = false
      this.isGuest = false
-      this.loadWorkspaces()
+      this.workspacesStore.load()
      setTimeout(() => {
        if (this.$refs.editor) {
          this.$refs.editor.saveFormCreate()
--- a/resources/js/pages/forms/create.vue
+++ b/resources/js/pages/forms/create.vue
@@ -19,17 +19,21 @@
 </template>

 <script>
-import store from '~/store'
 import Form from 'vform'
-import { mapState, mapActions } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import { useTemplatesStore } from '../../stores/templates'
+import { useWorkingFormStore } from '../../stores/working_form'
+import { useWorkspacesStore } from '../../stores/workspaces'
 import initForm from '../../mixins/form_editor/initForm.js'
 import SeoMeta from '../../mixins/seo-meta.js'
 import CreateFormBaseModal from '../../components/pages/forms/create/CreateFormBaseModal.vue'

 const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
+  const templatesStore = useTemplatesStore()
+  templatesStore.startLoading()
+  templatesStore.loadIfEmpty().then(() => {
+    templatesStore.stopLoading()
  })
 }

@@ -38,6 +42,7 @@ export default {
  components: { CreateFormBaseModal },

  mixins: [initForm, SeoMeta],
+  middleware: 'auth',

  beforeRouteEnter (to, from, next) {
    loadTemplates()
@@ -54,7 +59,20 @@ export default {
    next()
  },

-  middleware: 'auth',
+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    const workingFormStore = useWorkingFormStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      templatesStore,
+      workingFormStore,
+      workspacesStore,
+      user: computed(() => authStore.user),
+      workspaces : computed(() => workspacesStore.content),
+      workspacesLoading : computed(() => workspacesStore.loading)
+    }
+  },

  data () {
    return {
@@ -68,22 +86,17 @@ export default {
  },

  computed: {
-    ...mapState({
-      workspaces: state => state['open/workspaces'].content,
-      workspacesLoading: state => state['open/workspaces'].loading,
-      user: state => state.auth.user
-    }),
    form: {
      get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
      },
      /* We add a setter */
      set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
      }
    },
    workspace () {
-      return this.$store.getters['open/workspaces/getCurrent']()
+      return this.workspacesStore.getCurrent()
    }
  },

@@ -108,7 +121,7 @@ export default {
    this.initForm()
    this.formInitialHash = this.hashString(JSON.stringify(this.form.data()))
    if (this.$route.query.template !== undefined && this.$route.query.template) {
-      const template = this.$store.getters['open/templates/getBySlug'](this.$route.query.template)
+      const template = this.templatesStore.getBySlug(this.$route.query.template)
      if (template && template.structure) {
        this.form = new Form({ ...this.form.data(), ...template.structure })
      }
@@ -117,7 +130,7 @@ export default {
      this.showInitialFormModal = true
    }
    this.closeAlert()
-    this.loadWorkspaces()
+    this.workspacesStore.loadIfEmpty()

    this.stateReady = this.user !== null
  },
@@ -126,9 +139,6 @@ export default {
  unmounted () {},

  methods: {
-    ...mapActions({
-      loadWorkspaces: 'open/workspaces/loadIfEmpty'
-    }),
    formGenerated (form) {
      this.form = new Form({ ...this.form.data(), ...form })
    },
--- a/resources/js/pages/forms/edit.vue
+++ b/resources/js/pages/forms/edit.vue
@@ -14,17 +14,20 @@
 </template>

 <script>
-import axios from 'axios'
-import store from '~/store'
-import Breadcrumb from '../../components/common/Breadcrumb.vue'
+import { computed } from 'vue'
 import Form from 'vform'
-import { mapState } from 'vuex'
+import { useFormsStore } from '../../stores/forms'
+import { useWorkingFormStore } from '../../stores/working_form'
+import { useWorkspacesStore } from '../../stores/workspaces'
+import Breadcrumb from '../../components/common/Breadcrumb.vue'
 import SeoMeta from '../../mixins/seo-meta.js'

 const loadForms = function () {
-  store.commit('open/forms/startLoading')
-  store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/load', store.state['open/workspaces'].currentId)
+  const formsStore = useFormsStore()
+  const workspacesStore = useWorkspacesStore()
+  formsStore.startLoading()
+  workspacesStore.loadIfEmpty().then(() => {
+    formsStore.load(workspacesStore.currentId)
  })
 }

@@ -32,12 +35,15 @@ export default {
  name: 'EditForm',
  components: { Breadcrumb },
  mixins: [SeoMeta],
+  middleware: 'auth',

  beforeRouteEnter (to, from, next) {
-    if (!store.getters['open/forms/getBySlug'](to.params.slug)) {
+    const formsStore = useFormsStore()
+    const workingFormStore = useWorkingFormStore()
+    if (!formsStore.getBySlug(to.params.slug)) {
      loadForms()
    }
-    store.commit('open/working_form/set', null) // Reset old working form
+    workingFormStore.set(null)  // Reset old working form
    next()
  },

@@ -51,7 +57,17 @@ export default {
    next()
  },

-  middleware: 'auth',
+  setup () {
+    const formsStore = useFormsStore()
+    const workingFormStore = useWorkingFormStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workingFormStore,
+      workspacesStore,
+      formsLoading : computed(() => formsStore.loading)
+    }
+  },

  data () {
    return {
@@ -62,20 +78,17 @@ export default {
  },

  computed: {
-    ...mapState({
-      formsLoading: state => state['open/forms'].loading
-    }),
    updatedForm: {
      get () {
-        return this.$store.state['open/working_form'].content
+        return this.workingFormStore.content
      },
      /* We add a setter */
      set (value) {
-        this.$store.commit('open/working_form/set', value)
+        this.workingFormStore.set(value)
      }
    },
    form () {
-      return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
+      return this.formsStore.getBySlug(this.$route.params.slug)
    },
    pageLoaded () {
      return !this.loading && this.updatedForm !== null
--- a/resources/js/pages/forms/show-public.vue
+++ b/resources/js/pages/forms/show-public.vue
@@ -50,8 +50,9 @@

 <script>
 import axios from 'axios'
-import store from '~/store'
-import { mapState } from 'vuex'
+import { computed } from 'vue'
+import { useFormsStore } from '../../stores/forms'
+import { useRecordsStore } from '../../stores/records'
 import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
 import Cookies from 'js-cookie'
 import sha256 from 'js-sha256'
@@ -93,11 +94,12 @@ function handleTransparentMode (form) {
 }

 function loadForm (slug) {
-  if (store.state['open/forms'].loading) return
-  store.commit('open/forms/startLoading')
+  const formsStore = useFormsStore()
+  if (formsStore.loading) return
+  formsStore.startLoading()
  return axios.get('/api/forms/' + slug).then((response) => {
    const form = response.data
-    store.commit('open/forms/set', [response.data])
+    formsStore.set([response.data])

    // Custom code injection
    if (form.custom_code) {
@@ -108,9 +110,9 @@ function loadForm (slug) {
    handleDarkMode(form)
    handleTransparentMode(form)

-    store.commit('open/forms/stopLoading')
+    formsStore.stopLoading()
  }).catch(() => {
-    store.commit('open/forms/stopLoading')
+    formsStore.stopLoading()
  })
 }

@@ -132,6 +134,17 @@ export default {
    next()
  },

+  setup () {
+    const formsStore = useFormsStore()
+    const recordsStore = useRecordsStore()
+    return {
+      formsStore,
+      forms : computed(() => formsStore.content),
+      formLoading : computed(() => formsStore.loading),
+      recordLoading : computed(() => recordsStore.loading)
+    }
+  },
+
  data () {
    return {
      submitted: false
@@ -166,16 +179,11 @@ export default {
  },

  computed: {
-    ...mapState({
-      forms: state => state['open/forms'].content,
-      formLoading: state => state['open/forms'].loading,
-      recordLoading: state => state['open/records'].loading
-    }),
    formSlug () {
      return this.$route.params.slug
    },
    form () {
-      return this.$store.getters['open/forms/getBySlug'](this.formSlug)
+      return this.formsStore.getBySlug(this.formSlug)
    },
    isIframe () {
      return window.location !== window.parent.location || window.frameElement
--- a/resources/js/pages/forms/show/index.vue
+++ b/resources/js/pages/forms/show/index.vue
@@ -116,10 +116,12 @@
 </template>

 <script>
-import axios from 'axios'
-import store from '~/store'
+import { computed } from 'vue'
 import Form from 'vform'
-import {mapGetters, mapState} from 'vuex'
+import { useAuthStore } from '../../../stores/auth'
+import { useFormsStore } from '../../../stores/forms'
+import { useWorkingFormStore } from '../../../stores/working_form'
+import { useWorkspacesStore } from '../../../stores/workspaces'
 import ProTag from '../../../components/common/ProTag.vue'
 import VButton from "../../../components/common/Button.vue";
 import ExtraMenu from '../../../components/pages/forms/show/ExtraMenu.vue'
@@ -127,9 +129,11 @@ import SeoMeta from '../../../mixins/seo-meta.js'
 import FormCleanings from '../../../components/pages/forms/show/FormCleanings.vue'

 const loadForms = function () {
-  store.commit('open/forms/startLoading')
-  store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
+  const formsStore = useFormsStore()
+  const workspacesStore = useWorkspacesStore()
+  formsStore.startLoading()
+  workspacesStore.loadIfEmpty().then(() => {
+    formsStore.loadIfEmpty(workspacesStore.currentId)
  })
 }

@@ -154,6 +158,21 @@ export default {
  },
  middleware: 'auth',

+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workingFormStore = useWorkingFormStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workingFormStore,
+      workspacesStore,
+      user : computed(() => authStore.user),
+      formsLoading : computed(() => formsStore.loading),
+      workspacesLoading : computed(() => workspacesStore.loading)
+    }
+  },
+
  data() {
    return {
      metaTitle: 'Home',
@@ -175,27 +194,21 @@ export default {
  },

  computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
-    ...mapState({
-      formsLoading: state => state['open/forms'].loading,
-      workspacesLoading: state => state['open/workspaces'].loading
-    }),
    workingForm: {
-      get() {
-        return this.$store.state['open/working_form'].content
+      get () {
+        return this.workingFormStore.content
      },
-      set(value) {
-        this.$store.commit('open/working_form/set', value)
+      /* We add a setter */
+      set (value) {
+        this.workingFormStore.set(value)
      }
    },
    workspace() {
      if (!this.form) return null
-      return this.$store.getters['open/workspaces/getById'](this.form.workspace_id)
+      return this.workspacesStore.getById(this.form.workspace_id)
    },
    form() {
-      return this.$store.getters['open/forms/getBySlug'](this.$route.params.slug)
+      return this.formsStore.getBySlug(this.$route.params.slug)
    },
    formEndpoint: () => '/api/open/forms/{id}',
    loading() {
--- a/resources/js/pages/home.vue
+++ b/resources/js/pages/home.vue
@@ -104,8 +104,10 @@
 </template>

 <script>
-import store from '~/store'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth';
+import { useFormsStore } from '../stores/forms';
+import { useWorkspacesStore } from '../stores/workspaces';
 import Fuse from 'fuse.js'
 import Form from 'vform'
 import TextInput from '../components/forms/TextInput.vue'
@@ -113,9 +115,11 @@ import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
 import ExtraMenu from '../components/pages/forms/show/ExtraMenu.vue'

 const loadForms = function () {
-  store.commit('open/forms/startLoading')
-  store.dispatch('open/workspaces/loadIfEmpty').then(() => {
-    store.dispatch('open/forms/loadIfEmpty', store.state['open/workspaces'].currentId)
+  const formsStore = useFormsStore()
+  const workspacesStore = useWorkspacesStore()
+  formsStore.startLoading()
+  workspacesStore.loadIfEmpty().then(() => {
+    formsStore.loadIfEmpty(workspacesStore.currentId)
  })
 }

@@ -133,6 +137,19 @@ export default {
    metaDescription: { type: String, default: 'All of your OpnForm are here. Create new forms, or update your existing one!' }
  },

+  setup () {
+    const authStore = useAuthStore()
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workspacesStore,
+      user : computed(() => authStore.user),
+      forms : computed(() => formsStore.content),
+      formsLoading : computed(() => formsStore.loading)
+    }
+  },
+
  data () {
    return {
      showEditFormModal: false,
@@ -165,19 +182,12 @@ export default {
  },

  computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
-    ...mapState({
-      forms: state => state['open/forms'].content,
-      formsLoading: state => state['open/forms'].loading
-    }),
    isFilteringForms () {
      return (this.searchForm.search !== '' && this.searchForm.search !== null) || this.selectedTags.length > 0
    },
    enrichedForms () {
      let enrichedForms = this.forms.map((form) => {
-        form.workspace = this.$store.getters['open/workspaces/getById'](form.workspace_id)
+        form.workspace = this.workspacesStore.getById(form.workspace_id)
        return form
      })

@@ -206,7 +216,7 @@ export default {
      })
    },
    allTags () {
-      return this.$store.getters['open/forms/getAllTags']
+      return this.formsStore.getAllTags
    }
  }
 }
--- a/resources/js/pages/pricing.vue
+++ b/resources/js/pages/pricing.vue
@@ -236,14 +236,14 @@
 </template>

 <script>
-import {mapGetters} from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth';
 import OpenFormFooter from '../components/pages/OpenFormFooter.vue'
 import PricingTable from '../components/pages/pricing/PricingTable.vue'
 import SeoMeta from '../mixins/seo-meta.js'

 export default {
  components: {OpenFormFooter, PricingTable},
-
  mixins: [SeoMeta],
  layout: 'default',

@@ -257,20 +257,23 @@ export default {
    next()
  },

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user),
+      authenticated : computed(() => authStore.check)
+    }
+  },
+
  data: () => ({
    metaTitle: 'Pricing',
    metaDescription: 'All of our core features are free, and there is no quantity limit. You can also created more advanced and customized forms with OpnForms Pro.',
  }),

-  mounted() {
-  },
+  mounted() {},
+
+  computed: {},

-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    })
-  },
  methods: {
    contactUs() {
      window.$crisp.push(['do', 'chat:show'])
--- a/resources/js/pages/settings/account.vue
+++ b/resources/js/pages/settings/account.vue
@@ -18,12 +18,20 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
+import { useAuthStore } from '../../stores/auth'
 import SeoMeta from '../../mixins/seo-meta.js'

 export default {
  scrollToTop: false,
  mixins: [SeoMeta],

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore
+    }
+  },
+
  data: () => ({
    metaTitle: 'Account',
    form: new Form({
@@ -39,7 +47,7 @@ export default {
        this.loading = false
        this.alertSuccess(response.data.message)
        // Log out the user.
-        await this.$store.dispatch('auth/logout')
+        await this.authStore.logout()

        // Redirect to login.
        this.$router.push({ name: 'login' })
--- a/resources/js/pages/settings/admin.vue
+++ b/resources/js/pages/settings/admin.vue
@@ -37,6 +37,8 @@
 <script>
 import Form from 'vform'
 import axios from 'axios'
+import { useAuthStore } from '../../stores/auth'
+import { useWorkspacesStore } from '../../stores/workspaces'
 import SeoMeta from '../../mixins/seo-meta.js'

 export default {
@@ -45,6 +47,15 @@ export default {
  scrollToTop: false,
  mixins: [SeoMeta],

+  setup () {
+    const authStore = useAuthStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      authStore,
+      workspacesStore
+    }
+  },
+
  data: () => ({
    metaTitle: 'Admin',
    form: new Form({
@@ -56,21 +67,18 @@ export default {
  methods: {
    async impersonate () {
      this.loading = true
-      this.$store.commit('auth/startImpersonating')
+      this.authStore.startImpersonating()
      axios.get('/api/admin/impersonate/' + encodeURI(this.form.identifier)).then(async (response) => {
        this.loading = false

        // Save the token.
-        this.$store.dispatch('auth/saveToken', {
-          token: response.data.token,
-          remember: false
-        })
+        this.authStore.saveToken(response.data.token, false)

        // Fetch the user.
-        await this.$store.dispatch('auth/fetchUser')
+        await this.authStore.fetchUser()

        // Redirect to the dashboard.
-        this.$store.commit('open/workspaces/set', [])
+        this.workspacesStore.set([])
        this.$router.push({ name: 'home' })
      }).catch((error) => {
        this.alertError(error.response.data.message)
--- a/resources/js/pages/settings/billing.vue
+++ b/resources/js/pages/settings/billing.vue
@@ -21,9 +21,10 @@

 <script>
 import axios from 'axios'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import VButton from '../../components/common/Button.vue'
 import SeoMeta from '../../mixins/seo-meta.js'
-import { mapGetters } from 'vuex'
 import AppSumoBilling from '../../components/vendor/appsumo/AppSumoBilling.vue'

 export default {
@@ -31,6 +32,13 @@ export default {
  mixins: [SeoMeta],
  scrollToTop: false,

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
  data: () => ({
    metaTitle: 'Billing',
    billingLoading: false
@@ -50,10 +58,6 @@ export default {
    }
  },

-  computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    })
-  }
+  computed: {}
 }
 </script>
--- a/resources/js/pages/settings/index.vue
+++ b/resources/js/pages/settings/index.vue
@@ -38,20 +38,25 @@
 </template>

 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'

 export default {
  middleware: 'auth',

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      user : computed(() => authStore.user)
+    }
+  },
+
  data () {
    return {
    }
  },

  computed: {
-    ...mapGetters({
-      user: 'auth/user'
-    }),
    tabsList () {
      const tabs = [
        {
--- a/resources/js/pages/settings/profile.vue
+++ b/resources/js/pages/settings/profile.vue
@@ -24,13 +24,22 @@

 <script>
 import Form from 'vform'
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import SeoMeta from '../../mixins/seo-meta.js'

 export default {
  mixins: [SeoMeta],
  scrollToTop: false,

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore,
+      user : computed(() => authStore.user)
+    }
+  },
+
  data: () => ({
    metaTitle: 'Profile',
    form: new Form({
@@ -39,10 +48,6 @@ export default {
    })
  }),

-  computed: mapGetters({
-    user: 'auth/user'
-  }),
-
  created () {
    // Fill the form with user data.
    this.form.keys().forEach(key => {
@@ -54,7 +59,7 @@ export default {
    async update () {
      const { data } = await this.form.patch('/api/settings/profile')

-      this.$store.dispatch('auth/updateUser', { user: data })
+      this.authStore.updateUser(data)
    }
  }
 }
--- a/resources/js/pages/settings/workspace.vue
+++ b/resources/js/pages/settings/workspace.vue
@@ -73,8 +73,10 @@
 </template>

 <script>
+import { computed } from 'vue'
 import Form from 'vform'
-import {mapActions, mapState} from 'vuex'
+import { useFormsStore } from '../../stores/forms'
+import { useWorkspacesStore } from '../../stores/workspaces'
 import SeoMeta from '../../mixins/seo-meta.js'

 export default {
@@ -82,6 +84,17 @@ export default {
  scrollToTop: false,
  mixins: [SeoMeta],

+  setup () {
+    const formsStore = useFormsStore()
+    const workspacesStore = useWorkspacesStore()
+    return {
+      formsStore,
+      workspacesStore,
+      workspaces: computed(() => workspacesStore.content),
+      loading: computed(() => workspacesStore.loading)
+    }
+  },
+
  data: () => ({
    metaTitle: 'Workspaces',
    form: new Form({
@@ -92,28 +105,20 @@ export default {
  }),

  mounted() {
-    this.loadWorkspaces()
+    this.workspacesStore.loadIfEmpty()
  },

-  computed: {
-    ...mapState({
-      workspaces: state => state['open/workspaces'].content,
-      loading: state => state['open/workspaces'].loading
-    })
-  },
+  computed: {},

  methods: {
-    ...mapActions({
-      loadWorkspaces: 'open/workspaces/loadIfEmpty'
-    }),
    switchWorkspace(workspace) {
-      this.$store.commit('open/workspaces/setCurrentId', workspace.id)
+      this.workspacesStore.setCurrentId(workspace.id)
      this.$router.push({name: 'home'})
-      this.$store.dispatch('open/forms/load', workspace.id)
+      this.formsStore.load(workspace.id)
    },
    deleteWorkspace(workspace) {
      this.alertConfirm('Do you really want to delete this workspace? All forms created in this workspace will be removed.', () => {
-        this.$store.dispatch('open/workspaces/delete', workspace.id).then(() => {
+        this.workspacesStore.delete(workspace.id).then(() => {
          this.alertSuccess('Workspace successfully removed.')
        })
      })
@@ -129,7 +134,7 @@ export default {
    },
    async createWorkspace() {
      const {data} = await this.form.post('/api/open/workspaces/create')
-      this.$store.dispatch('open/workspaces/load')
+      this.workspacesStore.load()
      this.workspaceModal = false
    }
  }
--- a/resources/js/pages/subscriptions/error.vue
+++ b/resources/js/pages/subscriptions/error.vue
@@ -1,7 +1,8 @@
 <template />

 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import SeoMeta from '../../mixins/seo-meta.js'

 export default {
@@ -10,6 +11,13 @@ export default {
  middleware: 'auth',
  mixins: [SeoMeta],

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check),
+    }
+  },
+
  data: () => ({
    metaTitle: 'Error',
  }),
@@ -19,10 +27,6 @@ export default {
    this.alertError('Unfortunately we could not confirm your subscription. Please try again and contact us if the issue persists.')
  },

-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check'
-    })
-  }
+  computed: {}
 }
 </script>
--- a/resources/js/pages/subscriptions/success.vue
+++ b/resources/js/pages/subscriptions/success.vue
@@ -16,7 +16,8 @@
 </template>

 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import SeoMeta from '../../mixins/seo-meta.js'

@@ -26,6 +27,15 @@ export default {
  layout: 'default',
  middleware: 'auth',

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authStore,
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user)
+    }
+  },
+
  data: () => ({
    metaTitle: 'Subscription Success',
    interval: null
@@ -43,7 +53,7 @@ export default {
  methods: {
    async checkSubscription () {
      // Fetch the user.
-      await this.$store.dispatch('auth/fetchUser')
+      await this.authStore.fetchUser()
      this.redirectIfSubscribed()
    },
    redirectIfSubscribed () {
@@ -63,11 +73,6 @@ export default {
    }
  },

-  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    })
-  }
+  computed: {}
 }
 </script>
--- a/resources/js/pages/templates/industries-show.vue
+++ b/resources/js/pages/templates/industries-show.vue
@@ -93,19 +93,21 @@
 </template>

 <script>
-import store from '~/store'
 import Form from 'vform'
 import Fuse from 'fuse.js'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import { useTemplatesStore } from '../../stores/templates'
 import SeoMeta from '../../mixins/seo-meta.js'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import Breadcrumb from '../../components/common/Breadcrumb.vue'
 import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'

 const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
+  const templatesStore = useTemplatesStore()
+  templatesStore.startLoading()
+  templatesStore.loadIfEmpty().then(() => {
+    templatesStore.stopLoading()
  })
 }

@@ -118,6 +120,20 @@ export default {
    next()
  },

+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      authStore,
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user),
+      templates : computed(() => templatesStore.content),
+      templatesLoading : computed(() => templatesStore.loading),
+      industries : computed(() => templatesStore.industries),
+      types : computed(() => templatesStore.types)
+    }
+  },
+
  data () {
    return {
      selectedType: 'all',
@@ -130,16 +146,6 @@ export default {
  mounted () {},

  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    }),
-    ...mapState({
-      templates: state => state['open/templates'].content,
-      templatesLoading: state => state['open/templates'].loading,
-      industries: state => state['open/templates'].industries,
-      types: state => state['open/templates'].types
-    }),
    breadcrumbs () {
      if (!this.industry) {
        return [{ route: { name: 'templates' }, label: 'Templates' }]
--- a/resources/js/pages/templates/show.vue
+++ b/resources/js/pages/templates/show.vue
@@ -196,9 +196,10 @@
 </template>

 <script>
-import store from '~/store'
 import Form from 'vform'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import { useTemplatesStore } from '../../stores/templates'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import OpenCompleteForm from '../../components/open/forms/OpenCompleteForm.vue'
 import Breadcrumb from '../../components/common/Breadcrumb.vue'
@@ -213,21 +214,32 @@ export default {
  mixins: [SeoMeta],

  beforeRouteEnter (to, from, next) {
+    const templatesStore = useTemplatesStore()
    if (to.params?.slug) {
-      store.dispatch('open/templates/loadTemplate', to.params?.slug)
-      store.dispatch('open/templates/loadTypesAndIndustries')
+      templatesStore.loadTemplate(to.params?.slug)
+      templatesStore.loadTypesAndIndustries()
    }
    next()
  },

+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      templatesStore,
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user),
+      templatesLoading : computed(() => templatesStore.loading)
+    }
+  },
+
  data () {
    return {
      showFormTemplateModal: false
    }
  },

-  mounted () {
-  },
+  mounted () {},

  methods: {
    cleanQuotes (str) {
@@ -247,13 +259,6 @@ export default {
  },

  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    }),
-    ...mapState({
-      templatesLoading: state => state['open/templates'].loading
-    }),
    breadcrumbs () {
      if (!this.template) {
        return [{ route: { name: 'templates' }, label: 'Templates' }]
@@ -261,7 +266,7 @@ export default {
      return [{ route: { name: 'templates' }, label: 'Templates' }, { label: this.template.name }]
    },
    template () {
-      return this.$store.getters['open/templates/getBySlug'](this.$route.params.slug)
+      return this.templatesStore.getBySlug(this.$route.params.slug)
    },
    form () {
      return this.template ? new Form(this.template.structure) : null
--- a/resources/js/pages/templates/types-show.vue
+++ b/resources/js/pages/templates/types-show.vue
@@ -93,19 +93,21 @@
 </template>

 <script>
-import store from '~/store'
 import Form from 'vform'
 import Fuse from 'fuse.js'
-import { mapGetters, mapState } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../../stores/auth'
+import { useTemplatesStore } from '../../stores/templates'
 import SeoMeta from '../../mixins/seo-meta.js'
 import OpenFormFooter from '../../components/pages/OpenFormFooter.vue'
 import Breadcrumb from '../../components/common/Breadcrumb.vue'
 import SingleTemplate from '../../components/pages/templates/SingleTemplate.vue'

 const loadTemplates = function () {
-  store.commit('open/templates/startLoading')
-  store.dispatch('open/templates/loadIfEmpty').then(() => {
-    store.commit('open/templates/stopLoading')
+  const templatesStore = useTemplatesStore()
+  templatesStore.startLoading()
+  templatesStore.loadIfEmpty().then(() => {
+    templatesStore.stopLoading()
  })
 }

@@ -118,6 +120,19 @@ export default {
    next()
  },

+  setup () {
+    const authStore = useAuthStore()
+    const templatesStore = useTemplatesStore()
+    return {
+      authenticated : computed(() => authStore.check),
+      user : computed(() => authStore.user),
+      templates : computed(() => templatesStore.content),
+      templatesLoading : computed(() => templatesStore.loading),
+      industries : computed(() => templatesStore.industries),
+      types : computed(() => templatesStore.types)
+    }
+  },
+
  data () {
    return {
      selectedIndustry: 'all',
@@ -130,16 +145,6 @@ export default {
  mounted () {},

  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check',
-      user: 'auth/user'
-    }),
-    ...mapState({
-      templates: state => state['open/templates'].content,
-      templatesLoading: state => state['open/templates'].loading,
-      industries: state => state['open/templates'].industries,
-      types: state => state['open/templates'].types
-    }),
    breadcrumbs () {
      if (!this.type) {
        return [{ route: { name: 'templates' }, label: 'Templates' }]
--- a/resources/js/pages/welcome.vue
+++ b/resources/js/pages/welcome.vue
@@ -181,7 +181,8 @@
 </template>

 <script>
-import { mapGetters } from 'vuex'
+import { computed } from 'vue'
+import { useAuthStore } from '../stores/auth'
 import Features from '~/components/pages/welcome/Features.vue'
 import MoreFeatures from '~/components/pages/welcome/MoreFeatures.vue'
 import PricingTable from '../components/pages/pricing/PricingTable.vue'
@@ -193,11 +194,16 @@ import SeoMeta from '../mixins/seo-meta.js'

 export default {
  components: { Testimonials, OpenFormFooter, Features, MoreFeatures, PricingTable, AiFeature, TemplatesSlider },
-
  mixins: [SeoMeta],
-
  layout: 'default',

+  setup () {
+    const authStore = useAuthStore()
+    return {
+      authenticated : computed(() => authStore.check)
+    }
+  },
+
  data: () => ({
    title: window.config.appName,
    metaTitle: 'Create beautiful & open-source forms for free'
@@ -215,9 +221,6 @@ export default {
  },

  computed: {
-    ...mapGetters({
-      authenticated: 'auth/check'
-    }),
    configLinks: () => window.config.links,
    paidPlansEnabled () {
      return window.config.paid_plans_enabled