diff --git a/ProcessMaker/Http/Controllers/Process/ScreenBuilderController.php b/ProcessMaker/Http/Controllers/Process/ScreenBuilderController.php
index c356f4c27b..76727289ef 100644
--- a/ProcessMaker/Http/Controllers/Process/ScreenBuilderController.php
+++ b/ProcessMaker/Http/Controllers/Process/ScreenBuilderController.php
@@ -43,6 +43,7 @@ public function edit(ScreenBuilderManager $manager, Screen $screen, $processId =
 
         return view('processes.screen-builder.screen', [
             'screen' => $screen,
+            'type' => strtoupper($screen->type ?? 'FORM'),
             'manager' => $manager,
             'autoSaveDelay' => config('versions.delay.process', 5000),
             'isVersionsInstalled' => PackageHelper::isPmPackageVersionsInstalled(),
diff --git a/ProcessMaker/Managers/ModelerManager.php b/ProcessMaker/Managers/ModelerManager.php
index e762e3ef23..efd296f7e0 100644
--- a/ProcessMaker/Managers/ModelerManager.php
+++ b/ProcessMaker/Managers/ModelerManager.php
@@ -16,7 +16,7 @@ public function __construct()
     {
         $this->javascriptRegistry = [];
         // Include our default javascript for our core controls
-        $this->addScript(mix('js/processes/modeler/initialLoad.js'));
+        // $this->addScript(mix('js/processes/modeler/initialLoad.js'));
     }
 
     /**
diff --git a/resources/js/admin/auth-clients/index.js b/resources/js/admin/auth-clients/index.js
index aaf7f83cf1..118b786fa0 100644
--- a/resources/js/admin/auth-clients/index.js
+++ b/resources/js/admin/auth-clients/index.js
@@ -1,4 +1,113 @@
 import Vue from "vue";
-import AuthClientsListing from "./components/AuthClientsListing";
+import AuthClientsListing from "./components/AuthClientsListing.vue";
 
 Vue.component("AuthClientsListing", AuthClientsListing);
+
+new Vue({
+  el: "#authClients",
+  data: {
+    authClient: {
+      id: null,
+      name: "",
+      types: [],
+      redirect: "",
+      secret: "",
+    },
+    filter: "",
+    errors: null,
+    disabled: false,
+    title: "",
+    secretTitle: "",
+    customModalButtons: [],
+    secret: "",
+  },
+  beforeMount() {
+    this.initCustomModalButtons();
+    this.resetValues();
+  },
+  methods: {
+    onClose() {
+      this.resetValues();
+    },
+    onSave() {
+      if (this.disabled) {
+        return;
+      }
+      this.disabled = true;
+
+      this.loading = true;
+      let method = "POST";
+      let url = "/oauth/clients";
+      let verb = "created";
+      if (this.authClient.id) {
+        method = "PUT";
+        url = `${url}/${this.authClient.id}`;
+        verb = "saved";
+      }
+      ProcessMaker.apiClient({
+        method,
+        url,
+        baseURL: "/",
+        data: this.authClient,
+      }).then((response) => {
+        this.$refs.createEditAuthClient.hide();
+        this.loading = false;
+        if (response.data.secret) {
+          this.secret = response.data.secret;
+          this.$refs.secretModal.show();
+        } else {
+          this.$refs.authClientList.fetch();
+        }
+        ProcessMaker.alert(`${this.$t("The auth client was ")}${verb}.`, this.$t("success"));
+      }).catch((error) => {
+        this.disabled = false;
+        this.errors = error.response.data.errors;
+      });
+    },
+    resetValues() {
+      this.title = this.$t("Create Auth-Client");
+      this.secretTitle = this.$t("Copy Secret To Clipboard");
+      this.authClient = {
+        id: null,
+        name: "",
+        types: [],
+        redirect: "",
+        secret: "",
+      };
+      this.errors = {
+        name: null,
+        redirect: null,
+        types: null,
+      };
+      this.disabled = false;
+      this.initCustomModalButtons();
+    },
+    edit(item) {
+      this.title = this.$t("Edit Auth Client");
+      this.authClient = item;
+      this.$refs.createEditAuthClient.show();
+    },
+    initCustomModalButtons() {
+      this.customModalButtons = [
+        {
+          content: "Close",
+          action: "close",
+          variant: "secondary",
+          disabled: false,
+          hidden: false,
+        },
+      ];
+    },
+    hideSecretModal() {
+      this.$refs.secretModal.hide();
+      this.$refs.authClientList.fetch();
+    },
+    copySecret(secret) {
+      navigator.clipboard.writeText(secret).then(() => {
+        ProcessMaker.alert(this.$t("Secret copied to clipboard."), "success");
+      }, () => {
+        ProcessMaker.alert(this.$t("Secret not copied to clipboard."), "danger");
+      });
+    },
+  },
+});
diff --git a/resources/js/admin/auth-clients/loaderAuthClients.js b/resources/js/admin/auth-clients/loaderAuthClients.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/admin/auth-clients/loaderAuthClients.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/admin/cssOverride/components/ColorPicker.vue b/resources/js/admin/cssOverride/components/ColorPicker.vue
index e316dedcc9..5914743858 100644
--- a/resources/js/admin/cssOverride/components/ColorPicker.vue
+++ b/resources/js/admin/cssOverride/components/ColorPicker.vue
@@ -10,8 +10,8 @@
 
   import {Sketch} from 'vue-color';
   import { createUniqIdsMixin } from "vue-uniq-ids";
+  import tinycolor from 'tinycolor2';
   const uniqIdsMixin = createUniqIdsMixin();
-  const tinycolor = require("tinycolor2");
 
   export default {
     components: {
diff --git a/resources/js/admin/cssOverride/components/SiteDesign.vue b/resources/js/admin/cssOverride/components/SiteDesign.vue
index 4357c79cf8..a67dcf62ab 100644
--- a/resources/js/admin/cssOverride/components/SiteDesign.vue
+++ b/resources/js/admin/cssOverride/components/SiteDesign.vue
@@ -193,6 +193,9 @@
 
 <script>
 import AddToBundle from '../../../components/shared/AddToBundle.vue';
+// Content iframe CSS must be inlined; parent-page CSS imports do not apply inside the editor iframe.
+import oxideContentCss from 'tinymce/skins/ui/oxide/content.min.css?raw';
+import defaultContentCss from 'tinymce/skins/content/default/content.min.css?raw';
 
 export default {
   components: {
@@ -204,8 +207,9 @@ export default {
       altText: '',
       loginFooter: '',
       editorSettings: {
+        // Toolbar skin is imported in edit.js. Iframe body styles go via content_style / content_css.
         content_css: '/css/app.css',
-        content_style: "body {padding: 10px}",
+        content_style: `${oxideContentCss}\n${defaultContentCss}\nbody { padding: 10px; }`,
         menubar: false,
         plugins: [ 'link', 'lists', 'code' ],
         toolbar: 'code | undo redo | link | styleselect fontsizeselect | bold italic forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
@@ -213,7 +217,7 @@ export default {
         relative_urls: false,
         remove_script_host: false,
       },
-      config: config,
+      config: window.config,
       key: 'css-override',
       fileLogin: {
         file: null,
@@ -394,8 +398,8 @@ export default {
       }
     });
 
-    this.loginFooter = _.get(loginFooterSetting, 'config.html', '');
-    this.altText = altTextSetting;
+    this.loginFooter = _.get(window.loginFooterSetting, 'config.html', '');
+    this.altText = window.altTextSetting;
   },
   methods: {
     placeholder(object, string) {
diff --git a/resources/js/admin/cssOverride/edit.js b/resources/js/admin/cssOverride/edit.js
index b19fefe7a9..f67668f8fb 100644
--- a/resources/js/admin/cssOverride/edit.js
+++ b/resources/js/admin/cssOverride/edit.js
@@ -1,12 +1,16 @@
 import Vue from "vue";
 import Editor from "@tinymce/tinymce-vue";
-import SiteDesign from "./components/SiteDesign";
-import ColorPicker from "./components/ColorPicker";
+import SiteDesign from "./components/SiteDesign.vue";
+import ColorPicker from "./components/ColorPicker.vue";
+import "tinymce/tinymce";
 import "tinymce/themes/silver";
+import "tinymce/icons/default";
 import "tinymce/plugins/link";
 import "tinymce/plugins/lists";
 import "tinymce/plugins/code";
+// skin: false skips TinyMCE's default skin fetch; Vite does not expose node_modules CSS URLs.
+import "tinymce/skins/ui/oxide/skin.min.css";
 
 Vue.component("SiteDesign", SiteDesign);
 Vue.component("ColorPicker", ColorPicker);
-Vue.component("Editor", Editor);
+Vue.component("Editor", Editor);
\ No newline at end of file
diff --git a/resources/js/admin/cssOverride/loaderCssOverride.js b/resources/js/admin/cssOverride/loaderCssOverride.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/admin/cssOverride/loaderCssOverride.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/admin/groups/index.js b/resources/js/admin/groups/index.js
index e263ca925e..980bd4beef 100644
--- a/resources/js/admin/groups/index.js
+++ b/resources/js/admin/groups/index.js
@@ -1,4 +1,71 @@
 import Vue from "vue";
-import GroupsListing from "./components/GroupsListing";
+
+import GroupsListing from "./components/GroupsListing.vue";
 
 Vue.component("GroupsListing", GroupsListing);
+
+new Vue({
+  el: "#listGroups",
+  data() {
+    return {
+      filter: "",
+      formData: {},
+      errors: {
+        name: null,
+        description: null,
+        status: null,
+      },
+      disabled: false,
+    };
+  },
+  mounted() {
+    this.resetFormData();
+    this.resetErrors();
+  },
+  methods: {
+    reload() {
+      this.$refs.groupList.dataManager([
+        {
+          field: "updated_at",
+          direction: "desc",
+        },
+      ]);
+    },
+    onClose() {
+      this.resetFormData();
+      this.resetErrors();
+    },
+    resetFormData() {
+      this.formData = Object.assign({}, {
+        name: null,
+        description: null,
+        status: "ACTIVE",
+      });
+    },
+    resetErrors() {
+      this.errors = Object.assign({}, {
+        name: null,
+        description: null,
+        status: null,
+      });
+    },
+    onSubmit() {
+      this.resetErrors();
+      if (this.disabled) {
+        return;
+      }
+      this.disabled = true;
+      ProcessMaker.apiClient.post("groups", this.formData)
+        .then((response) => {
+          ProcessMaker.alert(this.$t("The group was created."), "success");
+          window.location = `/admin/groups/${response.data.id}/edit`;
+        })
+        .catch((error) => {
+          if (error.response.status && error.response.status === 422) {
+            this.errors = error.response.data.errors;
+          }
+          this.disabled = false;
+        });
+    },
+  },
+});
diff --git a/resources/js/admin/groups/loaderGroups.js b/resources/js/admin/groups/loaderGroups.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/admin/groups/loaderGroups.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/admin/loaderAdmin.js b/resources/js/admin/loaderAdmin.js
new file mode 100644
index 0000000000..f5a9c76e69
--- /dev/null
+++ b/resources/js/admin/loaderAdmin.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/admin/profile/loaderProfile.js b/resources/js/admin/profile/loaderProfile.js
new file mode 100644
index 0000000000..522ba3371f
--- /dev/null
+++ b/resources/js/admin/profile/loaderProfile.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
\ No newline at end of file
diff --git a/resources/js/admin/settings/components/SettingDriverAuthorization.vue b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
index 965a4052d7..3e7f5fc9ef 100644
--- a/resources/js/admin/settings/components/SettingDriverAuthorization.vue
+++ b/resources/js/admin/settings/components/SettingDriverAuthorization.vue
@@ -100,7 +100,8 @@
 </template>
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin, Required } from "SharedComponents";
+import FormErrorsMixin from "../../../components/shared/FormErrorsMixin";
+import Required from "../../../components/shared/Required";
 import settingMixin from "../mixins/setting";
 import AdditionalDriverConnectionProperties from "./AdditionalDriverConnectionProperties.vue";
 import OauthConnectionProperties from "./cdata/OauthConnectionProperties.vue";
diff --git a/resources/js/admin/settings/components/SettingsListing.vue b/resources/js/admin/settings/components/SettingsListing.vue
index 0d489764b3..fd2ae5c596 100644
--- a/resources/js/admin/settings/components/SettingsListing.vue
+++ b/resources/js/admin/settings/components/SettingsListing.vue
@@ -193,7 +193,7 @@
 </template>
 
 <script>
-import { BasicSearch } from "SharedComponents";
+import  BasicSearch  from "../../../components/shared/BasicSearch.vue";
 import isPMQL from "../../../modules/isPMQL";
 import dataLoadingMixin from "../../../components/common/mixins/apiDataLoading";
 import PmqlInput from "../../../components/shared/PmqlInput";
diff --git a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
index 74032c3495..d5ccc6295d 100644
--- a/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/BamboohrConnectionProperties.vue
@@ -59,7 +59,7 @@
 </template>
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
   mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue b/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
index 7599845514..82ed353aa1 100644
--- a/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/DocusignConnectionProperties.vue
@@ -24,7 +24,7 @@
 </template>
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
   mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue b/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
index d80858b488..c78bd5714d 100644
--- a/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/ExcelConnectionProperties.vue
@@ -46,7 +46,7 @@
 
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
   mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/components/cdata/GithubConnectionProperties.vue b/resources/js/admin/settings/components/cdata/GithubConnectionProperties.vue
index f7a48472f2..3e62b6af4c 100644
--- a/resources/js/admin/settings/components/cdata/GithubConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/GithubConnectionProperties.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script>
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
     mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue b/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
index 2e04b5914e..f1feb5a8f0 100644
--- a/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/GmailConnectionProperties.vue
@@ -4,7 +4,7 @@
 
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
   mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
index d8a50e427f..89b45c23ed 100644
--- a/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/OauthConnectionProperties.vue
@@ -102,7 +102,7 @@
 </template>
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
   mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue b/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
index 523630db86..02cfcf40bd 100644
--- a/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/PasswordConnectionProperties.vue
@@ -59,7 +59,7 @@
 </template>
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
   mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue b/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue
index d366edbc09..a93dbe6cae 100644
--- a/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue
+++ b/resources/js/admin/settings/components/cdata/SapHanaConnectionProperties.vue
@@ -82,7 +82,7 @@
 </template>
 <script>
 // eslint-disable-next-line import/no-unresolved
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin  from "../../../../components/shared/FormErrorsMixin";
 
 export default {
   mixins: [FormErrorsMixin],
diff --git a/resources/js/admin/settings/index.js b/resources/js/admin/settings/index.js
index 5b4c4c2d52..8841ac4618 100644
--- a/resources/js/admin/settings/index.js
+++ b/resources/js/admin/settings/index.js
@@ -1,5 +1,6 @@
-import SettingsGroups from "./components/SettingsGroups";
-import SettingsMain from "./components/SettingsMain"
+import Vue from "vue";
+import SettingsGroups from "./components/SettingsGroups.vue";
+import SettingsMain from "./components/SettingsMain.vue";
 
 new Vue({
   el: "#settings",
diff --git a/resources/js/admin/settings/loaderSettings.js b/resources/js/admin/settings/loaderSettings.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/admin/settings/loaderSettings.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/admin/users/components/SecurityLogsListing.vue b/resources/js/admin/users/components/SecurityLogsListing.vue
index 586b585a53..f10f34c116 100644
--- a/resources/js/admin/users/components/SecurityLogsListing.vue
+++ b/resources/js/admin/users/components/SecurityLogsListing.vue
@@ -100,7 +100,7 @@
 </template>
 
 <script>
-import { BasicSearch } from "SharedComponents";
+import BasicSearch from "../../../components/shared/BasicSearch.vue";
 import datatableMixin from "../../../components/common/mixins/datatable";
 import isPMQL from "../../../modules/isPMQL";
 import PmqlInput from "../../../components/shared/PmqlInput";
diff --git a/resources/js/admin/users/edit.js b/resources/js/admin/users/edit.js
index 698f79633d..a9997ad044 100644
--- a/resources/js/admin/users/edit.js
+++ b/resources/js/admin/users/edit.js
@@ -1,8 +1,8 @@
 import Vue from "vue";
 import VuePassword from "vue-password";
-import UserGroupsListing from "./components/UserGroupsListing";
-import UserTokensListing from "./components/UserTokensListing";
-import SecurityLogsListing from "./components/SecurityLogsListing";
+import UserGroupsListing from "./components/UserGroupsListing.vue";
+import UserTokensListing from "./components/UserTokensListing.vue";
+import SecurityLogsListing from "./components/SecurityLogsListing.vue";
 
 Vue.component("VuePassword", VuePassword);
 Vue.component("UserGroupsListing", UserGroupsListing);
diff --git a/resources/js/admin/users/index.js b/resources/js/admin/users/index.js
index b9abdcef3e..2ea79b047f 100644
--- a/resources/js/admin/users/index.js
+++ b/resources/js/admin/users/index.js
@@ -1,11 +1,19 @@
 import Vue from "vue";
 import VuePassword from "vue-password";
-import UsersListing from "./components/UsersListing";
-import AddUserModal from "./components/AddUserModal";
-import DeletedUsersListing from "./components/DeletedUsersListing";
+import UsersListing from "./components/UsersListing.vue";
+import AddUserModal from "./components/AddUserModal.vue";
+import DeletedUsersListing from "./components/DeletedUsersListing.vue";
 
 Vue.component("VuePassword", VuePassword);
 
+window.loadUsers = () => {
+  ProcessMaker.EventBus.$emit("api-data-users", true);
+};
+
+window.loadDeletedUsers = () => {
+  ProcessMaker.EventBus.$emit("api-data-deleted-users", true);
+};
+
 new Vue({
   el: "#users-listing",
   components: { UsersListing, AddUserModal },
@@ -96,7 +104,7 @@ new Vue({
     downloadAllLogs() {
       ProcessMaker.apiClient
         .get("security-logs/download/all?format=csv")
-        .then(response => {
+        .then((response) => {
           window.ProcessMaker.alert(response.data.message, "success");
         });
     },
diff --git a/resources/js/admin/users/loaderUsers.js b/resources/js/admin/users/loaderUsers.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/admin/users/loaderUsers.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/components/common/data-tree-toggle.vue b/resources/js/components/common/data-tree-toggle.vue
index 4d6b00fad8..34d80151f1 100644
--- a/resources/js/components/common/data-tree-toggle.vue
+++ b/resources/js/components/common/data-tree-toggle.vue
@@ -28,8 +28,8 @@ export default {
   },
   data() {
     return {
-      treeViewIcon: require("../../../img/tree_view.svg"),
-      codeViewIcon: require("../../../img/code.svg"),
+      treeViewIcon: "../../../img/tree_view.svg",
+      codeViewIcon: "../../../img/code.svg",
     };
   },
   methods: {
diff --git a/resources/js/components/templates/AssetConfirmationModal.vue b/resources/js/components/templates/AssetConfirmationModal.vue
index 243d76c7ae..7c33975018 100644
--- a/resources/js/components/templates/AssetConfirmationModal.vue
+++ b/resources/js/components/templates/AssetConfirmationModal.vue
@@ -21,7 +21,7 @@
   </template>
 
   <script>
-  import { Modal } from "SharedComponents";
+  import Modal from "../shared/Modal.vue";
 
   export default {
     components: { Modal },
diff --git a/resources/js/components/templates/AssetLoadingModal.vue b/resources/js/components/templates/AssetLoadingModal.vue
index 5031761b63..4d48df49e0 100644
--- a/resources/js/components/templates/AssetLoadingModal.vue
+++ b/resources/js/components/templates/AssetLoadingModal.vue
@@ -32,7 +32,7 @@
 </template>
 
 <script>
-import { Modal } from "SharedComponents";
+import Modal from "../shared/Modal.vue";
 
 export default {
   components: { Modal },
diff --git a/resources/js/initialLoad.js b/resources/js/initialLoad.js
index 696f23034d..5a40d34ef5 100644
--- a/resources/js/initialLoad.js
+++ b/resources/js/initialLoad.js
@@ -1,5 +1,6 @@
 /* eslint-disable func-names */
 // Our initial node types to register with our modeler
+import Vue from "vue";
 import {
   association,
   endEvent,
@@ -51,6 +52,8 @@ import ErrorHandlingRetryAttempts from "./processes/modeler/components/inspector
 import ErrorHandlingRetryWaitTime from "./processes/modeler/components/inspector/ErrorHandlingRetryWaitTime.vue";
 import NotifyProcessManager from "./processes/modeler/components/inspector/NotifyProcessManager.vue";
 
+const ProcessMaker = window.ProcessMaker;
+
 Vue.component("UserSelect", UserSelect);
 Vue.component("UserById", UserById);
 Vue.component("GroupSelect", GroupSelect);
diff --git a/resources/js/next/config/i18n.js b/resources/js/next/config/i18n.js
index 55c7eadd36..446bcd8af0 100644
--- a/resources/js/next/config/i18n.js
+++ b/resources/js/next/config/i18n.js
@@ -4,10 +4,14 @@ import LocalStorageBackend from "i18next-localstorage-backend";
 import XHR from "i18next-xhr-backend";
 import VueI18Next from "@panter/vue-i18next";
 import { setGlobalPMVariables, setUses, getGlobalVariable } from "../globalVariables";
+import translator from "../../modules/lang.js";
 
 export default () => {
   const Vue = getGlobalVariable("Vue");
 
+  // Match Mix bootstrap: Blade/Vue templates use __(msg) in expressions
+  window.__ = translator;
+
   const isProd = document.head.querySelector("meta[name=\"is-prod\"]")?.content === "true";
   let translationsLoaded = false;
 
diff --git a/resources/js/next/libraries/jquery.js b/resources/js/next/libraries/jquery.js
index a11f9d8fa7..6a7a170872 100644
--- a/resources/js/next/libraries/jquery.js
+++ b/resources/js/next/libraries/jquery.js
@@ -1,8 +1,11 @@
-import * as jQuery from "jquery";
+import $ from "jquery";
+
+// Sortable (vue-form-builder) does: (window.jQuery || window.Zepto)(el).clone(true)[0]
+// It must be the jQuery function, not `import * as jQuery` (namespace is truthy but not callable).
+window.$ = $;
+window.jQuery = $;
 
 export default {
   global: {
-    jQuery,
-    $: jQuery,
   },
 };
diff --git a/resources/js/next/setupMain.js b/resources/js/next/setupMain.js
index 32d4d6b011..ecb8a4335c 100644
--- a/resources/js/next/setupMain.js
+++ b/resources/js/next/setupMain.js
@@ -73,6 +73,8 @@ export const setupMain = () => {
   import("./config/accesibility");
   import("./layout/sidebar");
   import("./layout/navbar");
+  
+  window.dispatchEvent(new Event("app-bootstrapped"));
 };
 
 export default { };
diff --git a/resources/js/notifications/loaderNotifications.js b/resources/js/notifications/loaderNotifications.js
new file mode 100644
index 0000000000..f5a9c76e69
--- /dev/null
+++ b/resources/js/notifications/loaderNotifications.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/processes-catalogue/components/Breadcrumbs.vue b/resources/js/processes-catalogue/components/Breadcrumbs.vue
index 6b403d017d..08cc5c4091 100644
--- a/resources/js/processes-catalogue/components/Breadcrumbs.vue
+++ b/resources/js/processes-catalogue/components/Breadcrumbs.vue
@@ -61,7 +61,6 @@ export default {
 
 <style lang="css" scoped>
 .breadcrum-main {
-  margin: -16px -16px 0px -16px;
   background: white;
   border-bottom: 1px solid #DADDDF
 }
diff --git a/resources/js/processes-catalogue/components/CardProcess.vue b/resources/js/processes-catalogue/components/CardProcess.vue
index 2975c56053..8e824254db 100644
--- a/resources/js/processes-catalogue/components/CardProcess.vue
+++ b/resources/js/processes-catalogue/components/CardProcess.vue
@@ -65,8 +65,6 @@ import pagination from "./utils/pagination.vue";
 import SearchCards from "./utils/SearchCards.vue";
 import dataLoadingMixin from "../../components/common/mixins/apiDataLoading";
 import Card from "./utils/Card.vue";
-import { EventBus } from '../index.js';
-
 
 export default {
   components: {
@@ -223,7 +221,7 @@ export default {
      */
     openProcessInfo(process) {
       if (this.categoryId === 'all_templates') {
-        EventBus.$emit('templates-selected', { template: process, type: "Process" });
+        ProcessMaker.EventBus.$emit('templates-selected', { template: process, type: "Process" });
         return;
       }
       this.$router.push({ name: "show", params: { process: process, processId: process.id } });
diff --git a/resources/js/processes-catalogue/components/menuCatologue.vue b/resources/js/processes-catalogue/components/menuCatologue.vue
index 448ad4c5a4..52ecbd0ebb 100644
--- a/resources/js/processes-catalogue/components/menuCatologue.vue
+++ b/resources/js/processes-catalogue/components/menuCatologue.vue
@@ -100,7 +100,6 @@
 
 <script>
 import SelectTemplateModal from "../../components/templates/SelectTemplateModal.vue";
-import { EventBus } from '../index.js';
 
 export default {
   components: {
@@ -138,7 +137,7 @@ export default {
     };
   },
   created() {
-    EventBus.$on('templates-selected', (obj) => {
+    window.ProcessMaker.EventBus.$on('templates-selected', (obj) => {
       this.openTemplate(obj);
     });
 
diff --git a/resources/js/processes-catalogue/loaderProcessesCatalogue.js b/resources/js/processes-catalogue/loaderProcessesCatalogue.js
new file mode 100644
index 0000000000..ad0464a05c
--- /dev/null
+++ b/resources/js/processes-catalogue/loaderProcessesCatalogue.js
@@ -0,0 +1,24 @@
+import { setupMain } from "../../js/next/setupMain.js";
+import screenBuilderNext from "../../js/next/screenBuilder.js";
+import * as ScreenBuilder from "@processmaker/screen-builder";
+import vueFormElements from "../../js/next/libraries/vueFormElements";
+
+window.ScreenBuilder = ScreenBuilder;
+
+setupMain();
+screenBuilderNext();
+
+window.ProcessMaker.isDocumenterInstalled = window.temporal.isDocumenterInstalled;
+window.ProcessMaker.permission = window.temporal.permission;
+window.ProcessMaker.defaultSavedSearch = window.temporal.defaultSavedSearch;
+window.ProcessMaker.isTceCustomization = window.temporal.isTceCustomization;
+window.ProcessMaker.metricsApiEndpoint = window.temporal.metricsApiEndpoint;
+window.ProcessMaker.userConfiguration = window.temporal.userConfiguration;
+window.ProcessMaker.user = window.temporal.user;
+window.ProcessMaker.packages = window.temporal.packages;
+
+// Legacy Mix keys (lowercase "m") used by shared catalogue components
+window.Processmaker = window.Processmaker || {};
+window.Processmaker.user = window.temporal.user;
+window.Processmaker.userConfiguration = window.temporal.userConfiguration;
+window.Processmaker.defaultSavedSearch = window.temporal.defaultSavedSearch;
diff --git a/resources/js/processes-catalogue/index.js b/resources/js/processes-catalogue/processesCatalogue.js
similarity index 65%
rename from resources/js/processes-catalogue/index.js
rename to resources/js/processes-catalogue/processesCatalogue.js
index b548e11f59..299f522044 100644
--- a/resources/js/processes-catalogue/index.js
+++ b/resources/js/processes-catalogue/processesCatalogue.js
@@ -1,14 +1,14 @@
 import Vue from "vue";
-import Process from "./components/Process";
-import ProcessesCatalogue from "./components/ProcessesCatalogue";
-import ProcessListing from "./components/ProcessListing";
+import VueRouter from "vue-router";
+import Process from "./components/Process.vue";
+import ProcessesCatalogue from "./components/ProcessesCatalogue.vue";
+import ProcessListing from "./components/ProcessListing.vue";
 
-export const EventBus = new Vue();
 Vue.use(VueRouter);
+
 const router = new VueRouter({
   mode: "history",
   base: "/process-browser",
-  //See https://v3.router.vuejs.org/guide/
   routes: [
     {
       name: "index",
@@ -16,9 +16,9 @@ const router = new VueRouter({
       component: ProcessListing,
       props(route) {
         return {
-          categoryId: route.query.categoryId || 'recent',
+          categoryId: route.query.categoryId || "recent",
         };
-      }
+      },
     },
     {
       name: "show",
@@ -26,12 +26,12 @@ const router = new VueRouter({
       component: Process,
       props(route) {
         return {
-          processId: parseInt(route.params.processId) || null,
+          processId: parseInt(route.params.processId, 10) || null,
           process: route.params.process || null,
         };
-      }
+      },
     },
-  ]
+  ],
 });
 
 new Vue({
@@ -46,6 +46,4 @@ new Vue({
       mobileSearchVisible: false,
     };
   },
-  methods: {
-  },
 });
diff --git a/resources/js/processes/categories/index.js b/resources/js/processes/categories/index.js
index e40360716f..4eb233b596 100644
--- a/resources/js/processes/categories/index.js
+++ b/resources/js/processes/categories/index.js
@@ -1,6 +1,90 @@
 import Vue from "vue";
-import Required from "SharedComponents";
 import CategoriesListing from "./components/CategoriesListing";
+import Required from "../../components/shared/Required.vue";
 
-Vue.component("CategoriesListing", CategoriesListing);
 Vue.component("Required", Required);
+
+ProcessMaker.CategoriesIndex = new Vue({
+    el: "#categories-listing",
+    components: {
+      CategoriesListing,
+    },
+    data: {
+      filter: "",
+      formData: null,
+      errors: {},
+      id: "",
+      name: "",
+      status: "ACTIVE",
+      disabled: false,
+      route: window.temporal.categoryListApi,
+    },
+    methods: {
+      emptyData () {
+        this.id = "";
+        this.name = "";
+        this.status = "ACTIVE";
+        this.disabled = false;
+        this.errors = {};
+      },
+      getTitle () {
+        return this.id ? this.$t("Edit Category") : this.$t("Create Category");
+      },
+      reload () {
+        this.$refs.list.fetch();
+      },
+      edit (value) {
+        this.emptyData();
+        this.id = value.id;
+        this.name = value.name;
+        this.status = value.status;
+        this.$refs.createCategoryModal.show();
+      },
+      showModal() {
+        this.emptyData();
+        this.$refs.createCategoryModal.show();
+      },
+      onClose () {
+        this.emptyData();
+      },
+      onSubmit () {
+        this.errors = {};
+        // single click
+        if (this.disabled) {
+          return;
+        }
+        this.disabled = true;
+        let method = "POST",
+          url = this.route;
+        if (this.id) {
+          // Do an update
+          method = "PUT";
+          url = `${url}/${this.id}`;
+        }
+        ProcessMaker.apiClient({
+          method,
+          url,
+          baseURL: "/",
+          data: {
+            name: this.name,
+            status: this.status
+          }
+        })
+          .then((response) => {
+            this.$refs.createCategoryModal.hide();
+            let message = "The category was created.";
+            if (this.id) {
+              message = "The category was saved.";
+            }
+            ProcessMaker.alert(this.$t(message), "success");
+            this.emptyData();
+            this.reload();
+          }).catch((error) => {
+          this.disabled = false;
+          if (error.response.status === 422) {
+            this.errors = error.response.data.errors;
+          }
+        });
+      }
+    }
+  });
diff --git a/resources/js/processes/designer/Assets.vue b/resources/js/processes/designer/Assets.vue
index b0b8b37110..03a1ac3845 100644
--- a/resources/js/processes/designer/Assets.vue
+++ b/resources/js/processes/designer/Assets.vue
@@ -116,6 +116,7 @@ export default {
   data() {
     return {
       urlPath: "",
+
       assetsCore: [
         {
           color: "#4DA2EB",
@@ -168,7 +169,7 @@ export default {
         },
         {
           color: "#556271",
-          image_icon: require("../../../img/flowGenieIcon.svg"),
+          image_icon: "/img/flowGenieIcon.svg",
           asset_name: "FlowGenie",
           asset_name_all: "View All Genies",
           asset_name_new: "New Genie",
diff --git a/resources/js/processes/edit.js b/resources/js/processes/edit.js
index 41cacd5d1c..69f6e11f3c 100644
--- a/resources/js/processes/edit.js
+++ b/resources/js/processes/edit.js
@@ -1,4 +1,5 @@
-import CategorySelect from "./categories/components/CategorySelect";
+import Vue from "vue";
+import CategorySelect from "./categories/components/CategorySelect.vue";
 import ProcessesPermissions from "./components/ProcessesPermissions.vue";
 
 Vue.component("CategorySelect", CategorySelect);
diff --git a/resources/js/processes/environment-variables/components/AssetLinkFields.vue b/resources/js/processes/environment-variables/components/AssetLinkFields.vue
index 4164373a7c..48632f56b2 100644
--- a/resources/js/processes/environment-variables/components/AssetLinkFields.vue
+++ b/resources/js/processes/environment-variables/components/AssetLinkFields.vue
@@ -73,7 +73,7 @@
 
 <script>
 import { Multiselect } from "@processmaker/vue-multiselect";
-import { FormErrorsMixin } from "SharedComponents";
+import FormErrorsMixin from "../../../components/shared/FormErrorsMixin";
 import assetTypes from "../assetTypes";
 
 export default {
diff --git a/resources/js/processes/environment-variables/components/CreateEnvironmentVariableModal.vue b/resources/js/processes/environment-variables/components/CreateEnvironmentVariableModal.vue
index ca604e149e..0112424d14 100644
--- a/resources/js/processes/environment-variables/components/CreateEnvironmentVariableModal.vue
+++ b/resources/js/processes/environment-variables/components/CreateEnvironmentVariableModal.vue
@@ -47,7 +47,9 @@
 </template>
 
 <script>
-  import { FormErrorsMixin, Modal, Required } from "SharedComponents";
+  import  FormErrorsMixin  from "../../../components/shared/FormErrorsMixin.js";
+  import Modal from "../../../components/shared/Modal.vue";
+  import Required from "../../../components/shared/Required.vue";
   import AssetLinkFields from "./AssetLinkFields.vue";
   import DoNotUpdateSwitch from "./DoNotUpdateSwitch.vue";
 
diff --git a/resources/js/processes/environment-variables/edit.js b/resources/js/processes/environment-variables/edit.js
index 952d56956f..514f230794 100644
--- a/resources/js/processes/environment-variables/edit.js
+++ b/resources/js/processes/environment-variables/edit.js
@@ -2,7 +2,7 @@ import Vue from "vue";
 import AssetLinkFields from "./components/AssetLinkFields.vue";
 import DoNotUpdateSwitch from "./components/DoNotUpdateSwitch.vue";
 
-const initial = window.ProcessMaker.EnvironmentVariableEdit || {};
+const initial = window.temporal.EnvironmentVariableEdit || {};
 
 new Vue({
   el: "#editEnvironmentVariable",
diff --git a/resources/js/processes/environment-variables/loaderEnvironment.js b/resources/js/processes/environment-variables/loaderEnvironment.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/processes/environment-variables/loaderEnvironment.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/processes/export/index.js b/resources/js/processes/export/index.js
index a99949e504..ac53bc924e 100644
--- a/resources/js/processes/export/index.js
+++ b/resources/js/processes/export/index.js
@@ -1,10 +1,9 @@
-import Vue from 'vue';
+import Vue from "vue";
 import VuePassword from "vue-password";
-import ExportManager from './components/ExportManager';
-import ExportManagerView from './components/ExportManagerView';
+import ExportManager from "./components/ExportManager.vue";
+import ExportManagerView from "./components/ExportManagerView.vue";
 import CustomExportView from "./components/CustomExportView.vue";
-import Router from "vue-router";
-import State from './state';
+import State from "./state";
 
 Vue.component("VuePassword", VuePassword);
 
@@ -12,45 +11,44 @@ const processName = document.head.querySelector('meta[name="export-process-name"
 const projectId = document.head.querySelector('meta[name="export-project-id"]').content;
 
 const routes = [
-    { 
-        path: '/processes/:processId/export', 
-        name: 'main', 
-        component: ExportManagerView,
-        props: route => ({
-            processId: route.params.processId,
-            routeName: 'main',
-            processName: processName,
-          })
-    },
-    { 
-        path: '/processes/:processId/export/custom',
-        name: 'export-custom-process',
-        component: CustomExportView,
-        props: route => ({
-            routeName: 'export-custom-process',
-            processName: processName,
-            processId: route.params.processId,
-            projectId: projectId,
-          }),
-    },
+  {
+    path: "/processes/:processId/export",
+    name: "main",
+    component: ExportManagerView,
+    props: (route) => ({
+      processId: route.params.processId,
+      routeName: "main",
+      processName,
+    }),
+  },
+  {
+    path: "/processes/:processId/export/custom",
+    name: "export-custom-process",
+    component: CustomExportView,
+    props: (route) => ({
+      routeName: "export-custom-process",
+      processName,
+      processId: route.params.processId,
+      projectId,
+    }),
+  },
 ];
 
 new Vue({
-    mixins: [State],
-    router: window.ProcessMaker.Router,
-    components: { ExportManager },
-    data() {
-        return {
-        }
-    },
-    beforeMount() {
-        this.$router.addRoutes(routes);
+  mixins: [State],
+  router: window.ProcessMaker.Router,
+  components: { ExportManager },
+  data() {
+    return {};
+  },
+  beforeMount() {
+    this.$router.addRoutes(routes);
+  },
+  watch: {
+    $route: {
+      handler() {
+        // TODO: Add handlers route changes such as breadcrumb updates etc..
+      },
     },
-    watch: {
-        '$route': {
-            handler() {
-                // TODO: Add handlers route changes such as breadcrumb updates etc..
-            }
-        }
-    }
-}).$mount('#export-manager');
+  },
+}).$mount("#export-manager");
diff --git a/resources/js/processes/import/components/ProcessDetailConfigs.vue b/resources/js/processes/import/components/ProcessDetailConfigs.vue
index 9b1e0823e6..6c4b6f40d7 100644
--- a/resources/js/processes/import/components/ProcessDetailConfigs.vue
+++ b/resources/js/processes/import/components/ProcessDetailConfigs.vue
@@ -63,7 +63,9 @@
 </template>
 
 <script>
-import { FormErrorsMixin, Required } from "SharedComponents";
+import FormErrorsMixin from "../../../components/shared/FormErrorsMixin";
+import Required from "../../../components/shared/Required";
+
 export default {
     components: {Required},
     mixins: [FormErrorsMixin],
diff --git a/resources/js/processes/import/index.js b/resources/js/processes/import/index.js
index b75efb953b..8cdcc187d4 100644
--- a/resources/js/processes/import/index.js
+++ b/resources/js/processes/import/index.js
@@ -1,45 +1,45 @@
-import Vue from 'vue';
-import ImportManagerView from './components/ImportManagerView';
-import ProcessDetailConfigs from './components/ProcessDetailConfigs';
-import State from '../export/state';
-import CustomExportView from "../export/components/CustomExportView";
-
+import Vue from "vue";
+import ImportManagerView from "./components/ImportManagerView.vue";
+import ProcessDetailConfigs from "./components/ProcessDetailConfigs.vue";
+import State from "../export/state";
+import CustomExportView from "../export/components/CustomExportView.vue";
 
+window.ProcessMaker.importIsRunning = window.temporal.importIsRunning;
+window.ProcessMaker.queueImports = window.temporal.queueImports;
 const routes = [
-    { 
-        path: '/processes/import', 
-        name: 'main', 
-        component: ImportManagerView
-    },
-    { 
-        path: '/processes/import/custom', 
-        name: 'custom', 
-        component: CustomExportView,
-    },
-    { 
-        path: '/processes/import/new-process', 
-        name: 'import-new-process', 
-        component: ProcessDetailConfigs,
-    },
+  {
+    path: "/processes/import",
+    name: "main",
+    component: ImportManagerView,
+  },
+  {
+    path: "/processes/import/custom",
+    name: "custom",
+    component: CustomExportView,
+  },
+  {
+    path: "/processes/import/new-process",
+    name: "import-new-process",
+    component: ProcessDetailConfigs,
+  },
 ];
 
 new Vue({
-    mixins: [State],
-    router: window.ProcessMaker.Router,
-    components: { },
-    data() {
-        return {
-        }
-    },
-    beforeMount() {
-        this.$root.isImport = true;
-        this.$router.addRoutes(routes);
+  mixins: [State],
+  router: window.ProcessMaker.Router,
+  components: {},
+  data() {
+    return {};
+  },
+  beforeMount() {
+    this.$root.isImport = true;
+    this.$router.addRoutes(routes);
+  },
+  watch: {
+    $route: {
+      handler() {
+        // TODO: Add handlers route changes such as breadcrumb updates etc..
+      },
     },
-    watch: {
-        '$route': {
-            handler() {
-                // TODO: Add handlers route changes such as breadcrumb updates etc..
-            }
-        }
-    }
-}).$mount('#import-manager');
\ No newline at end of file
+  },
+}).$mount("#import-manager");
diff --git a/resources/js/processes/index.js b/resources/js/processes/index.js
deleted file mode 100644
index c92be7848f..0000000000
--- a/resources/js/processes/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-import Vue from "vue";
-import CreateProcessModal from "./components/CreateProcessModal";
-import SelectTemplateModal from "../components/templates/SelectTemplateModal.vue";
-import ProcessesListing from "./components/ProcessesListing";
-import CategorySelect from "./categories/components/CategorySelect";
-
-Vue.component("CategorySelect", CategorySelect);
-
-new Vue({
-  el: "#processIndex",
-  components: {
-    CreateProcessModal,
-    SelectTemplateModal,
-    ProcessesListing,
-  },
-  data: {
-    filter: "",
-    pmql: "",
-    urlPmql: "",
-    processModal: false,
-    processId: null,
-    showModal: false,
-  },
-  created() {
-    const urlParams = new URLSearchParams(window.location.search);
-    this.urlPmql = urlParams.get("pmql");
-  },
-  methods: {
-    show() {
-      this.processId = null;
-      this.processModal = true;
-    },
-    edit(id) {
-      this.processId = id;
-      this.processModal = true;
-    },
-    goToImport() {
-      window.location = "/processes/import";
-    },
-    onNLQConversion(query) {
-      this.onChange(query);
-      this.reload();
-    },
-    onChange(query) {
-      this.pmql = query;
-    },
-    reload() {
-      this.$refs.processListing.fetch();
-    },
-  },
-});
diff --git a/resources/js/processes/loaderProcesses.js b/resources/js/processes/loaderProcesses.js
new file mode 100644
index 0000000000..f5a9c76e69
--- /dev/null
+++ b/resources/js/processes/loaderProcesses.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/processes/modeler/components/ModelerApp.vue b/resources/js/processes/modeler/components/ModelerApp.vue
index d2936c2c83..660aaa0bcf 100644
--- a/resources/js/processes/modeler/components/ModelerApp.vue
+++ b/resources/js/processes/modeler/components/ModelerApp.vue
@@ -64,17 +64,24 @@
 </template>
 
 <script>
-import { Modeler, ValidationStatus } from "@processmaker/modeler";
+import { Modeler as ModelerSource, ValidationStatus as ValidationStatusSource } from "@processmaker/modeler";
 import CreateTemplateModal from "../../../components/templates/CreateTemplateModal.vue";
 import CreatePmBlockModal from "../../../components/pm-blocks/CreatePmBlockModal.vue";
 import autosaveMixins from "../../../modules/autosave/mixins";
 import AssetRedirectMixin from "../../../components/shared/AssetRedirectMixin";
 
+const asVueComponent = (component) => {
+  if (!component || typeof component === "function" || Object.isExtensible(component)) {
+    return component;
+  }
+  return { ...component };
+};
+
 export default {
   name: "ModelerApp",
   components: {
-    Modeler,
-    ValidationStatus,
+    Modeler: asVueComponent(ModelerSource),
+    ValidationStatus: asVueComponent(ValidationStatusSource),
     CreateTemplateModal,
     CreatePmBlockModal,
   },
diff --git a/resources/js/processes/modeler/index.js b/resources/js/processes/modeler/index.js
index 27b9ce8f64..8ebef12e8b 100644
--- a/resources/js/processes/modeler/index.js
+++ b/resources/js/processes/modeler/index.js
@@ -1,7 +1,9 @@
 import Vue from "vue";
 import ModelerApp from "./components/ModelerApp";
 
-document.addEventListener("DOMContentLoaded", () => {
+// Mount after 'load' so package addon scripts (from $manager->getScriptWithParams())
+// are guaranteed to have executed before Vue renders the modeler.
+window.addEventListener("load", () => {
   window.ProcessMaker.i18nPromise.then(() => {
     new Vue({
       render: (h) => h(ModelerApp, {
@@ -12,3 +14,4 @@ document.addEventListener("DOMContentLoaded", () => {
     }).$mount("#modeler-app");
   });
 });
+
diff --git a/resources/js/processes/modeler/initialLoad.js b/resources/js/processes/modeler/initialLoad.js
index 37f08e5845..36822328d6 100644
--- a/resources/js/processes/modeler/initialLoad.js
+++ b/resources/js/processes/modeler/initialLoad.js
@@ -54,6 +54,9 @@ import NotifyProcessManager from "./components/inspector/NotifyProcessManager";
 import { onModelerInit } from "./modelerInit";
 import StageManager from "./components/inspector/StageManager";
 
+const Vue = window.Vue;
+const ProcessMaker = window.ProcessMaker;
+
 Vue.component("UserSelect", UserSelect);
 Vue.component("UserById", UserById);
 Vue.component("GroupSelect", GroupSelect);
diff --git a/resources/js/processes/modeler/loaderModeler.js b/resources/js/processes/modeler/loaderModeler.js
new file mode 100644
index 0000000000..04547433bb
--- /dev/null
+++ b/resources/js/processes/modeler/loaderModeler.js
@@ -0,0 +1,41 @@
+import { setupMain } from "../../next/setupMain";
+import monaco from "../../next/monaco";
+import modeler from "../../next/modeler";
+import "../../next/libraries/vueFormElements";
+import "../../next/libraries/modelerInspector";
+import * as ScreenBuilder from "@processmaker/screen-builder";
+import * as ModelerLib from "@processmaker/modeler";
+import VueFormElements from "@processmaker/vue-form-elements";
+
+import("@processmaker/screen-builder/dist/vue-form-builder.css");
+import("@processmaker/vue-form-elements/dist/vue-form-elements.css");
+
+setupMain();
+modeler();
+monaco();
+
+window.ScreenBuilder = ScreenBuilder;
+// CJS default is the Mix `require()` object. The ESM namespace is not extensible
+// and Vue throws "Cannot add property _Ctor" if it is registered as a component.
+window.Modeler = ModelerLib.default ?? { ...ModelerLib };
+
+window.Vue.use(VueFormElements);
+window.Vue.use(ScreenBuilder.default);
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
+
+const boot = window.temporal || {};
+
+window.ProcessMaker.defaultEmailNotification = boot.defaultEmailNotification;
+window.ProcessMaker.multiplayer = boot.multiplayer;
+window.ProcessMaker.PMBlockList = boot.PMBlockList;
+window.ProcessMaker.ExternalIntegrationsList = boot.ExternalIntegrationsList;
+window.ProcessMaker.modeler = boot.modeler;
+window.ProcessMaker.tceCustomizationEnable = boot.tceCustomizationEnable;
+
+window.ProcessMaker.EventBus.$on("modeler-start", ({ loadXML, addWarnings, addBreadcrumbs }) => {
+  loadXML(window.ProcessMaker.modeler.xml);
+  addWarnings(boot.warnings || []);
+  addBreadcrumbs(boot.breadcrumbData || []);
+});
diff --git a/resources/js/processes/newDesigner.js b/resources/js/processes/newDesigner.js
index 389fcc0e97..f95bd385f1 100644
--- a/resources/js/processes/newDesigner.js
+++ b/resources/js/processes/newDesigner.js
@@ -1,7 +1,7 @@
 import Vue from "vue";
-import Assets from "./designer/Assets";
-import RecentAssets from "./designer/RecentAssets";
-import MyProject from "./designer/MyProject";
+import Assets from "./designer/Assets.vue";
+import RecentAssets from "./designer/RecentAssets.vue";
+import MyProject from "./designer/MyProject.vue";
 import WelcomeDesigner from "./designer/WelcomeDesigner.vue";
 
 new Vue({
diff --git a/resources/js/processes/processes.js b/resources/js/processes/processes.js
new file mode 100644
index 0000000000..bc02c2c20c
--- /dev/null
+++ b/resources/js/processes/processes.js
@@ -0,0 +1,60 @@
+import Vue from "vue";
+
+import Required from "../components/shared/Required.vue";
+import CreateProcessModal from "./components/CreateProcessModal.vue";
+import SelectTemplateModal from "../components/templates/SelectTemplateModal.vue";
+import ProcessesListing from "./components/ProcessesListing.vue";
+
+// Shared by categories tab modal (`<required>`) loaded later via @append
+Vue.component("Required", Required);
+
+if (document.getElementById("processIndex")) {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: "#processIndex",
+    components: {
+      CreateProcessModal,
+      SelectTemplateModal,
+      ProcessesListing,
+    },
+    data: {
+      filter: "",
+      pmql: "",
+      urlPmql: "",
+      processModal: false,
+      processId: null,
+      showModal: false,
+    },
+    created() {
+      const urlParams = new URLSearchParams(window.location.search);
+      this.urlPmql = urlParams.get("pmql");
+    },
+    methods: {
+      show() {
+        this.processId = null;
+        this.processModal = true;
+      },
+      edit(id) {
+        this.processId = id;
+        this.processModal = true;
+      },
+      goToImport() {
+        window.location = "/processes/import";
+      },
+      onNLQConversion(query) {
+        this.onChange(query);
+        this.reload();
+      },
+      onChange(query) {
+        this.pmql = query;
+      },
+      reload() {
+        this.$refs.processListing.fetch();
+      },
+    },
+  });
+}
+
+if (window.temporal?.loadCategoryOnStart) {
+  ProcessMaker.EventBus.$emit("api-data-category", true);
+}
diff --git a/resources/js/processes/screen-builder/loaderScreen.js b/resources/js/processes/screen-builder/loaderScreen.js
new file mode 100644
index 0000000000..d19bafca22
--- /dev/null
+++ b/resources/js/processes/screen-builder/loaderScreen.js
@@ -0,0 +1,26 @@
+import * as ScreenBuilder from "@processmaker/screen-builder";
+import { setupMain } from "../../next/setupMain";
+import monaco from "../../next/monaco";
+import vueFormElements from "../../next/libraries/vueFormElements";
+
+import("@processmaker/screen-builder/dist/vue-form-builder.css");
+
+// Load screen-builder for PMBLOCKs
+
+window.ScreenBuilder = ScreenBuilder;
+
+setupMain();
+monaco();
+window.Vue.use(ScreenBuilder.default);
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
+window.ProcessMaker.setValidatorLanguage = (validator, lang) => {
+  const availableLanguages = ["ar", "az", "be", "bg", "bs", "ca", "cs", "cy", "da", "de", "el", "en", "es", "et", "eu", "fa", "fi",
+    "fr", "hr", "hu", "id", "it", "ja", "ka", "km", "ko", "lt", "lv", "mk", "mn", "ms", "nb_NO", "nl", "pl", "pt", "pt_BR", "ro", "ru",
+    "se", "sl", "sq", "sr", "sv", "tr", "ua", "uk", "uz", "vi", "zh", "zh_TW"];
+  const selectedLang = availableLanguages.includes(lang) ? lang : "en";
+  if (validator) {
+    validator.useLang(selectedLang);
+  }
+};
diff --git a/resources/js/processes/screen-builder/main.js b/resources/js/processes/screen-builder/main.js
index 9bdba0a647..cc984506fc 100644
--- a/resources/js/processes/screen-builder/main.js
+++ b/resources/js/processes/screen-builder/main.js
@@ -1,17 +1,22 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import ScreenBuilder from "./screen";
+import { Multiselect } from "@processmaker/vue-multiselect";
+import ScreenBuilder from "./screen.vue";
+
+Vue.component("Multiselect", Multiselect);
 
 Vue.use(Vuex);
 const store = new Vuex.Store({});
 
-// Bootstrap our Designer application
-new Vue({
-  store,
-  el: "#screen-container",
-  components: { ScreenBuilder },
-  mounted() {
-    // used to reference the ScreenBuilder
-    window.ProcessMaker.ScreenBuilder = this.$refs.screenBuilder;
-  }
+// Mount after 'load' so package addon scripts (from $manager->getScripts())
+// are guaranteed to have executed before Vue renders the screen builder.
+window.addEventListener("load", () => {
+  new Vue({
+    store,
+    el: "#screen-container",
+    components: { ScreenBuilder },
+    mounted() {
+      window.ProcessMaker.ScreenBuilder = this.$refs.screenBuilder;
+    },
+  });
 });
diff --git a/resources/js/processes/screens/edit.js b/resources/js/processes/screens/edit.js
index c198f4c489..1eb1567f16 100644
--- a/resources/js/processes/screens/edit.js
+++ b/resources/js/processes/screens/edit.js
@@ -2,3 +2,74 @@ import Vue from "vue";
 import CategorySelect from "../categories/components/CategorySelect";
 
 Vue.component("CategorySelect", CategorySelect);
+
+new Vue({
+    el: '#editGroup',
+    mixins: addons,
+    data() {
+        return {
+            formData: window.temporal.screen,
+            assignedProjects: window.temporal.assignedProjects,
+            isDraft: window.temporal.isDraft,
+            selectedProjects: '',
+            errors: {
+                'title': null,
+                'type': null,
+                'description': null,
+                'status': null
+            }
+        }
+    },
+    watch: {
+        selectedProjects: {
+            handler() {
+                this.formData.projects = this.selectedProjects;
+            }
+        }
+    },
+    methods: {
+        resetErrors() {
+            this.errors = Object.assign({}, {
+                title: null,
+                type: null,
+                description: null,
+                status: null
+            });
+        },
+        onClose() {
+          const queryParams = new URLSearchParams(window.location.search);
+          const projectId = queryParams.get("project_id");
+          window.location.href = projectId ? `/designer/projects/${projectId}`: '/designer/screens';
+        },
+        onUpdate() {
+            if (this.isDraft) {
+                ProcessMaker.confirmModal(
+                    this.$t("Caution!"),
+                    this.$t("You are about to publish a draft version. Are you sure you want to proceed?"),
+                    "",
+                    () => {
+                        this.handleUpdate();
+                    }
+                );
+            } else {
+                this.handleUpdate();
+            }
+        },
+        handleUpdate() {
+            this.resetErrors();
+            ProcessMaker.apiClient.put('screens/' + this.formData.id, this.formData)
+                .then(response => {
+                    ProcessMaker.alert(this.$t('The screen was saved.'), 'success');
+                    this.onClose();
+                })
+                .catch(error => {
+                    if (error.response.status && error.response.status === 422) {
+                        this.errors = error.response.data.errors;
+                    }
+                });
+        }
+    },
+    mounted() {
+        this.selectedProjects = this.assignedProjects.length > 0 ?this.assignedProjects.map(project => project.id) : null;
+    }
+});
diff --git a/resources/js/processes/screens/loaderScreens.js b/resources/js/processes/screens/loaderScreens.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/processes/screens/loaderScreens.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/processes/scripts/components/AiTab.vue b/resources/js/processes/scripts/components/AiTab.vue
index 71b43ebb8b..10938e7ca6 100644
--- a/resources/js/processes/scripts/components/AiTab.vue
+++ b/resources/js/processes/scripts/components/AiTab.vue
@@ -151,11 +151,11 @@ export default {
   data() {
     return {
       showPromptArea: false,
-      proceC2Icon: require("./../../../../img/proceC2Black.svg"),
-      penSparkleIcon: require("./../../../../img/pen_sparkle_icon.svg"),
-      bookIcon: require("./../../../../img/book_icon.svg"),
-      brushIcon: require("./../../../../img/brush_icon.svg"),
-      listIcon: require("./../../../../img/list_icon.svg"),
+      proceC2Icon: "/img/proceC2Black.svg",
+      penSparkleIcon: "/img/pen_sparkle_icon.svg",
+      bookIcon: "/img/book_icon.svg",
+      brushIcon: "/img/brush_icon.svg",
+      listIcon: "/img/list_icon.svg",
       changesApplied: false,
       newCode: `\n $a = 3+4; \n $b = $a / 2;`,
       loading: false,
diff --git a/resources/js/processes/scripts/editConfig.js b/resources/js/processes/scripts/editConfig.js
index d2ac6c8e1f..24bd0a7804 100644
--- a/resources/js/processes/scripts/editConfig.js
+++ b/resources/js/processes/scripts/editConfig.js
@@ -1,6 +1,6 @@
 import Vue from "vue";
-import CategorySelect from "../categories/components/CategorySelect";
-import SliderWithInput from "../../components/shared/SliderWithInput";
+import CategorySelect from "../categories/components/CategorySelect.vue";
+import SliderWithInput from "../../components/shared/SliderWithInput.vue";
 
 Vue.component("CategorySelect", CategorySelect);
-Vue.component("SliderWithInput", SliderWithInput);
\ No newline at end of file
+Vue.component("SliderWithInput", SliderWithInput);
diff --git a/resources/js/processes/scripts/index.js b/resources/js/processes/scripts/index.js
index c2716b1101..93583ef7a0 100644
--- a/resources/js/processes/scripts/index.js
+++ b/resources/js/processes/scripts/index.js
@@ -1,7 +1,7 @@
 import Vue from "vue";
-import ScriptListing from "./components/ScriptListing";
-import CreateScriptModal from "./components/CreateScriptModal";
-import CategorySelect from "../categories/components/CategorySelect";
+import ScriptListing from "./components/ScriptListing.vue";
+import CreateScriptModal from "./components/CreateScriptModal.vue";
+import CategorySelect from "../categories/components/CategorySelect.vue";
 
 Vue.component("CategorySelect", CategorySelect);
 
diff --git a/resources/js/processes/scripts/loaderScripts.js b/resources/js/processes/scripts/loaderScripts.js
new file mode 100644
index 0000000000..20aee133f7
--- /dev/null
+++ b/resources/js/processes/scripts/loaderScripts.js
@@ -0,0 +1,8 @@
+import { setupMain } from "../../next/setupMain";
+import monaco from "../../next/monaco";
+
+setupMain();
+monaco();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/processes/signals/index.js b/resources/js/processes/signals/index.js
index f0e1480a20..8e900b04bb 100644
--- a/resources/js/processes/signals/index.js
+++ b/resources/js/processes/signals/index.js
@@ -1,4 +1,68 @@
 import Vue from "vue";
-import SignalsListing from "./components/SignalListing";
+import SignalsListing from "./components/SignalListing.vue";
 
-Vue.component("SignalsListing", SignalsListing);
+new Vue({
+  el: "#listSignals",
+  components: {
+    SignalsListing,
+  },
+  data() {
+    return {
+      filter: "",
+      formData: {},
+      errors: {
+        name: null,
+        id: null,
+      },
+      disabled: false,
+    };
+  },
+  mounted() {
+    this.resetFormData();
+    this.resetErrors();
+  },
+  methods: {
+    onClose() {
+      this.resetFormData();
+      this.resetErrors();
+    },
+    resetFormData() {
+      this.formData = Object.assign({}, {
+        name: null,
+        id: null,
+      });
+    },
+    resetErrors() {
+      this.errors = Object.assign({}, {
+        name: null,
+        id: null,
+      });
+    },
+    reload() {
+      this.$refs.signalList.dataManager([
+        {
+          field: "name",
+          direction: "desc",
+        },
+      ]);
+    },
+    onSubmit() {
+      this.resetErrors();
+      if (this.disabled) {
+        return;
+      }
+      this.disabled = true;
+      ProcessMaker.apiClient.post("signals", this.formData)
+        .then(() => {
+          ProcessMaker.alert(this.$t("The signal was created."), "success");
+          window.location = "/designer/signals";
+        })
+        .catch((error) => {
+          this.disabled = false;
+          if (error.response.status && error.response.status === 422) {
+            this.errors = error.response.data.errors;
+          }
+        });
+    },
+  },
+});
diff --git a/resources/js/processes/signals/loaderSignals.js b/resources/js/processes/signals/loaderSignals.js
new file mode 100644
index 0000000000..f860598640
--- /dev/null
+++ b/resources/js/processes/signals/loaderSignals.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/requests/loaderRequests.js b/resources/js/requests/loaderRequests.js
new file mode 100644
index 0000000000..b0fc714e3e
--- /dev/null
+++ b/resources/js/requests/loaderRequests.js
@@ -0,0 +1,10 @@
+import { setupMain } from "../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
+window.Processmaker.user = window.temporal.user;
+window.Processmaker.status = window.temporal.status;
+window.ProcessMaker.advanced_filter = window.temporal.advanced_filter;
+window.Processmaker.defaultColumns = window.temporal.defaultColumns;
\ No newline at end of file
diff --git a/resources/js/tasks/edit.js b/resources/js/tasks/edit.js
index d58fa5281b..ca26358393 100644
--- a/resources/js/tasks/edit.js
+++ b/resources/js/tasks/edit.js
@@ -22,7 +22,7 @@ const main = new Vue({
   },
   mixins: addons,
   data: {
-    tceEnableCaseNumberScreen: window.ProcessMaker.tceEnableCaseNumberScreen,
+    tceEnableCaseNumberScreen: window.temporal.tceEnableCaseNumberScreen,
     // Edit data
     fieldsToUpdate: [],
     jsonData: "",
@@ -61,7 +61,7 @@ const main = new Vue({
     userHasInteracted: false,
     caseTitle: "",
     showMenu: true,
-    userConfiguration,
+    userConfiguration: window.temporal.userConfiguration,
     urlConfiguration: "users/configuration",
     showTabs: true,
   },
diff --git a/resources/js/tasks/loaderTasks.js b/resources/js/tasks/loaderTasks.js
new file mode 100644
index 0000000000..f5a9c76e69
--- /dev/null
+++ b/resources/js/tasks/loaderTasks.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/tasks/show.js b/resources/js/tasks/show.js
index 3f70375614..b45b2986bc 100644
--- a/resources/js/tasks/show.js
+++ b/resources/js/tasks/show.js
@@ -29,7 +29,6 @@ Vue.component("QuickFillPreview", QuickFillPreview);
 Vue.component("TasksList", TasksList);
 Vue.component("TaskSavePanel", TaskSavePanel);
 Vue.component("TaskSaveNotification", TaskSaveNotification);
-Vue.component("PMDropdownSuggest", PMDropdownSuggest);
 Vue.mixin(autosaveMixins);
 Vue.mixin(draftFileUploadMixin);
 Vue.mixin(reassignMixin);
diff --git a/resources/js/templates/configure.js b/resources/js/templates/configure.js
index d12d471241..0c9130a3a4 100644
--- a/resources/js/templates/configure.js
+++ b/resources/js/templates/configure.js
@@ -10,9 +10,9 @@ new Vue({
     mixins: addons,
     data() {
         return {
-            formData: window.ProcessMaker.templateConfigurations.data,
-            screenTypes: window.ProcessMaker.templateConfigurations.screenTypes,
-            type: window.ProcessMaker.templateConfigurations.templateType,
+            formData: window.temporal.templateConfigurations.data,
+            screenTypes: window.temporal.templateConfigurations.screenTypes,
+            type: window.temporal.templateConfigurations.templateType,
             dataGroups: [],
             value: [],
             errors: {
diff --git a/resources/js/templates/import/components/TemplateDetailConfigs.vue b/resources/js/templates/import/components/TemplateDetailConfigs.vue
index 34dc8356d8..ce37900f7e 100644
--- a/resources/js/templates/import/components/TemplateDetailConfigs.vue
+++ b/resources/js/templates/import/components/TemplateDetailConfigs.vue
@@ -63,7 +63,9 @@
    </template>
    
    <script>
-   import { FormErrorsMixin, Required } from "SharedComponents";
+
+   import FormErrorsMixin from "../../../components/shared/FormErrorsMixin";
+   import Required from "../../../components/shared/Required";
    export default {
        components: {Required},
        mixins: [FormErrorsMixin],
diff --git a/resources/js/templates/loaderTemplates.js b/resources/js/templates/loaderTemplates.js
new file mode 100644
index 0000000000..f5a9c76e69
--- /dev/null
+++ b/resources/js/templates/loaderTemplates.js
@@ -0,0 +1,6 @@
+import { setupMain } from "../next/setupMain";
+
+setupMain();
+
+window.ProcessMaker.packages = window.temporal?.packages || [];
+window.packages = window.ProcessMaker.packages;
diff --git a/resources/js/vite/AGENTS.md b/resources/js/vite/AGENTS.md
index d3b6ffa940..cf7d5daa2b 100644
--- a/resources/js/vite/AGENTS.md
+++ b/resources/js/vite/AGENTS.md
@@ -1,6 +1,6 @@
 # Vite views (ProcessMaker)
 
-Guide for humans and coding agents working under `resources/js/vite`, Vite Blade layouts, and the parallel Vite asset pipeline.
+Guide for humans and coding agents working under Vite Blade layouts and the parallel Vite asset pipeline.
 
 Vite runs **alongside** Laravel Mix. Do not replace Mix globally. Migrate routes one at a time.
 
@@ -9,7 +9,7 @@ Vite runs **alongside** Laravel Mix. Do not replace Mix globally. Migrate routes
 | Pipeline | Owns | Blade helper | Dev server / output |
 |----------|------|--------------|---------------------|
 | **Mix** | Most of the app (`public/js`, `public/css`) | `mix('js/...')`, `mix('css/...')` | `npm run development` / `watch` → `public/` + `mix-manifest.json` |
-| **Vite** | Entries under `resources/js/vite`, shared Sass entries, Vite-backed pages | `@vite([...])` | `npm run vite:dev` → `:5173` + `storage/vite.hot`; `npm run vite:build` → `public/build` + manifest |
+| **Vite** | Page entries (under `resources/js/vite`, feature folders, or `jscomposition`), shared Sass / translations | `@vite([...])` | `npm run vite:dev` → `:5173` + `storage/vite.hot`; `npm run vite:build` → `public/build` + manifest |
 
 - Mix HMR file (if used): `public/hot` — **reserved for Mix**. Never point Vite hot here.
 - Vite hot file: `storage/vite.hot` (configured in `vite.config.js` and `Vite::useHotFile()` in `ProcessMakerServiceProvider`).
@@ -17,43 +17,203 @@ Vite runs **alongside** Laravel Mix. Do not replace Mix globally. Migrate routes
 
 ## Layouts
 
-| Layout | CSS | Use when |
-|--------|-----|----------|
-| `layouts.layoutnext` | `mix('css/app.css')` etc. | Legacy Mix pages |
-| `layouts.layoutnextvite` | `@vite` of `app.scss`, `sidebar`, `collapseDetails`, `tailwind.css` | Authenticated Vite-backed pages (e.g. tasks) |
-| Standalone Blade | `@vite` for JS + needed CSS in the page itself | Demo / auth experiments without app chrome |
+| Layout | CSS / JS | Use when |
+|--------|----------|----------|
+| `layouts.layout` / `layouts.layoutnext` | Mix CSS/JS chrome | Legacy Mix pages (e.g. catalogue mobile) |
+| `layouts.layoutnextvite` | `@vite` of `app.scss`, `sidebar`, `collapseDetails`, `tailwind.css` | Authenticated Vite pages (Tasks, Processes Designer, Processes Catalogue desktop, Cases, Admin…) |
+| Standalone / `auth.layouts.auth` | Page-level `@vite` | Login and password-reset style pages |
 
 File: `resources/views/layouts/layoutnextvite.blade.php` (must be `.blade.php`).
 
+**Script order in `layoutnextvite`:** `@yield('js')` runs **before** package addon scripts (`$addons` / `GlobalScripts`). Package code that mutates `window.ProcessMaker.*` after yield may not be ready in a page module’s first tick. Prefer `window.addEventListener('load', …)` when merging package tabs/addons (see Customize UI). Classic `layout` loads addons **before** `@yield('js')`.
+
 ## How routes switch to Vite (current pattern)
 
-There is **no** `VITE_VIEW` env map anymore. Migration is done **in place** on the existing Blade (or a dedicated `resources/views/vite/...` page for demos):
+There is **no** `VITE_VIEW` env map. Migration is done **in place** on the existing Blade:
 
-1. Change `@extends(...)` to `layouts.layoutnextvite` (in-app) or keep a standalone layout.
-2. Replace `mix('js/...')` page bootstraps with `@vite(['resources/js/vite/...'])`.
+1. Change `@extends(...)` to `layouts.layoutnextvite` (in-app) or keep standalone/auth layout.
+2. Replace `mix('js/...')` page bootstraps with `@vite([...])`.
 3. Register the JS/CSS entry in `vite.config.js` → `laravel({ input: [...] })`.
-4. Keep Mix-built package scripts as classic `<script src="...">` when packages still ship Mix assets.
+4. Keep Mix-built package scripts as classic `<script src="...">` when packages still ship Mix assets (`$manager->getScripts()`, `GlobalScripts`, etc.).
+
+Entries may live under:
+
+- `resources/js/vite/<area>/` (Tasks, auth)
+- Feature folder next to the UI (e.g. `resources/js/admin/`, `resources/js/processes-catalogue/`)
+- Composition tree (e.g. `resources/jscomposition/cases/casesMain/`)
 
-Login still uses the classic path: `LoginController` → `config('app.login_view')` / `LOGIN_VIEW` (default `auth.newLogin`), else `auth.login`. A Vite login **entry** (`resources/js/vite/auth/login.js`) remains registered in `vite.config.js` for a future auth migration; there is currently **no** `resources/views/vite/auth/` Blade.
+Prefer co-locating the Vite entry with the feature source when that tree already owns the page.
+
+Shared admin chrome: `resources/js/admin/loaderAdmin.js` (`setupMain` + packages) is used by Script Executors, Tenant Queues, DevLink, Cases Retention, and Logs.
 
 ## Folder layout
 
 ```
-resources/views/vite/          ← optional Vite-only Blades (demo)
 resources/views/layouts/layoutnextvite.blade.php
-resources/views/tasks/index.blade.php  ← migrated in place to Vite layout + entries
-resources/js/vite/             ← JS entrypoints
-resources/sass/app.scss        ← shared styles also compiled by Vite (same sources as Mix)
-vite.config.js                 ← inputs, aliases, extensions, server, hotFile
+resources/views/tasks/index.blade.php                 ← Vite
+resources/views/tasks/preview.blade.php               ← Vite standalone (iframe)
+resources/views/notifications/index.blade.php         ← Vite
+resources/views/templates/import.blade.php            ← Vite
+resources/views/templates/configure.blade.php         ← Vite
+resources/views/templates/assets.blade.php            ← Vite (export-screen/import-screen/list still Mix)
+resources/views/processes/index.blade.php             ← Vite (Designer /processes)
+resources/views/processes/edit.blade.php              ← Vite (Configure Process)
+resources/views/processes/list.blade.php              ← mounts @vite processes.js (@append)
+resources/views/processes-catalogue/index.blade.php   ← Vite (desktop)
+resources/views/cases/casesMain.blade.php             ← Vite
+resources/views/cases/edit.blade.php                  ← Vite (case detail)
+resources/views/auth/newLogin.blade.php               ← Vite
+resources/views/auth/layouts/auth.blade.php           ← Vite scripts (reset/email)
+resources/views/admin/script-executors/index.blade.php ← Vite
+resources/views/admin/tenant-queues/index.blade.php   ← Vite
+resources/views/admin/queues/index.blade.php          ← Vite layout (Horizon iframe; no page app)
+resources/views/admin/settings/ldap-logs.blade.php    ← Vite
+resources/views/admin/devlink/index.blade.php         ← Vite
+resources/views/admin/cases-retention/index.blade.php ← Vite
+resources/views/admin/logs/index.blade.php            ← Vite
+resources/views/processes/environment-variables/index.blade.php ← Vite
+resources/views/processes/environment-variables/edit.blade.php  ← Vite
+resources/views/processes/screens/index.blade.php       ← Vite (Screens listing tabs)
+resources/views/processes/screens/edit.blade.php        ← Vite (Configure Screen)
+resources/views/processes/modeler/index.blade.php       ← Vite (process modeler)
+resources/js/vite/tasks/                              ← Tasks entries
+resources/js/vite/auth/login.js                       ← Login / auth layout entry
+resources/js/admin/loaderAdmin.js                     ← shared admin setupMain loader
+resources/js/processes/environment-variables/loaderEnvironment.js ← env vars setupMain loader
+resources/js/processes/screens/loaderScreens.js       ← screens setupMain loader
+resources/js/processes-catalogue/loaderProcessesCatalogue.js
+resources/jscomposition/cases/casesMain/loaderCasesMain.js
+resources/js/translations/index.js                    ← shared i18n Vite entry
+resources/sass/*.scss|css                             ← also compiled by Vite for layoutnextvite
+vite.config.js
 ```
 
-Current examples:
+## Current migrations
+
+| Route area | Status | View | JS entry(ies) |
+|------------|--------|------|----------------|
+| Tasks inbox | **Vite** | `tasks.index` + `layoutnextvite` | `vite/tasks/loaderTasks.js` → ScreenBuilder scripts → `vite/tasks/tasks.js` |
+| Task edit | **Vite** | `tasks.edit` + `layoutnextvite` | `tasks/loaderEdit.js` → `tasks/edit.js` + inline Vue on `load` |
+| Task preview (iframe) | **Vite** | `tasks.preview` — **standalone** (no layout) | `tasks/loaderPreview.js` → `tasks/preview.js` |
+| Task show | **Vite** | `tasks.show` + `layoutnextvite` | `tasks/loaderTasks.js` → `tasks/show.js` |
+| Inbox Rules | **Vite** | `inbox-rules.index` + `layoutnextvite` | `inbox-rules/index.js` |
+| About | **Vite** | `about.index` + `layoutnextvite` | layout change only; no page JS entry |
+| Profile edit | **Vite** | `profile.edit` + `layoutnextvite` | `admin/profile/loaderProfile.js` → `admin/profile/edit.js` |
+| Requests index | **Vite** | `requests.index` + `layoutnextvite` | `requests/loaderRequests.js` → `requests/index.js` |
+| Notifications | **Vite** | `notifications.index` + `layoutnextvite` | `notifications/loaderNotifications.js` → `notifications/index.js` |
+| Template Import | **Vite** | `templates.import` + `layoutnextvite` | `templates/loaderTemplates.js` → `templates/import/index.js` (Vue Router) |
+| Template Configure | **Vite** | `templates.configure` + `layoutnextvite` | boot `window.temporal.templateConfigurations` → `templates/loaderTemplates.js` → `templates/configure.js` + `mixins: addons` |
+| Template Assets | **Vite** | `templates.assets` + `layoutnextvite` | `templates/loaderTemplates.js` → `templates/assets.js` (state from `localStorage`) |
+| Processes (Designer) | **Vite** | `processes.index` + `layoutnextvite`; apps via child `@append` | `processes/loaderProcesses.js` → `processes.js` / `templates` / `categories` / `archived` |
+| Designer home | **Vite** | `designer.index` + `layoutnextvite` | `processes/loaderProcesses.js` → `newDesigner.js` |
+| Process Export | **Vite** | `processes.export` + `layoutnextvite` | `processes/loaderProcesses.js` → `export/index.js` (Vue Router) |
+| Process Import | **Vite** | `processes.import` + `layoutnextvite` | `processes/loaderProcesses.js` → `import/index.js` (Vue Router) |
+| Process Configure | **Vite** | `processes.edit` + `layoutnextvite` | `processes/loaderProcesses.js` → `processes/edit.js` + inline Vue boot |
+| Admin Users | **Vite** | `admin.users.index` + `edit` + `layoutnextvite` | `admin/users/loaderUsers.js` → `index.js` / `edit.js` + inline Vue boot |
+| Admin Groups | **Vite** | `admin.groups.index` + `edit` + `layoutnextvite` | `admin/groups/loaderGroups.js` → `index.js` / `edit.js` + inline Vue boot |
+| Admin Auth Clients | **Vite** | `auth-clients.index` + `layoutnextvite` | `admin/auth-clients/loaderAuthClients.js` → `index.js` |
+| Admin Settings | **Vite** | `settings.index` + `layoutnextvite` | `admin/settings/loaderSettings.js` → `index.js` (+ optional package email-listener Mix) |
+| Admin LDAP Logs | **Vite** | `admin.settings.ldap-logs` + `layoutnextvite` | `admin/users/loaderUsers.js` → `admin/settings/ldaplogs.js` |
+| Admin Customize UI | **Vite** | `customize-ui.edit` + `layoutnextvite` | `admin/cssOverride/loaderCssOverride.js` → `edit.js` (Tinymce) + inline Vue on `load` |
+| Admin Script Executors | **Vite** | `script-executors.index` + `layoutnextvite` | `admin/loaderAdmin.js` → `admin/script-executors/index.js` |
+| Admin Tenant Queues | **Vite** | `tenant-queue.index` + `layoutnextvite` | `admin/loaderAdmin.js` → `admin/tenant-queues/index.js` (Vue Router) |
+| Admin Queues (Horizon) | **Vite layout** | `admin.queues.index` + `layoutnextvite` | `admin/users/loaderUsers.js` only; page is an iframe to `/admin/horizon` |
+| Admin DevLink | **Vite** | `devlink.index` + `layoutnextvite` | `admin/loaderAdmin.js` → `admin/devlink/index.js` (Vue Router) |
+| Admin Cases Retention | **Vite** | `cases-retention.index` + `layoutnextvite` | `admin/loaderAdmin.js` → `admin/cases-retention/index.js` |
+| Admin Logs | **Vite** | `admin.logs` + `layoutnextvite` | packages boot → `admin/loaderAdmin.js` → `admin/logs/index.js` (Vue Router) |
+| Environment Variables | **Vite** | `environment-variables.index` + `edit` + `layoutnextvite` | `processes/environment-variables/loaderEnvironment.js` → `index.js` / `edit.js` |
+| Screens (Designer) | **Vite** | `screens.index` + `edit` + `layoutnextvite`; tab apps via child `@append` | `processes/screens/loaderScreens.js` → `screens/index.js` / `screen-templates/myTemplates.js` / `publicTemplates.js` / `categories/index.js`; edit → `screens/edit.js` |
+| Scripts (Designer) | **Vite** | `scripts.index` + `scripts.edit` (configure) + `layoutnextvite` | `processes/scripts/loaderScripts.js` → `index.js`; configure → `editConfig.js` + inline Vue on `load` |
+| Signals (Designer) | **Vite** | `signals.index` + `signals.edit` + `layoutnextvite` | `processes/signals/loaderSignals.js` → `index.js`; edit → `edit.js` + inline Vue on `load` |
+| Modeler | **Vite** | `processes.modeler.index` + `layoutnextvite` | `modeler/loaderModeler.js` (imports `initialLoad.js`) → package Mix scripts → `leave-warning.js` → `modeler/index.js` on `load` |
+| Processes Catalogue (desktop) | **Vite** | `process.browser.index` (`/process-browser`) + `layoutnextvite` | `processes-catalogue/loaderProcessesCatalogue.js` → ScreenBuilder scripts → `processesCatalogue.js` |
+| Cases | **Vite** | `cases.casesMain` (`/cases`) + `layoutnextvite` | `jscomposition/.../loaderCasesMain.js` → GlobalScripts / ScreenBuilder → `casesMain.js` |
+| Case Detail | **Vite** | `cases.edit` + `layoutnextvite` | `jscomposition/.../loaderCasesDetail.js` → `initialLoad` (Vite) + GlobalScripts / modeler scripts → `casesDetail.js` |
+| Login | **Vite** | `LOGIN_VIEW` / `auth.newLogin` | Head: `app.scss` + `vite/auth/login.js`; footer: GlobalScripts (skip dynamic-ui) + `translations/index.js` |
+| Auth layout (reset / email) | **Vite scripts** | `auth.layouts.auth` | `vite/auth/login.js` → GlobalScripts (skip dynamic-ui) → packages boot → `translations/index.js` |
+| Processes Catalogue (mobile) | Mix | `processes-catalogue/mobile.blade.php` | Mix catalogue / mobile bundle |
+
+## Registered Vite inputs (`vite.config.js`)
 
-| Route area | View | JS entry(ies) |
-|------------|------|-----------------|
-| Tasks inbox | `tasks.index` → `resources/views/tasks/index.blade.php` + `layoutnextvite` | `loaderTasks.js`, then package scripts, then `tasks.js` |
-| Demo | `/vite` → `vite.index` | `resources/js/vite/sample/app.js` |
-| Login (not switched) | `LOGIN_VIEW` / `auth.login` | Mix / legacy; Vite entry `auth/login.js` reserved |
+```
+resources/js/vite/auth/login.js
+resources/js/translations/index.js
+resources/js/vite/tasks/loaderTasks.js
+resources/js/vite/tasks/tasks.js
+resources/js/tasks/loaderEdit.js
+resources/js/tasks/edit.js
+resources/js/tasks/loaderPreview.js
+resources/js/tasks/preview.js
+resources/js/tasks/loaderTasks.js
+resources/js/tasks/show.js
+resources/js/inbox-rules/index.js
+resources/js/processes/loaderProcesses.js
+resources/js/processes/processes.js
+resources/js/processes/edit.js
+resources/js/processes/newDesigner.js
+resources/js/processes/export/index.js
+resources/js/processes/import/index.js
+resources/js/templates/index.js
+resources/js/processes/categories/index.js
+resources/js/processes/archived.js
+resources/js/admin/loaderAdmin.js
+resources/js/admin/users/loaderUsers.js
+resources/js/admin/users/index.js
+resources/js/admin/users/edit.js
+resources/js/admin/groups/loaderGroups.js
+resources/js/admin/groups/index.js
+resources/js/admin/groups/edit.js
+resources/js/admin/auth-clients/loaderAuthClients.js
+resources/js/admin/auth-clients/index.js
+resources/js/admin/settings/loaderSettings.js
+resources/js/admin/settings/index.js
+resources/js/admin/settings/ldaplogs.js
+resources/js/admin/cssOverride/loaderCssOverride.js
+resources/js/admin/cssOverride/edit.js
+resources/js/admin/script-executors/index.js
+resources/js/admin/tenant-queues/index.js
+resources/js/admin/devlink/index.js
+resources/js/admin/cases-retention/index.js
+resources/js/admin/logs/index.js
+resources/js/admin/profile/loaderProfile.js
+resources/js/admin/profile/edit.js
+resources/js/requests/loaderRequests.js
+resources/js/requests/index.js
+resources/js/notifications/loaderNotifications.js
+resources/js/notifications/index.js
+resources/js/templates/loaderTemplates.js
+resources/js/templates/import/index.js
+resources/js/templates/configure.js
+resources/js/templates/assets.js
+resources/js/processes/environment-variables/loaderEnvironment.js
+resources/js/processes/environment-variables/index.js
+resources/js/processes/environment-variables/edit.js
+resources/js/processes/screens/loaderScreens.js
+resources/js/processes/screens/index.js
+resources/js/processes/screen-templates/myTemplates.js
+resources/js/processes/screen-templates/publicTemplates.js
+resources/js/processes/screens/edit.js
+resources/js/processes/scripts/loaderScripts.js
+resources/js/processes/scripts/index.js
+resources/js/processes/scripts/editConfig.js
+resources/js/processes/scripts/edit.js
+resources/js/processes/modeler/loaderModeler.js
+resources/js/processes/modeler/index.js
+resources/js/processes/signals/loaderSignals.js
+resources/js/processes/signals/index.js
+resources/js/processes/signals/edit.js
+resources/js/processes-catalogue/loaderProcessesCatalogue.js
+resources/js/processes-catalogue/processesCatalogue.js
+resources/jscomposition/cases/casesMain/loaderCasesMain.js
+resources/jscomposition/cases/casesMain/casesMain.js
+resources/jscomposition/cases/casesDetail/loaderCasesDetail.js
+resources/jscomposition/cases/casesDetail/casesDetail.js
+resources/js/initialLoad.js
+resources/sass/app.scss
+resources/sass/sidebar/sidebar.scss
+resources/sass/collapseDetails.scss
+resources/sass/tailwind.css
+```
 
 ## npm scripts
 
@@ -82,64 +242,320 @@ Dev tips:
 ## Checklist: transition a route to Vite
 
 1. **Blade**
-   - Prefer editing the existing Mix Blade in place (as with tasks), or add `resources/views/vite/<area>/<page>.blade.php` for greenfield/demo pages.
+   - Edit the existing Mix Blade in place.
    - Prefer `@extends('layouts.layoutnextvite')` for in-app pages.
-   - Load page JS with `@vite(['resources/js/vite/...'])`. Do **not** rely on `mix('css/app.css')` for Vite-only chrome if using `layoutnextvite`.
-   - Keep Mix package scripts that are still Mix-built as classic `<script src="{{ mix(...) }}">` / `$manager->getScripts()` when required.
-   - **Script order matters** when Mix packages depend on boot data / ScreenBuilder:
-     1. Inline boot (`window.temporal = {...}`)
-     2. `@vite` loader entry (e.g. `loaderTasks.js`)
-     3. Package scripts (`defer`)
-     4. `@vite` page app (e.g. `tasks.js`)
-
-2. **JS entry**
-   - Add `resources/js/vite/<area>/<entry>.js` (Vue 2 Options API; `import Vue from 'vue'` in ESM).
-   - Register the path in `vite.config.js` → `laravel({ input: [...] })`.
-   - `.vue` extension in imports is **optional**: `resolve.extensions` includes `.vue` (see below). Explicit `.vue` is still fine and unambiguous.
-   - Side-effect modules used only for prototypes must `export default` if imported as default (see `resources/js/modules/isPMQL.js`).
-   - Prefer mirroring Mix globals when shared components expect `window.Processmaker` (lowercase `m`) as well as `window.ProcessMaker`.
-
-3. **Controller**
-   - Usually **no** controller change if the Blade name stays the same (`tasks.index`).
-   - Pass the **same** view data the page already expected. Missing vars cause Blade/Vue errors.
-   - For login later: wire a Vite Blade via `LOGIN_VIEW` or restore a map; do not leave a Vite view that expects `$block` / `addons` without providing them.
-
-4. **Verify**
-   - With `vite:dev`: Network shows `127.0.0.1:5173` for `@vite` assets; Mix URLs stay on the app host (`/js/...`, `/css/...`).
-   - Without Vite running: `@vite` needs a prior `vite:build` (manifest), or the page errors.
-   - `mix('...')` must **not** point at `:5173` (if it does, delete stale `public/hot` and confirm `Vite::useHotFile(storage_path('vite.hot'))`).
-
-5. **Do not**
+   - Load page JS with `@vite([...])`.
+   - Keep Mix package scripts as classic tags / `$manager->getScripts()` / `GlobalScripts` when required.
+   - Prefer a **small surface**: swap layout + replace the primary Mix page script. Avoid inventing `$vite` flags on every shared child partial unless those children must stay Mix-only on other routes.
+   - **Script order:**
+     1. Inline boot (`window.temporal = {...}`; set `window.packages` if `setupMain` needs it)
+     2. `@vite` loader (`setupMain` + ScreenBuilder as needed)
+     3. Package scripts (`defer` — after yield in `layoutnextvite`)
+     4. `@vite` page app (often via `@section('js')` / `@append` from a child Blade)
+
+2. **Blade ↔ Vue bindings (common failure mode)**
+   - `__()` is PHP. Vue never runs it. In a Vue attribute it must be executed by Blade.
+   - Strings for `:prop` → `:type="{{ Js::from(__('Process')) }}"` (JSON-quoted string Vue can evaluate).
+   - Plain text props → `type="{{ __('Process') }}"` (no `:`).
+   - Booleans / numbers / arrays → always bind with `:` and `@json(...)` (or `Js::from`):
+     - Good: `:is-ab-testing-installed="@json(...)"` → Vue gets `true`/`false`
+     - Bad: `is-ab-testing-installed="{{ ... }}"` → PHP `true` becomes string `"1"` → Vue prop type warning
+   - Do **not** use `@{{ __('...') }}` for server translations (`@{{` is for Vue interpolations in the template).
+   - Root Vue on a Blade `el` (e.g. `#editCss`): directives in that Blade (`v-if="showTabs"`) bind to the Vue instance mounted on that `el`. Blade does not “pass” the variable; Vue owns the DOM after mount.
+
+3. **JS entry**
+   - Vue 2 Options API; `import Vue from 'vue'` / `import VueRouter from 'vue-router'` in ESM.
+   - Register in `vite.config.js` → `laravel({ input: [...] })`.
+   - `.vue` extension optional (`resolve.extensions` includes `.vue`); prefer explicit `.vue` imports.
+   - Mirror `window.ProcessMaker` **and** `window.Processmaker` when legacy mixins expect the lowercase `m`.
+   - Prefer reading Blade boot data from `window.temporal` / `window.ProcessMaker` (ESM cannot see Blade `const` / `let`).
+   - Avoid circular ESM: do not import feature `EventBus` from a Mix page entry that also imports the feature graph.
+   - Multi-tab pages (e.g. Designer Processes): one Vite page entry may mount **all** tab roots (`#processIndex`, `#templatesIndex`, `#categories-listing`, `#archivedProcess`) instead of one Mix file per tab.
+   - Register globals the child Blades expect (`Required`, listing components) in that same entry when Mix chrome no longer does it.
+   - Do **not** double-mount the same `el` from two entries (first mount strips Vue directives; second remount leaves dead UI).
+
+4. **Mix cleanup**
+   - Remove the migrated Mix input from `webpack.mix.js` when no Blade still calls `mix('js/...')` for it.
+   - Leave Mix entries that other routes / shared child Blades still load (scripts, modeler, screens preview, etc.).
+
+5. **Controller**
+   - Usually no change if the Blade name stays the same.
+   - Pass the same view data the page already expected.
+
+6. **Verify**
+   - With `vite:dev`: Network shows `127.0.0.1:5173` for `@vite` assets; Mix URLs stay on the app host.
+   - Without Vite running: need a prior `vite:build` (manifest).
+   - `mix('...')` must not point at `:5173` (delete stale `public/hot` if it does).
+   - Check Vue console for prop type warnings (`Expected Boolean, got String "1"`) after migrating Blade attrs.
+   - **PHPUnit:** `Tests\TestCase` calls `withoutVite()` so `@vite` Blades do not need `public/build/manifest.json`. Feature tests only see server HTML (JS-mounted DOM is not executed). Mix helpers still need `mix-manifest.json` if the Blade still calls `mix()`.
+
+7. **Do not**
    - Alias `@vite` in `vite.config.js` (shadows `@vite/client` / `@vite/env`).
-   - Assume absolute `/img/...` or `/css/...` inside Vite-served CSS resolve to Vite (fonts use `APP_URL` during `serve`).
    - Point Vite `hotFile` at `public/hot`.
+   - Include `auth.partials.auth-language-scripts` on Vite auth pages (still references dead Mix `builds/login/js/...` → `MixFileNotFoundException`).
+   - Leave debug `console.log` in boot Blades (e.g. `cases/edit` `temporal` dumps).
+   - Put `resources/js/**/*.{js,vue}` in Laravel Vite `refresh` if you want component HMR (that forces full page reload).
 
 ## Known Vite config notes (`vite.config.js`)
 
-- **`resolve.extensions`**: includes `.vue` so imports may omit the extension (`import X from './Foo'` resolves `Foo.vue`). If both `Foo.js` and `Foo.vue` exist, `.js` wins (listed first).
-- **Styles alias**: `styles` / `~styles` → `resources/sass` (same as Mix) for `@import '~styles/variables'` in SFCs; Sass importer mirrors Webpack `~styles/...`.
+- **`resolve.extensions`**: includes `.vue`. If both `Foo.js` and `Foo.vue` exist, `.js` wins.
+- **Styles alias**: `styles` / `~styles` → `resources/sass`; Sass importer mirrors Webpack `~styles/...`.
 - **Tailwind**: entry `resources/sass/tailwind.css` + root `postcss.config.js`.
-- **Fonts in `serve`**: Sass `$FontPathOpenSans` / `$fa-font-path` prefixed with `APP_URL`; in `build`, root-absolute `/css/precompiled/...`.
-- **Vue2 plugin**: `includeAbsolute: false` so `/img/...` stays Laravel public URLs.
-- **`refresh`**: Blades under `resources/views/vite/**`, plus `resources/js/**/*.{js,vue}` and `resources/sass/**` (note: in-place Blades like `tasks/index.blade.php` are outside the vite views glob — hard-refresh or extend `refresh` if full reload on Blade edit is required).
-- **YAML plugin**: `@rollup/plugin-yaml` for YAML imports used by shared modules.
+- **Fonts**: Sass `$FontPathOpenSans` / `$fa-font-path` are root-relative (`/css/precompiled/...`). During `vite:dev`, `server.proxy['/css']` forwards to `APP_URL` (avoids CORS).
+- **Vue2 plugin**: `includeAbsolute: false` so `/img/...` stays Laravel public URLs. Enables **component HMR** for `.vue` SFCs.
+- **`refresh`**: `resources/views/**`, `resources/sass/**` → **full page reload** when those change. Do not list page JS/Vue here if you want HMR.
+- **`server.hmr`**: WebSocket host/protocol only; does not choose full vs component reload.
+- **YAML plugin**: `@rollup/plugin-yaml`.
+- **Modeler**: `modelerPublicPathPlugin` rewrites `@processmaker/modeler` Webpack-style `img/` URLs to `/js/img/`; `optimizeDeps.exclude: ['@processmaker/modeler']` so that transform runs.
+
+## Quick reference
+
+**Processes (Designer)** — `/processes`
+
+- View: `resources/views/processes/index.blade.php` → `layoutnextvite`
+- Loader: `@vite(['resources/js/processes/loaderProcesses.js'])`
+- Page apps via child `@append`: `processes.js`, `templates/index.js`, `categories/index.js`, `archived.js` (one mount each — avoid double-mounting the same `el`)
+- `loaderProcesses.js`: `setupMain()` + copy `window.temporal?.packages` onto `ProcessMaker.packages` / `window.packages`
+- Mix: `webpack.mix.js` no longer builds `resources/js/processes/index.js` / `edit.js` / `newDesigner.js`. Other Designer Mix bundles (script preview, modeler inflight `process-map.js`, Mix `initialLoad.js` for Mix pages) remain.
+
+**Designer home** — `/designer`
+
+- View: `resources/views/designer/index.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` + `window.Processmaker.user` before loader
+- Entries: `loaderProcesses.js` → `newDesigner.js` (mounts `#new-designer`)
+- Boolean Blade props (`project`, `is-documenter-installed`) use `:prop="@json(...)"`
+
+**Process Export** — `/processes/{process}/export`
+
+- View: `resources/views/processes/export.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before loader
+- Entries: `loaderProcesses.js` → `export/index.js` (uses `window.ProcessMaker.Router`, meta tags for process name / project id)
+
+**Process Import** — `/processes/import`
+
+- View: `resources/views/processes/import.blade.php` → `layoutnextvite`
+- Boot: packages + `ProcessMaker.importIsRunning` / `queueImports` (booleans via `@json`) before loader
+- Entries: `loaderProcesses.js` → `import/index.js` (Vue Router; shares export `State` / `CustomExportView`)
+
+**Process Configure** — `/processes/{process}/edit`
+
+- View: `resources/views/processes/edit.blade.php` → `layoutnextvite`
+- Boot: set `window.temporal.packages` / `window.packages` before loader
+- Entries: `loaderProcesses.js` → `edit.js` (registers `CategorySelect`, `ProcessesPermissions`)
+- Vue root stays **inline** in the Blade (`window.addEventListener('load', …)`) so Blade `@json(...)` boot data and plugin `mixins: addons` keep working without a full ESM rewrite
+- Plugin addons still come from `layoutnextvite` (`var addons = []` + `script` / `script_mix`)
+
+**Scripts (Designer)** — `/designer/scripts`, `/designer/scripts/{script}/edit` (configure)
+
+- Views: `processes/scripts/index.blade.php`, `processes/scripts/edit.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before loader
+- Index: `loaderScripts.js` → `index.js` (via categorized resource / list)
+- Configure: `loaderScripts.js` → `editConfig.js` (registers `CategorySelect`, `SliderWithInput`) + inline Vue on `load` (`mixins: addons`)
+- Mix still builds script **builder** (`edit.js`) and **preview** (`preview.js`)
+
+**Signals (Designer)** — `/designer/signals`, `/designer/signals/{signalId}/edit`
+
+- Views: `processes/signals/index.blade.php`, `processes/signals/edit.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before loader
+- Index: `loaderSignals.js` → `index.js` (mounts `#listSignals` with create modal + listing)
+- Edit: `loaderSignals.js` → `edit.js` (registers `CatchListing`) + inline Vue on `load` (`mixins: addons`)
+
+**Admin Users** — `/admin/users`, `/admin/users/{user}/edit`
+
+- Views: `admin/users/index.blade.php`, `admin/users/edit.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before loader
+- Index: `loaderUsers.js` → `index.js` (mounts listings; `window.loadUsers` / `loadDeletedUsers`)
+- Edit: `loaderUsers.js` → `edit.js` (registers password/listing components) + inline Vue on `load` (`modalVueInstance` + `formVueInstance`, `mixins: addons`)
+- Mix: no longer builds `admin/users/index.js` or `edit.js`
+
+**Admin Groups** — `/admin/groups`, `/admin/groups/{group}/edit`
+
+- Views: `admin/groups/index.blade.php`, `admin/groups/edit.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before loader
+- Index: `loaderGroups.js` → `index.js` (registers `GroupsListing` + mounts `#listGroups`)
+- Edit: `loaderGroups.js` → `edit.js` (registers listing/select components) + inline Vue on `load` (`mixins: addons`, Blade `@json`)
+- Mix: no longer builds `admin/groups/index.js` or `edit.js`
+
+**Admin Auth Clients** — `/admin/auth-clients`
+
+- View: `resources/views/admin/auth-clients/index.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before loader
+- Entries: `loaderAuthClients.js` → `index.js` (registers `AuthClientsListing` + mounts `#authClients`)
+- Mix: no longer builds `admin/auth-clients/index.js`
+
+**Admin Settings** — `/admin/settings`
+
+- View: `resources/views/admin/settings/index.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before loader
+- Entries: `loaderSettings.js` → optional Mix `email-listener.js` (package-email-start-event) → `index.js` (mounts `#settings` / `SettingsMain`)
+- Plugin addon HTML still rendered in content; addon scripts via `layoutnextvite`
+- Mix: no longer builds `admin/settings/index.js`
+
+**Admin LDAP Logs** — settings LDAP logs
+
+- View: `resources/views/admin/settings/ldap-logs.blade.php` → `layoutnextvite`
+- Entries: `admin/users/loaderUsers.js` → `admin/settings/ldaplogs.js`
+- Mix: no longer builds `admin/settings/ldaplogs.js`
+
+**Admin Customize UI** — `/admin/customize-ui/{tab?}`
+
+- View: `resources/views/admin/cssOverride/edit.blade.php` → `layoutnextvite`
+- Boot: packages + `window.config` / `loginFooterSetting` / `altTextSetting` before loader (ESM-safe for `SiteDesign.vue`)
+- Entries: `loaderCssOverride.js` → `edit.js` (registers Tinymce + `SiteDesign` / `ColorPicker`) + **inline Vue on `load`** (`#editCss`, `showTabs` / package `cssOverrideTabs`)
+- TinyMCE under Vite: import core + theme + `icons/default` + plugins; with `skin: false` also import `tinymce/skins/ui/oxide/skin.min.css`. Content iframe CSS: inject oxide/default content CSS via `content_style` (`?raw`) plus `content_css: '/css/app.css'` — parent-page CSS imports do not apply inside the editor iframe.
+- Package tabs: `showTabs` is `tabs.length > 1`. `cssOverrideTabs` may arrive after page modules because addon scripts load after `@yield('js')`; merge on `window` `load` when needed.
+- Mix: no longer builds `admin/cssOverride/edit.js`
+
+**Admin Script Executors** — `/admin/script-executors`
+
+- View: `resources/views/admin/script-executors/index.blade.php` → `layoutnextvite`
+- Entries: `admin/loaderAdmin.js` (in content) → `admin/script-executors/index.js` (mounts `#script-executors`)
+- Mix: no longer builds this page entry
+
+**Admin Tenant Queues** — `/admin/tenant-queues`
+
+- View: `resources/views/admin/tenant-queues/index.blade.php` → `layoutnextvite`
+- Entries: `admin/loaderAdmin.js` → `admin/tenant-queues/index.js` (Vue Router + `#tenant-queues-dashboard`)
+- Access: not a `can:*` ability — `TenantQueueController::checkPermissions()` requires `is_administrator`, `config('app.multitenancy')`, and `!config('queue.disable_tenant_tracking')`
+- Mix: no longer builds this page entry
+
+**Admin Queues (Horizon)** — queue management iframe
+
+- View: `resources/views/admin/queues/index.blade.php` → `layoutnextvite`
+- Only loads `admin/users/loaderUsers.js` for chrome; body is `<iframe src="/admin/horizon">`
+- May redirect to tenant-queues when tenant tracking is restricted
+
+**Admin DevLink** — `/admin/devlink/{router?}`
+
+- View: `resources/views/admin/devlink/index.blade.php` → `layoutnextvite`
+- Entries: `admin/loaderAdmin.js` → `admin/devlink/index.js` (Vue Router base `/admin/devlink`, mounts `#devlink` / `<dev-link>`)
+- Web routes (middleware `admin`): `devlink.index` → `DevLinkController@index` (returns the Blade, or OAuth redirects); `devlink.oauth-client` → `getOauthClient` (**no Blade** — creates Passport client and redirects with query params)
+- Mix: no longer builds `admin/devlink/index.js`
+
+**Admin Cases Retention** — `/admin/cases-retention`
+
+- View: `resources/views/admin/cases-retention/index.blade.php` → `layoutnextvite`
+- Entries: `admin/loaderAdmin.js` → `admin/cases-retention/index.js` (mounts `#casesRetentionIndex` with `CasesRetentionLogs`; uses `window.Vue`)
+- Mix: no longer builds `admin/cases-retention/index.js`
+
+**Admin Logs** — `/admin/logs/{any?}`
+
+- View: `resources/views/admin/logs/index.blade.php` → `layoutnextvite`
+- Boot **before** loader: `window.temporal.packages` / `window.packages` (router guards call `hasEmailPackage()` / `hasAiPackage()` via `ProcessMaker.packages`)
+- Entries: `admin/loaderAdmin.js` → `admin/logs/index.js` (Vue Router base `/admin/logs`, mounts `#admin-logs-main`)
+- **Pitfall:** empty `packages` makes `/` redirect to `/email/errors` and email guard bounce back to `/` → `RangeError: Maximum call stack size exceeded`. Always boot packages before the page entry; guards must not fall back to `/` when no package is present.
+- Mix: no longer builds `admin/logs/index.js`
+
+**Environment Variables** — `/designer/environment-variables`, edit
+
+- Views: `processes/environment-variables/index.blade.php`, `edit.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages`; edit also sets `window.temporal.EnvironmentVariableEdit` (ESM-safe form data)
+- Entries: `loaderEnvironment.js` → `index.js` / `edit.js`
+- Mix: no longer builds `processes/environment-variables/index.js` or `edit.js`
+
+**Screens (Designer)** — `/designer/screens`, configure screen
+
+- Index view: `resources/views/processes/screens/index.blade.php` → `layoutnextvite`
+- Boot: `window.temporal.packages` / `window.packages` before `loaderScreens.js`
+- Tab apps via child `@append` (same pattern as Processes Designer):
+  - `processes/screens/list.blade.php` → `screens/index.js`
+  - `processes/screens/myTemplates.blade.php` → `screen-templates/myTemplates.js`
+  - `processes/screens/publicTemplates.blade.php` → `screen-templates/publicTemplates.js`
+  - Categories tab reuses `categories/list` → `processes/categories/index.js`
+- Edit view: `processes/screens/edit.blade.php` → `layoutnextvite`
+- Edit boot: packages + `window.temporal.screen` / `assignedProjects` / `isDraft` → `loaderScreens.js` → `screens/edit.js`
+- Still Mix: `preview.js` (`screens/preview.blade.php`, `completedScreen.blade.php`); templates import if still on Mix layouts
+- Mix: no longer builds `screens/index.js`, `edit.js`, or screen-templates `myTemplates` / `publicTemplates`
+
+**Tasks**
+
+- View: `resources/views/tasks/index.blade.php` → `layoutnextvite`
+- Entries: `resources/js/vite/tasks/loaderTasks.js` → `$manager->getScripts()` → `tasks.js`
+- Boot: `window.temporal` before loader
+
+**Task Preview (iframe)** — `/tasks/{task}/edit/preview`
+
+- Route: `tasks.preview` → `TaskController@edit($task, $preview = 'preview')`
+- View: `resources/views/tasks/preview.blade.php` — **standalone HTML** (no `@extends`); designed to be embedded as an `<iframe>` in the Tasks inbox sidebar
+- Boot (before loader): `window.packages` + `const task` + `const screenBuilderScripts` + `const screenFields` — all as regular `<script>` so they are synchronously available to ESM modules
+- Entries: `tasks/loaderPreview.js` (`setupMain` + `screenBuilder`) → `tasks/preview.js`
+- EventBus registration: use `window.addEventListener('app-bootstrapped', …)` **not** `'load'`. `setupMain` dispatches `app-bootstrapped` synchronously during `loaderPreview.js`; by `'load'` the screen has already emitted `screen-renderer-init`
+- Cross-frame events: `preview.js` dispatches `dataUpdated`, `taskReady`, `userHasInteracted` to `window.parent`. **Guard every `sendEvent` call with `if (!window.frameElement) return`** — without this, `window.parent === window` (direct access, not iframe), events loop back into the same page and trigger an infinite Vue reactivity cycle
+- Vue 2 watcher pitfall: `screenFilteredData` computed always returns a **new object reference**. Watching it with `deep: true` and accessing `this.screenFilteredData` inside the handler causes Vue to re-queue the watcher infinitely. **Always use the `newValue` parameter** (`handler(newValue) { sendEvent("dataUpdated", newValue); }`)
+- Breadcrumbs guard: `window.ProcessMaker.breadcrumbs` is only set up by the full sidebar/navbar layout; preview runs standalone, so guard: `if (window.ProcessMaker.breadcrumbs) { ... }` in the `task` watcher
+
+**Templates** — import & configure
+
+Shared loader: `templates/loaderTemplates.js` — `setupMain()` + `window.ProcessMaker.packages = window.temporal?.packages || []`. No explicit boot script needed for packages.
+
+*Template Import* — `/template/{type}/import` (`templates.import`)
+
+- View: `resources/views/templates/import.blade.php` → `layoutnextvite`
+- Asset type via `<meta name="import-template-asset-type" content="{{ $type }}">` (read in JS)
+- Entry: `templates/import/index.js` — Vue Router on `window.ProcessMaker.Router`; reuses `ImportManagerView` from `processes/import`, `State` from `processes/export`, adds `TemplateDetailConfigs`
+
+*Template Configure* — `/template/{type}/{template}/configure` (`templates.configure`)
+
+- View: `resources/views/templates/configure.blade.php` → `layoutnextvite`
+- Boot (in `@section('js')` before loader): `window.temporal.templateConfigurations = { data, templateType, screenTypes }`
+- Entry: `templates/configure.js` — registers `ProcessTemplateConfigurations` / `ScreenTemplateConfigurations`, mounts `#configureTemplate` with `mixins: addons` and reads all data from `window.temporal.templateConfigurations`
+- **Pitfall**: `:permission="{{ ... }}"` passes PHP `true` as string `"1"`; should use `:permission="@json(...)"`. Flag for future fix.
+
+*Template Assets* — `templates.assets`
+
+- View: `resources/views/templates/assets.blade.php` → `layoutnextvite`
+- No boot script; data is read from `localStorage.getItem("templateAssetsState")` in `mounted()` (state is written before the browser navigates to this page)
+- Entry: `templates/assets.js` — mounts `#template-asset-manager` with `TemplateAssetsView`
+
+Still Mix: `templates/export-screen`, `templates/import-screen`, `templates/list` (child partial — no standalone layout)
+
+**Notifications** — `/notifications`
+
+- Route: `notifications.index` → `NotificationController@index`
+- View: `resources/views/notifications/index.blade.php` → `layoutnextvite`
+- No explicit boot script needed; `loaderNotifications.js` reads `window.temporal?.packages` with optional chaining (defaults to `[]`)
+- Entries: `notifications/loaderNotifications.js` (`setupMain` + packages) → `notifications/index.js` (mounts `#notifications` with `NotificationsList`, `filter`, `filterComments`)
+- Mix: no longer builds notifications page entry
+
+**Processes Catalogue (desktop)**
+
+- Route: `/process-browser` (`process.browser.index`)
+- View: `resources/views/processes-catalogue/index.blade.php` → `layoutnextvite`
+- Entries: `resources/js/processes-catalogue/loaderProcessesCatalogue.js` → `$manager->getScripts()` → `processesCatalogue.js`
+- Mobile still Mix
+
+**Cases**
+
+- Route: `/cases`
+- View: `resources/views/cases/casesMain.blade.php` → `layoutnextvite`
+- Entries: `resources/jscomposition/cases/casesMain/loaderCasesMain.js` → GlobalScripts + `$manager->getScripts()` → `casesMain.js`
+- App components/routes/store stay in the same `jscomposition/cases/casesMain/` folder
+- Boot: `window.temporal.user` / `packages`; loader copies onto `window.ProcessMaker` (variables read `window.ProcessMaker.user`)
+
+**Case Detail**
 
-## Quick reference: existing migrations
+- View: `resources/views/cases/edit.blade.php` → `layoutnextvite`
+- Entries: `resources/jscomposition/cases/casesDetail/loaderCasesDetail.js` → `@vite` `resources/js/initialLoad.js` + GlobalScripts + modeler package scripts (+ optional package-files) → `casesDetail.js`
+- Boot: `window.temporal` holds request/modeler payload; loader applies `ProcessMaker.modeler` / EventBus / `PMBlockList`
+- Variables read from `window.temporal` (ESM-safe)
+- Modeler SVG icons: Vite plugin rewrites `@processmaker/modeler` asset URLs to `/js/img/` (same files Mix copies from `node_modules/@processmaker/modeler/dist/img`)
 
-**Tasks (live)**
+**Modeler** — `/modeler/{process}`
 
-- View: `resources/views/tasks/index.blade.php` → `layouts.layoutnextvite`
-- Entries: `resources/js/vite/tasks/loaderTasks.js` then package scripts then `resources/js/vite/tasks/tasks.js`
-- Boot: inline `window.temporal` **before** `@vite` loader (see `@section('js')`)
-- Loader copies `temporal.*` onto `window.ProcessMaker` / `window.Processmaker` for ScreenBuilder and legacy mixins
+- View: `resources/views/processes/modeler/index.blade.php` → `layoutnextvite`
+- Boot: `window.temporal` (breadcrumbData, modeler payload, warnings, packages) before loader — `setupMain()` replaces `window.ProcessMaker`
+- Entries: `modeler/loaderModeler.js` (`setupMain` + monaco + nodeTypes + ScreenBuilder/VueFormElements + dynamic `import('./initialLoad.js')`) → skip Mix `initialLoad.js` from `$manager->getScriptWithParams()` → remaining package Mix scripts (`defer`) → `leave-warning.js` → `modeler/index.js` mounts `#modeler-app` on `window` `load`
+- Mix: no longer builds `processes/modeler/index.js`. Keep Mix `initialLoad.js` and `process-map.js` for inflight / `requests/show`
+- Pitfall: `initialLoad.js` uses `window.Vue` / `window.ProcessMaker`; must run after `setupMain()`. Inspector extensions listen on `modeler-init` before the Vue app mounts
 
-**Demo**
+**Login / auth forms**
 
-- Route: `GET /vite` → `vite.index` (`routes/web.php`)
-- View: `resources/views/vite/index.blade.php`
-- Entry: `resources/js/vite/sample/app.js` (+ `DemoBadge.vue`)
+- Login: `auth.newLogin` — `@vite` login entry + translations
+- Password reset / email: `auth.layouts.auth` — same Vite scripts pattern (not `auth-language-scripts` Mix bundle)
 
-**Login (not migrated)**
+**Still Mix**
 
-- Controller: `LoginController@showLoginForm` → `config('app.login_view')` (`LOGIN_VIEW`, default `auth.newLogin`) or `auth.login`
-- Reserved Vite entry (not wired to a Blade yet): `resources/js/vite/auth/login.js`
+- Processes Catalogue mobile: `resources/views/processes-catalogue/mobile.blade.php`
+- Shared Designer child lists / other Designer routes still Mix (`templates/list` on some paths, script preview, modeler **inflight** / `process-map.js`, screens **preview**, …) even when listing tabs under Vite `/designer/screens`, `/designer/scripts`, or `/processes`
+- Password change, and most other non-listed admin/designer pages
+- `requests/show.blade.php` — already on `layoutnextvite`; removed redundant `<link href="{{ mix('css/collapseDetails.css') }}">` (already included by `layoutnextvite` via `@vite`)
diff --git a/resources/jscomposition/cases/casesDetail/casesDetail.js b/resources/jscomposition/cases/casesDetail/casesDetail.js
new file mode 100644
index 0000000000..f6c945c91f
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/casesDetail.js
@@ -0,0 +1,186 @@
+import Vue from "vue";
+import CaseDetail from "./components/CaseDetail.vue";
+import Tabs from "./components/Tabs.vue";
+import Timeline from "../../../js/components/Timeline.vue";
+import StageBar from "./components/StageBar.vue";
+import { CollapsableContainer } from "../../base";
+import { cases } from "./store";
+import {
+  updateUserConfiguration, getUserConfiguration, getCommentsData, updateRequest,
+} from "./api";
+import {
+  useStore, getRequest, getRequestId, getStageName, getProgressStage,
+} from "./variables";
+
+Vue.globalStore.registerModule("core:cases", cases);
+
+window.addEventListener("load", () => {
+  const caseDetail = new Vue({
+    el: "#case-detail",
+    components: {
+      CaseDetail, Tabs, CollapsableContainer, Timeline, StageBar,
+    },
+    data() {
+      const t = window.temporal;
+      return {
+        data: t.data,
+        request: t.request,
+        canCancel: t.canCancel,
+        canViewPrint: t.canViewPrint,
+        status: "ACTIVE",
+        userRequested: [],
+        errorLogs: t.errorLogs,
+        packages: [],
+        processId: t.processId,
+        canViewComments: t.canViewComments,
+        disabled: false,
+        retryDisabled: false,
+        tabDefault: "details",
+        collapseContainer: true,
+        tabs: [
+          {
+            name: "Details",
+            href: "#details",
+            current: "details",
+            show: true,
+            content: null,
+          },
+          {
+            name: "Comments",
+            href: "#comments",
+            current: "comments",
+            show: true,
+            content: null,
+          },
+        ],
+        headerModel: false,
+        progressStage: getProgressStage(),
+        stageName: getStageName(),
+      };
+    },
+    computed: {
+      /**
+       * Get the list of participants in the request.
+       *
+       */
+      participants() {
+        return this.request.participants;
+      },
+      classStatusCard() {
+        const header = {
+          ACTIVE: "active-style",
+          COMPLETED: "active-style",
+          CANCELED: "canceled-style ",
+          ERROR: "canceled-style",
+        };
+        return `tw-rounded-md text-status ${header[this.request.status.toUpperCase()]}`;
+      },
+      labelDate() {
+        const label = {
+          ACTIVE: "In Progress Since",
+          COMPLETED: "Completed On",
+          CANCELED: "Canceled ",
+          ERROR: "Failed On",
+        };
+        return label[this.request.status.toUpperCase()];
+      },
+      statusDate() {
+        const status = {
+          ACTIVE: this.request.created_at,
+          COMPLETED: this.request.completed_at,
+          CANCELED: this.request.updated_at,
+          ERROR: this.request.updated_at,
+        };
+
+        return status[this.request.status.toUpperCase()];
+      },
+      statusLabel() {
+        const status = {
+          ACTIVE: this.$t("In Progress"),
+          COMPLETED: this.$t("Completed"),
+          CANCELED: this.$t("Canceled"),
+          ERROR: this.$t("Error"),
+        };
+
+        return status[this.request.status.toUpperCase()];
+      },
+      requestBy() {
+        return [this.request.user];
+      },
+      panCommentInVueOptionsComponents() {
+        return "pan-comment" in Vue.options.components;
+      },
+
+    },
+    async mounted() {
+      const store = useStore();
+      this.packages = window.ProcessMaker.requestShowPackages;
+
+      const response = await this.getUserConf();
+
+      store.commit("core:cases/updateUserConfiguration", response);
+      this.collapseContainer = store.getters["core:cases/getCollapseContainer"];
+    },
+    methods: {
+      onCancel() {
+        ProcessMaker.confirmModal(
+          this.$t("Caution!"),
+          this.$t("Are you sure you want cancel this request?"),
+          "",
+          () => {
+            this.okCancel();
+          },
+        );
+      },
+      async onToogleContainer(value) {
+        const store = useStore();
+        store.commit("core:cases/updateCollapseContainer", value);
+
+        const userConf = store.getters["core:cases/getUserConfiguration"];
+
+        const response = await updateUserConfiguration({
+          user_id: userConf.user_id,
+          ui_configuration: userConf.ui_configuration,
+        });
+      },
+      getUserConf: async () => {
+        const response = await getUserConfiguration();
+
+        return {
+          user_id: response.user_id,
+          ui_configuration: JSON.parse(response.ui_configuration),
+        };
+      },
+      getCommentsData: async () => {
+        const request = getRequest();
+
+        const response = await getCommentsData({
+          params: {
+            type: "COMMENT,REPLY",
+            order_direction: "desc",
+            case_number: request.case_number,
+          },
+        });
+
+        return response;
+      },
+      async okCancel() {
+        // single click
+        if (this.disabled) {
+          return;
+        }
+        this.disabled = true;
+        try {
+          await updateRequest(getRequestId(), {
+            status: "CANCELED",
+          });
+
+          ProcessMaker.alert(this.$t("The request was canceled."), "success");
+          window.location.reload();
+        } catch (error) {
+          this.disabled = false;
+        }
+      },
+    },
+  });
+});
diff --git a/resources/jscomposition/cases/casesDetail/loaderCasesDetail.js b/resources/jscomposition/cases/casesDetail/loaderCasesDetail.js
new file mode 100644
index 0000000000..61def1b94c
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/loaderCasesDetail.js
@@ -0,0 +1,32 @@
+import { setupMain } from "../../../js/next/setupMain.js";
+import screenBuilderNext from "../../../js/next/screenBuilder.js";
+import modeler from "../../../js/next/modeler.js";
+import "../../../js/next/libraries/vueFormElements.js";
+import "../../../js/next/libraries/modelerInspector.js";
+import * as ScreenBuilder from "@processmaker/screen-builder";
+
+window.ScreenBuilder = ScreenBuilder;
+
+setupMain();
+screenBuilderNext();
+modeler();
+
+window.ProcessMaker.caseNumber = request.case_number;
+window.ProcessMaker.modeler = {
+  xml: temporal.bpmn,
+  configurables: [],
+  requestCompletedNodes: inflightData.requestCompletedNodes,
+  requestInProgressNodes: inflightData.requestInProgressNodes,
+  requestIdleNodes: inflightData.requestIdleNodes,
+  requestId: inflightData.requestId,
+};
+
+window.ProcessMaker.EventBus.$on("modeler-start", ({ loadXML }) => {
+  loadXML(window.ProcessMaker.modeler.xml);
+});
+
+window.PM4ConfigOverrides = {
+  requestFiles: window.temporal.requestFiles,
+};
+
+window.ProcessMaker.PMBlockList = window.temporal.pmBlockList;
diff --git a/resources/jscomposition/cases/casesMain/main.js b/resources/jscomposition/cases/casesMain/casesMain.js
similarity index 92%
rename from resources/jscomposition/cases/casesMain/main.js
rename to resources/jscomposition/cases/casesMain/casesMain.js
index 5c0eb608fe..0778d9dfe4 100644
--- a/resources/jscomposition/cases/casesMain/main.js
+++ b/resources/jscomposition/cases/casesMain/casesMain.js
@@ -1,3 +1,5 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
 import App from "./App.vue";
 import { routes } from "./routes";
 import { cases } from "./store";
diff --git a/resources/jscomposition/cases/casesMain/loader.js b/resources/jscomposition/cases/casesMain/loader.js
deleted file mode 100644
index 8f233e5e43..0000000000
--- a/resources/jscomposition/cases/casesMain/loader.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { setupMain } from "../../../js/next/setupMain";
-
-setupMain();
diff --git a/resources/jscomposition/cases/casesMain/loaderCasesMain.js b/resources/jscomposition/cases/casesMain/loaderCasesMain.js
new file mode 100644
index 0000000000..35b3ef543e
--- /dev/null
+++ b/resources/jscomposition/cases/casesMain/loaderCasesMain.js
@@ -0,0 +1,12 @@
+import { setupMain } from "../../../js/next/setupMain.js";
+import screenBuilderNext from "../../../js/next/screenBuilder.js";
+import * as ScreenBuilder from "@processmaker/screen-builder";
+import vueFormElements from "../../../js/next/libraries/vueFormElements";
+
+window.ScreenBuilder = ScreenBuilder;
+
+setupMain();
+screenBuilderNext();
+
+window.ProcessMaker.packages = window.temporal.packages;
+window.ProcessMaker.user = window.temporal.user;
diff --git a/resources/jscomposition/cases/casesMain/variables/index.js b/resources/jscomposition/cases/casesMain/variables/index.js
index 8e9b8ba56c..7a667aeb41 100644
--- a/resources/jscomposition/cases/casesMain/variables/index.js
+++ b/resources/jscomposition/cases/casesMain/variables/index.js
@@ -2,6 +2,6 @@ export default {};
 
 export const api = window.ProcessMaker?.apiClient;
 
-export const user = currentUser;
+export const user = window.ProcessMaker.user;
 
 export const useStore = () => Vue.globalStore;
diff --git a/resources/views/about/index.blade.php b/resources/views/about/index.blade.php
index 2552043944..999979b574 100644
--- a/resources/views/about/index.blade.php
+++ b/resources/views/about/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
   {{__('About ProcessMaker')}}
@@ -63,6 +63,7 @@
     </div>
   </div>
 </div>
+@vite('resources/js/admin/loaderAdmin.js')
 <script>
 async function refreshMs() {
   const update = await (await fetch('?partial=ms')).text();
diff --git a/resources/views/admin/auth-clients/index.blade.php b/resources/views/admin/auth-clients/index.blade.php
index d306571ee3..7e1e882a01 100644
--- a/resources/views/admin/auth-clients/index.blade.php
+++ b/resources/views/admin/auth-clients/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Auth Clients')}}
@@ -90,119 +90,11 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/admin/auth-clients/index.js')}}"></script>
-
     <script>
-      new Vue({
-        el: '#authClients',
-        data: {
-          authClient: {
-            id: null,
-            name: "",
-            types: [],
-            redirect: "",
-            secret: "",
-          },
-          filter: "",
-          errors: null,
-          disabled: false,
-          title:'',
-          secretTitle:'',
-          customModalButtons: [],
-          secret: "",
-        },
-        beforeMount() {
-          this.initCustomModalButtons();
-          this.resetValues();
-        },
-        methods: {
-          onClose() {
-            this.resetValues();
-          },
-          onSave() {
-            //single click
-            if (this.disabled) {
-              return
-            }
-            this.disabled = true;
-
-            this.loading = true
-            let method = 'POST'
-            let url = '/oauth/clients'
-            let verb = 'created'
-            if (this.authClient.id) {
-              // Do an update
-              method = 'PUT',
-                url = url + '/' + this.authClient.id
-              verb = 'saved'
-            }
-            ProcessMaker.apiClient({
-              method,
-              url,
-              baseURL: '/',
-              data: this.authClient,
-            }).then(response => {
-              this.$refs.createEditAuthClient.hide();
-              this.loading = false;
-              if (response.data.secret) {
-                this.secret = response.data.secret
-                this.$refs.secretModal.show();
-              }
-              else {
-                this.$refs.authClientList.fetch();
-              }
-              ProcessMaker.alert(this.$t("The auth client was ") + verb + ".", this.$t("success"))
-            }).catch(error => {
-              this.disabled = false;
-              this.errors = error.response.data.errors;
-            });
-          },
-          resetValues() {
-            this.title = this.$t('Create Auth-Client')
-            this.secretTitle = this.$t('Copy Secret To Clipboard')
-            this.authClient = {
-              id: null,
-              name: "",
-              types: [],
-              redirect: "",
-              secret: "",
-            };
-            this.errors = {
-              name: null,
-              redirect: null,
-              types: null
-            };
-            this.disabled = false;
-            this.initCustomModalButtons();
-          },
-          edit(item) {
-            this.title = this.$t('Edit Auth Client');
-            this.authClient = item;
-            this.$refs.createEditAuthClient.show();
-          },
-          initCustomModalButtons() {
-            this.customModalButtons = [
-              {
-                content: "Close",
-                action: "close",
-                variant: "secondary",
-                disabled: false,
-                hidden: false,
-              },
-            ];
-          },
-          hideSecretModal() {
-            this.$refs.secretModal.hide();
-            this.$refs.authClientList.fetch();
-          },
-          copySecret(secret) {
-            navigator.clipboard.writeText(secret).then(() => {
-              ProcessMaker.alert(this.$t("Secret copied to clipboard."), "success");
-            }, () => {
-              ProcessMaker.alert(this.$t("Secret not copied to clipboard."), "danger");
-            });
-          },
-        },
-      })
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
     </script>
+    @vite(['resources/js/admin/auth-clients/loaderAuthClients.js'])
+    @vite(['resources/js/admin/auth-clients/index.js'])
 @endsection
diff --git a/resources/views/admin/cases-retention/index.blade.php b/resources/views/admin/cases-retention/index.blade.php
index cea7ad691d..c3539bcb43 100644
--- a/resources/views/admin/cases-retention/index.blade.php
+++ b/resources/views/admin/cases-retention/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Cases Retention')}}
@@ -15,6 +15,7 @@
     ]])
 @endsection
 @section('content')
+    @vite(['resources/js/admin/loaderAdmin.js'])
     <div class="px-3" id="cases-retention">
         
     </div>
@@ -61,7 +62,12 @@ class="btn btn-primary download-retention-logs text-nowrap"
 
 
 @section('js')
-    <script src="{{mix('js/admin/cases-retention/index.js')}}"></script>
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    </script>
+    @vite(['resources/js/admin/cases-retention/index.js'])
 @endsection
 
 @section('css')
diff --git a/resources/views/admin/cssOverride/edit.blade.php b/resources/views/admin/cssOverride/edit.blade.php
index 77d1bef50e..1305f9321a 100644
--- a/resources/views/admin/cssOverride/edit.blade.php
+++ b/resources/views/admin/cssOverride/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{ __('Customize UI') }}
@@ -35,79 +35,88 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/admin/cssOverride/edit.js')}}"></script>
     <script>
-      const config = @json($config);
-      const loginFooterSetting = @json($loginFooter);
-      const altTextSetting = @json($altText);
-      const route = @json($tab);
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
+      window.config = @json($config);
+      window.loginFooterSetting = @json($loginFooter);
+      window.altTextSetting = @json($altText);
+      window.temporal.routes = @json($tab);
+    </script>
+    @vite(['resources/js/admin/cssOverride/loaderCssOverride.js'])
+    @vite(['resources/js/admin/cssOverride/edit.js'])
+    <script>
+      window.addEventListener("load", function () {
+        const route = @json($tab);
 
-      new Vue({
-        el: '#editCss',
-        data() {
-          return {
-            route: null,
-            tabs: [
-                { name: this.$t('Site Design'), route: 'design', component: 'site-design', href: '/admin/customize-ui' },
-            ],
-          }
-        },
-        computed: {
-          currentTab() {
-            const tab = this.tabs.findIndex((tab) => tab.route == this.route);
-            if (tab > -1) {
-              return tab;
-            } else {
-              return 0;
+        new Vue({
+          el: '#editCss',
+          data() {
+            return {
+              route: null,
+              tabs: [
+                  { name: this.$t('Site Design'), route: 'design', component: 'site-design', href: '/admin/customize-ui' },
+              ],
             }
           },
-          showTabs() {
-            return this.tabs.length > 1;
+          computed: {
+            currentTab() {
+              const tab = this.tabs.findIndex((tab) => tab.route == this.route);
+              if (tab > -1) {
+                return tab;
+              } else {
+                return 0;
+              }
+            },
+            showTabs() {
+              return this.tabs.length > 1;
+            },
+            cardClass() {
+              if (this.showTabs) {
+                return 'border-top-0';
+              } else {
+                return null;
+              }
+            }
           },
-          cardClass() {
-            if (this.showTabs) {
-              return 'border-top-0';
-            } else {
-              return null;
+          methods: {
+            isActive(tab) {
+              return this.route == tab.route;
+            },
+            routeTo(tab) {
+              history.pushState(null, null, tab.href);
+              this.route = tab.route;
+              this.setBreadcrumbs(tab);
+            },
+            setBreadcrumbs(tab) {
+              if (this.showTabs) {
+                window.ProcessMaker.navbar.setRoutes([
+                  {
+                    title: 'Admin',
+                    link: '{{ route('admin.index') }}',
+                  },
+                  {
+                    title: 'Customize UI',
+                    link: '{{ route('customize-ui.edit') }}',
+                  },
+                  {
+                    title: tab.name
+                  }
+                ]);
+              }
             }
-          }
-        },
-        methods: {
-          isActive(tab) {
-            return this.route == tab.route;
           },
-          routeTo(tab) {
-            history.pushState(null, null, tab.href);
-            this.route = tab.route;
-            this.setBreadcrumbs(tab);
+          created() {
+            this.route = route;
           },
-          setBreadcrumbs(tab) {
-            if (this.showTabs) {
-              window.ProcessMaker.navbar.setRoutes([
-                {
-                  title: 'Admin',
-                  link: '{{ route('admin.index') }}',
-                },
-                {
-                  title: 'Customize UI',
-                  link: '{{ route('customize-ui.edit') }}',
-                },
-                {
-                  title: tab.name
-                }
-              ]);
+          mounted() {
+            if (window.ProcessMaker.cssOverrideTabs && window.ProcessMaker.cssOverrideTabs.length) {
+              this.tabs = this.tabs.concat(window.ProcessMaker.cssOverrideTabs);
             }
-          }
-        },
-        created() {
-          this.route = route;
-        },
-        mounted() {
-          if (window.ProcessMaker.cssOverrideTabs && window.ProcessMaker.cssOverrideTabs.length) {
-            this.tabs = this.tabs.concat(window.ProcessMaker.cssOverrideTabs);
-          }
-          this.setBreadcrumbs(this.tabs[this.currentTab]);
-        },
+            this.setBreadcrumbs(this.tabs[this.currentTab]);
+          },
+        });
       });
     </script>
 
@@ -134,4 +143,3 @@
         }
     </style>
 @endsection
-
diff --git a/resources/views/admin/devlink/index.blade.php b/resources/views/admin/devlink/index.blade.php
index 8f428119c3..66e4b6c18e 100644
--- a/resources/views/admin/devlink/index.blade.php
+++ b/resources/views/admin/devlink/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('DevLink')}}
@@ -15,6 +15,7 @@
     ]])
 @endsection
 @section('content')
+    @vite(['resources/js/admin/loaderAdmin.js'])
     <div class="px-3" id="devlink">
         <dev-link></dev-link>
     </div>
@@ -22,5 +23,10 @@
 
 
 @section('js')
-    <script src="{{mix('js/admin/devlink/index.js')}}"></script>
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    </script>
+    @vite(['resources/js/admin/devlink/index.js'])
 @endsection
diff --git a/resources/views/admin/groups/edit.blade.php b/resources/views/admin/groups/edit.blade.php
index 2bf2b9cecb..78e81928d9 100644
--- a/resources/views/admin/groups/edit.blade.php
+++ b/resources/views/admin/groups/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Edit Group')}}
@@ -230,11 +230,18 @@ class="multiselect__tag-icon"></i>
 @endsection
 
 @section('js')
-    <script src="{{mix('js/admin/groups/edit.js')}}"></script>
     <script>
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/admin/groups/loaderGroups.js'])
+    @vite(['resources/js/admin/groups/edit.js'])
+    <script>
+      window.addEventListener("load", function () {
       new Vue({
         el: '#editGroup',
-        mixins:addons,
+        mixins: typeof addons !== 'undefined' ? addons : [],
         data() {
           return {
             formData: @json($group),
@@ -404,6 +411,7 @@ class="multiselect__tag-icon"></i>
           }
         }
       });
+      });
     </script>
 @endsection
 
diff --git a/resources/views/admin/groups/index.blade.php b/resources/views/admin/groups/index.blade.php
index 227a1b1741..9b38c95f4d 100644
--- a/resources/views/admin/groups/index.blade.php
+++ b/resources/views/admin/groups/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Groups')}}
@@ -63,76 +63,11 @@ class="form-text text-muted">{{__('Group name must be unique')}}</small>
 @endsection
 
 @section('js')
-    <script src="{{mix('js/admin/groups/index.js')}}"></script>
     <script>
-      new Vue({
-        el: '#listGroups',
-        data() {
-          return {
-            filter: '',
-            formData: {},
-            errors: {
-              'name': null,
-              'description': null,
-              'status': null
-            },
-            disabled: false
-          }
-        },
-        mounted() {
-          this.resetFormData();
-          this.resetErrors();
-        },
-        methods: {
-          reload () {
-            this.$refs.groupList.dataManager([
-              {
-                field: "updated_at",
-                direction: "desc"
-              }
-            ]);
-          },
-          onClose() {
-            this.resetFormData();
-            this.resetErrors();
-          },
-          resetFormData() {
-            this.formData = Object.assign({}, {
-              name: null,
-              description: null,
-              status: 'ACTIVE'
-            });
-          },
-          resetErrors() {
-            this.errors = Object.assign({}, {
-              name: null,
-              description: null,
-              status: null
-            });
-          },
-          onSubmit() {
-            this.resetErrors();
-            //single click
-            if (this.disabled) {
-              return
-            }
-            this.disabled = true;
-            ProcessMaker.apiClient.post('groups', this.formData)
-              .then(response => {
-                ProcessMaker.alert(this.$t('The group was created.'), 'success');
-                //redirect show group
-                window.location = "/admin/groups/" + response.data.id + "/edit"
-              })
-              .catch(error => {
-                //define how display errors
-                if (error.response.status && error.response.status === 422) {
-                  // Validation error
-                  this.errors = error.response.data.errors;
-                }
-                this.disabled = false;
-              });
-          }
-        }
-      });
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
     </script>
+    @vite(['resources/js/admin/groups/loaderGroups.js'])
+    @vite(['resources/js/admin/groups/index.js'])
 @endsection
diff --git a/resources/views/admin/logs/index.blade.php b/resources/views/admin/logs/index.blade.php
index 9a7ca90a61..8a00f2066e 100644
--- a/resources/views/admin/logs/index.blade.php
+++ b/resources/views/admin/logs/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Logs')}}
@@ -21,8 +21,12 @@
 
 @section('js')
     <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
         const permission = @json(\Auth::user()->hasPermissionsFor('settings'));
     </script>
-    <script src="{{mix('js/admin/logs/index.js')}}"></script>
+    @vite(['resources/js/admin/loaderAdmin.js'])
+    @vite(['resources/js/admin/logs/index.js'])
 @endsection
 
diff --git a/resources/views/admin/queues/index.blade.php b/resources/views/admin/queues/index.blade.php
index 6e64ff7df6..cef4184ac6 100644
--- a/resources/views/admin/queues/index.blade.php
+++ b/resources/views/admin/queues/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Queue Management')}}
@@ -16,6 +16,7 @@
 @endsection
 
 @section('content')
+    @vite(['resources/js/admin/users/loaderUsers.js'])
     <iframe class="iframe-horizon mb-n1" src="/admin/horizon"></iframe>
 @endsection
 
diff --git a/resources/views/admin/script-executors/index.blade.php b/resources/views/admin/script-executors/index.blade.php
index cb3146fabe..2cf21ad947 100644
--- a/resources/views/admin/script-executors/index.blade.php
+++ b/resources/views/admin/script-executors/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{ __('Script Executors') }}
@@ -15,6 +15,7 @@
     ]])
 @endsection
 @section('content')
+    @vite(['resources/js/admin/loaderAdmin.js'])
     <div id="script-executors" class="px-3">
         <div class="card card-body">
             <script-executors
@@ -25,6 +26,11 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/admin/script-executors/index.js')}}"></script>
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    </script>
+    @vite(['resources/js/admin/script-executors/index.js'])
 @endsection
 
diff --git a/resources/views/admin/settings/index.blade.php b/resources/views/admin/settings/index.blade.php
index d224fe9634..8bc5cd57a6 100644
--- a/resources/views/admin/settings/index.blade.php
+++ b/resources/views/admin/settings/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Settings')}}
@@ -26,20 +26,31 @@
 @endsection
 
 @section('js')
+    <script>
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/admin/settings/loaderSettings.js'])
+
     @if (hasPackage('package-email-start-event'))
     <script type="module" src="{{ mix('js/email-listener.js', 'vendor/processmaker/packages/package-email-start-event') }}"></script>
     @endif
 
-    <script src="{{mix('js/admin/settings/index.js')}}"></script>
+    @vite(['resources/js/admin/settings/index.js'])
 
     @if($errors->has('error'))
         <script>
-            window.ProcessMaker.alert("{{ $errors->first('error') }}", 'danger');
+            window.addEventListener('load', function () {
+              window.ProcessMaker.alert(@json($errors->first('error')), 'danger');
+            });
         </script>
     @endif
      @if($errors->has('message'))
         <script>
-            window.ProcessMaker.alert("{{ $message->first('message') }}", 'success');
+            window.addEventListener('load', function () {
+              window.ProcessMaker.alert(@json($errors->first('message')), 'success');
+            });
         </script>
     @endif
 @endsection
diff --git a/resources/views/admin/settings/ldap-logs.blade.php b/resources/views/admin/settings/ldap-logs.blade.php
index 3efd5dd5d1..d3b446b499 100644
--- a/resources/views/admin/settings/ldap-logs.blade.php
+++ b/resources/views/admin/settings/ldap-logs.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Ldap Logs')}}
@@ -16,6 +16,7 @@
     ]])
 @endsection
 @section('content')
+    @vite(['resources/js/admin/users/loaderUsers.js'])
     <div class="px-3" id="ldap-logs">
         <div id="search-bar" class="search mb-3" vcloak>
             <div class="d-flex flex-column flex-md-row">
@@ -42,5 +43,5 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/admin/settings/ldaplogs.js')}}"></script>
+    @vite(['resources/js/admin/settings/ldaplogs.js'])
 @endsection
diff --git a/resources/views/admin/tenant-queues/index.blade.php b/resources/views/admin/tenant-queues/index.blade.php
index 6c5967ffaf..6c3af26a72 100644
--- a/resources/views/admin/tenant-queues/index.blade.php
+++ b/resources/views/admin/tenant-queues/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Jobs Dashboard')}}
@@ -16,11 +16,17 @@
 @endsection
 
 @section('content')
+    @vite(['resources/js/admin/loaderAdmin.js'])
     <div id="tenant-queues-dashboard">
         <router-view></router-view>
     </div>
 @endsection
 
 @section('js')
-    <script src="{{ mix('js/admin/tenant-queues/index.js') }}"></script>
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    </script>
+    @vite(['resources/js/admin/tenant-queues/index.js'])
 @endsection
diff --git a/resources/views/admin/users/edit.blade.php b/resources/views/admin/users/edit.blade.php
index 180739726b..0d8181f814 100644
--- a/resources/views/admin/users/edit.blade.php
+++ b/resources/views/admin/users/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Edit Users')}}
@@ -171,12 +171,18 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/admin/users/edit.js')}}"></script>
-
     <script>
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/admin/users/loaderUsers.js'])
+    @vite(['resources/js/admin/users/edit.js'])
+    <script>
+      window.addEventListener("load", function () {
       var modalVueInstance = new Vue({
         el: '#updateAvatarModal',
-        mixins:addons,
+        mixins: typeof addons !== 'undefined' ? addons : [],
         data() {
           return {
             image: "",
@@ -240,11 +246,8 @@
           }
         }
       });
-    </script>
-
-    <script>
       var formVueInstance = new Vue({
-        mixins:addons,
+        mixins: typeof addons !== 'undefined' ? addons : [],
         el: '#editUser',
         data() {
           return {
@@ -607,6 +610,7 @@
           },
         }
       });
+    });  
     </script>
 @endsection
 
diff --git a/resources/views/admin/users/index.blade.php b/resources/views/admin/users/index.blade.php
index 2697745d22..8a9e9f5063 100644
--- a/resources/views/admin/users/index.blade.php
+++ b/resources/views/admin/users/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Users')}}
@@ -24,7 +24,7 @@
                 </a>
             </li>
             <li class="nav-item">
-                <a class="nav-item nav-link" id="nav-deleted-users-tab" data-toggle="tab" href="#nav-deleted-users" role="tab"  
+                <a class="nav-item nav-link" id="nav-deleted-users-tab" data-toggle="tab" href="#nav-deleted-users" role="tab"
                 onclick="loadDeletedUsers()" aria-controls="nav-deleted-users" aria-selected="true">
                     {{ __('Deleted Users') }}
                 </a>
@@ -49,15 +49,12 @@
     </div>
 @endsection
 
-<script>
-    loadUsers = function () {
-        ProcessMaker.EventBus.$emit("api-data-users", true);
-    };
-    loadDeletedUsers = function () {
-        ProcessMaker.EventBus.$emit("api-data-deleted-users", true);
-    };
-</script>
-
 @section('js')
-    <script src="{{mix('js/admin/users/index.js')}}"></script>
+    <script>
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/admin/users/loaderUsers.js'])
+    @vite(['resources/js/admin/users/index.js'])
 @endsection
diff --git a/resources/views/auth/2fa/auth_app_qr.blade.php b/resources/views/auth/2fa/auth_app_qr.blade.php
index cd370d4557..e645de68ed 100644
--- a/resources/views/auth/2fa/auth_app_qr.blade.php
+++ b/resources/views/auth/2fa/auth_app_qr.blade.php
@@ -8,7 +8,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta name="i18n-mdate" content='{!! json_encode(ProcessMaker\i18nHelper::mdates()) !!}'>
     <title>{{ __('Configure the authenticator app') }}</title>
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    @vite('resources/sass/app.scss')
     <link rel="icon" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
 </head>
 <body>
diff --git a/resources/views/auth/2fa/otp.blade.php b/resources/views/auth/2fa/otp.blade.php
index b08295a3c0..c88eb3d8b9 100644
--- a/resources/views/auth/2fa/otp.blade.php
+++ b/resources/views/auth/2fa/otp.blade.php
@@ -8,7 +8,7 @@
     <meta name="csrf-token" content="{{ csrf_token() }}">
     <meta name="i18n-mdate" content='{!! json_encode(ProcessMaker\i18nHelper::mdates()) !!}'>
     <title>{{ __('Enter Security Code') }}</title>
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    @vite('resources/sass/app.scss')
     <link rel="icon" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
 </head>
 <body>
diff --git a/resources/views/auth/layouts/auth.blade.php b/resources/views/auth/layouts/auth.blade.php
index 2503fb1203..cbbb23f668 100644
--- a/resources/views/auth/layouts/auth.blade.php
+++ b/resources/views/auth/layouts/auth.blade.php
@@ -9,7 +9,7 @@
   <meta name="i18n-mdate" content='{!! json_encode(ProcessMaker\i18nHelper::mdates()) !!}'>
   <meta name="settings-translations-enabled" content="{{ config('translations.enabled') ? 'true' : 'false' }}">
   <title>@yield('title') - {{ __('ProcessMaker') }}</title>
-  <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+  @vite('resources/sass/app.scss')
   @include('auth.partials.login-critical-styles')
   @include('auth.partials.auth-styles')
   <link rel="icon" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
index 4ae4b57d77..c76bdc9ce7 100644
--- a/resources/views/cases/casesMain.blade.php
+++ b/resources/views/cases/casesMain.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layoutnext',['content_margin' => '', 'overflow-auto' => ''])
+@extends('layouts.layoutnextvite',['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
   {{ __('Cases') }}
@@ -13,24 +13,20 @@
 @endsection
 
 @section('js')
-  <script src="{{ mix('js/manifest.js') }}"></script>
-  <script src="{{ mix('js/vue-vendor.js') }}"></script>
-  <script src="{{ mix('js/fortawesome-vendor.js') }}"></script>
-  <script src="{{ mix('js/bootstrap-vendor.js') }}"></script>
-  
+  {{-- temporal must exist before loaderCases (Vite modules run after deferred classic scripts) --}}
   <script>
-    const currentUser = @json($currentUser);
-    const screenBuilderScripts = @json($manager->getScripts());
-    window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.temporal = {};
+    window.temporal.user = @json($currentUser);
+    window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
   </script>
-
-  <script src="{{mix('js/composition/cases/casesMain/loader.js')}}"></script>
-
+  @vite(['resources/jscomposition/cases/casesMain/loaderCasesMain.js'])
   @foreach(GlobalScripts::getScripts() as $script)
-    <script src="{{$script}}"></script>
+    <script defer src="{{$script}}"></script>
   @endforeach
-
-  <script src="{{mix('js/composition/cases/casesMain/main.js')}}"></script>
+  @foreach($manager->getScripts() as $script)
+    <script defer src="{{$script}}"></script>
+  @endforeach
+  @vite(['resources/jscomposition/cases/casesMain/casesMain.js'])
 @endsection
 
 @section('css')
diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php
index d340a35dd8..6c07c811bd 100644
--- a/resources/views/cases/edit.blade.php
+++ b/resources/views/cases/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layoutnext',['content_margin' => '', 'overflow-auto' => ''])
+@extends('layouts.layoutnextvite',['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
   {{ __('Case Detail') }}
@@ -140,17 +140,12 @@ class="tw-grow tw-overflow-hidden"
 @endsection
 
 @section('js')
-  <script src="{{ mix('js/manifest.js') }}"></script>
-  <script src="{{ mix('js/vue-vendor.js') }}"></script>
-  <script src="{{ mix('js/fortawesome-vendor.js') }}"></script>
-  <script src="{{ mix('js/bootstrap-vendor.js') }}"></script>
-  <script src="{{ mix('js/modeler-vendor.js') }}"></script>
+  {{-- temporal must exist before loader (Vite modules run after deferred classic scripts) --}}
   <script>
-    const data = @json($request->getRequestData());
+    window.temporal = {};
     const requestId = @json($request->getKey());
     const request = @json($request->getRequestAsArray());
-    const canCancel = @json($canCancel);
-    const canViewPrint = @json($canPrintScreens);
+
     const errorLogs = @json(['data' => $request->getErrors()]);
     const processId = @json($request->process->id);
     const canViewComments = @json($canViewComments);
@@ -161,43 +156,26 @@ class="tw-grow tw-overflow-hidden"
     const currentStages = @json($currentStages);
     const progressStage = @json($progressStage);
     const tceCustomizationEnable = @json($isTceCustomization);
-    window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
-  </script>
-  <script src="{{mix('js/composition/cases/casesDetail/loader.js')}}"></script>
-  <script src="{{mix('js/initialLoad.js')}}"></script>
-
-  <script>
-    window.ProcessMaker.caseNumber = request.case_number;
-    window.ProcessMaker.modeler = {
-      xml: @json($bpmn),
-      configurables: [],
-      requestCompletedNodes: inflightData.requestCompletedNodes,
-      requestInProgressNodes: inflightData.requestInProgressNodes,
-      requestIdleNodes: inflightData.requestIdleNodes,
-      requestId: inflightData.requestId,
-    }
 
-    window.ProcessMaker.EventBus.$on('modeler-start', ({
-      loadXML
-    }) => {
-      loadXML(window.ProcessMaker.modeler.xml);
-    });
-
-    window.PM4ConfigOverrides = {
-      requestFiles: @json($request->requestFiles())
-    };
-
-    window.ProcessMaker.PMBlockList = @json($pmBlockList);
+    temporal.requestId = requestId;
+    temporal.request = request;
+    temporal.canCancel = @json($canCancel);
+    temporal.canViewPrint = @json($canPrintScreens);
+    temporal.data = @json($request->getRequestData());
+    temporal.bpmn = @json($bpmn);
+    temporal.requestFiles = @json($request->requestFiles());
+    temporal.pmBlockList = @json($pmBlockList);
+    window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
   </script>
+  @vite(['resources/jscomposition/cases/casesDetail/loaderCasesDetail.js'])
+  @vite(['resources/js/initialLoad.js'])
 
-  <!-- Load the screen scripts -->
   @foreach(GlobalScripts::getScripts() as $script)
-    <script src="{{$script}}"></script>
+    <script defer src="{{$script}}"></script>
   @endforeach
-  
-  <!-- Load the modeler scripts -->
+
   @foreach($managerModelerScripts as $params)
-    <script
+    <script defer
     @foreach ($params as $key => $value)
       @if (is_bool($value))
         {{ $key }}
@@ -209,11 +187,10 @@ class="tw-grow tw-overflow-hidden"
   @endforeach
 
   @if (hasPackage('package-files'))
-  <!-- TODO: Replace with script injector like we do for modeler and screen builder -->
-  <script src="{{ mix('js/manager-cases.js', 'vendor/processmaker/packages/package-files') }}"></script>
+  <script defer src="{{ mix('js/manager-cases.js', 'vendor/processmaker/packages/package-files') }}"></script>
   @endif
 
-  <script src="{{mix('js/composition/cases/casesDetail/edit.js')}}"></script>
+  @vite(['resources/jscomposition/cases/casesDetail/casesDetail.js'])
 @endsection
 
 @section('css')
diff --git a/resources/views/categories/list.blade.php b/resources/views/categories/list.blade.php
index 2ab4811da2..6a510f25a3 100644
--- a/resources/views/categories/list.blade.php
+++ b/resources/views/categories/list.blade.php
@@ -71,90 +71,11 @@ class="btn btn-secondary"
 </div>
 
 @section('js')
-    <script src="{{mix('js/processes/categories/index.js')}}"></script>
     <script>
-      ProcessMaker.CategoriesIndex = new Vue({
-        el: "#categories-listing",
-        data: {
-          filter: "",
-          formData: null,
-          errors: {},
-          id: "",
-          name: "",
-          status: "ACTIVE",
-          disabled: false,
-          route: @json(route($config->routes->categoryListApi))
-        },
-        methods: {
-          emptyData () {
-            this.id = "";
-            this.name = "";
-            this.status = "ACTIVE";
-            this.disabled = false;
-            this.errors = {};
-          },
-          getTitle () {
-            return this.id ? this.$t("Edit Category") : this.$t("Create Category");
-          },
-          reload () {
-            this.$refs.list.fetch();
-          },
-          edit (value) {
-            this.emptyData();
-            this.id = value.id;
-            this.name = value.name;
-            this.status = value.status;
-            this.$refs.createCategoryModal.show();
-          },
-          showModal() {
-            this.emptyData();
-            this.$refs.createCategoryModal.show();
-          },
-          onClose () {
-            this.emptyData();
-          },
-          onSubmit () {
-            this.errors = {};
-            // single click
-            if (this.disabled) {
-              return;
-            }
-            this.disabled = true;
-            let method = "POST",
-              url = this.route;
-            if (this.id) {
-              // Do an update
-              method = "PUT";
-              url = `${url}/${this.id}`;
-            }
-            ProcessMaker.apiClient({
-              method,
-              url,
-              baseURL: "/",
-              data: {
-                name: this.name,
-                status: this.status
-              }
-            })
-              .then((response) => {
-                this.$refs.createCategoryModal.hide();
-                let message = "The category was created.";
-                if (this.id) {
-                  message = "The category was saved.";
-                }
-                ProcessMaker.alert(this.$t(message), "success");
-                this.emptyData();
-                this.reload();
-              }).catch((error) => {
-              this.disabled = false;
-              if (error.response.status === 422) {
-                this.errors = error.response.data.errors;
-              }
-            });
-          }
-        }
-      });
+      window.temporal = window.temporal || {};
+      window.temporal.categoryListApi = "{{route($config->routes->categoryListApi)}}";
     </script>
+    @vite(['resources/js/processes/categories/index.js'])
 @append
 @endif
 @section('css')
diff --git a/resources/views/designer/index.blade.php b/resources/views/designer/index.blade.php
index d3a6b3b18f..e32db4f59b 100644
--- a/resources/views/designer/index.blade.php
+++ b/resources/views/designer/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
 {{__('Designer')}}
@@ -14,7 +14,6 @@
     ]])
 @endsection
 @section('content')
-
 <div id="new-designer" class="p-3 page-content mb-0 bg-white">
     <welcome-designer></welcome-designer>
     <div class="card card-body border-0">
@@ -56,10 +55,12 @@
 @endsection
 
 @section('js')
-
 <script>
+    window.temporal = window.temporal || {};
+    window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.packages = window.temporal.packages;
     window.Processmaker.user = @json($currentUser);
 </script>
-<script src="{{mix('js/processes/newDesigner.js')}}"></script>
+@vite(['resources/js/processes/loaderProcesses.js'])
+@vite(['resources/js/processes/newDesigner.js'])
 @endsection
-
diff --git a/resources/views/inbox-rules/index.blade.php b/resources/views/inbox-rules/index.blade.php
index f4e1ca16bf..eb913f5efe 100644
--- a/resources/views/inbox-rules/index.blade.php
+++ b/resources/views/inbox-rules/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Inbox Rules')}}
@@ -20,11 +20,11 @@
 @endsection
 
 @section('js')
+    @vite('resources/js/tasks/loaderTasks.js')
     <script>
         window.Processmaker.defaultColumns = @json($defaultColumns);
     </script>
-    <script src="{{mix('js/inbox-rules/index.js')}}"></script>
-    <script src="{{mix('js/inbox-rules/show.js')}}"></script>
+    @vite('resources/js/inbox-rules/index.js')
 @endsection
 
 @section('css')
diff --git a/resources/views/layouts/layoutnextvite.blade.php b/resources/views/layouts/layoutnextvite.blade.php
index 1e5984ecb0..71117f54ac 100644
--- a/resources/views/layouts/layoutnextvite.blade.php
+++ b/resources/views/layouts/layoutnextvite.blade.php
@@ -27,7 +27,7 @@
     <meta name="timezone" content="{{ Auth::user()->timezone ?: config('app.timezone') }}">
     @yield('meta')
     @endif
-    <meta name="timeout-worker" content="{{ mix('js/timeout.js') }}">
+    <meta name="timeout-worker" content="{{ asset('js/timeout.js') }}">
     <meta name="timeout-length" content="{{ Session::has('rememberme') && Session::get('rememberme') ? "Number.MAX_SAFE_INTEGER" : config('session.lifetime') }}">
     <meta name="timeout-warn-seconds" content="{{ config('session.expire_warning') }}">
     @if(Session::has('_alert'))
@@ -136,6 +136,12 @@ class="main flex-grow-1 h-100
 <script src="{{config('broadcasting.connections.redis.host')}}/socket.io/socket.io.js"></script>
 @endif
 
+<script>
+  window.temporal = window.temporal || {};
+  window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+  window.packages = window.temporal.packages;
+</script>
+
 @yield('js')
 @stack('scripts')
 @foreach(GlobalScripts::getScripts() as $script)
@@ -144,7 +150,7 @@ class="main flex-grow-1 h-100
 @isset($addons)
   @foreach ($addons as $addon)
     @if (!empty($addon['script_mix']))
-      <script type="text/javascript" src="{{ mix($addon['script_mix'][0], $addon['script_mix'][1]) }}"></script>
+      <script defer type="text/javascript" src="{{ mix($addon['script_mix'][0], $addon['script_mix'][1]) }}"></script>
     @endif
     @if (!empty($addon['script_mix_module']))
       <script type="module" src="{{ mix($addon['script_mix_module'][0], $addon['script_mix_module'][1]) }}"></script>
diff --git a/resources/views/layouts/minimal.blade.php b/resources/views/layouts/minimal.blade.php
index 4b6483b74a..40620a520b 100644
--- a/resources/views/layouts/minimal.blade.php
+++ b/resources/views/layouts/minimal.blade.php
@@ -10,7 +10,7 @@
     <meta name="i18n-mdate" content='{!! json_encode(ProcessMaker\i18nHelper::mdates()) !!}'>
     @include('layouts.common-meta')
     <title>@yield('title',__('Welcome')) - {{ __('ProcessMaker') }}</title>
-    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
+    @vite('resources/sass/app.scss')
     <link rel="icon" href="{{ \ProcessMaker\Models\Setting::getFavicon() }}">
     @if (hasPackage('package-accessibility'))
         @include('package-accessibility::userway')
diff --git a/resources/views/notifications/index.blade.php b/resources/views/notifications/index.blade.php
index 03f20c4f60..17f1fb0933 100644
--- a/resources/views/notifications/index.blade.php
+++ b/resources/views/notifications/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
 {{__('Notifications Inbox')}}
@@ -52,5 +52,6 @@
 @endsection
 
 @section('js')
-<script src="{{mix('js/notifications/index.js')}}"></script>
+@vite('resources/js/notifications/loaderNotifications.js')  
+@vite('resources/js/notifications/index.js')
 @endsection
diff --git a/resources/views/processes-catalogue/index.blade.php b/resources/views/processes-catalogue/index.blade.php
index ca34bff986..4f9707ff78 100644
--- a/resources/views/processes-catalogue/index.blade.php
+++ b/resources/views/processes-catalogue/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite', ['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
     {{__('Processes Catalogue')}}
@@ -25,22 +25,26 @@
 @endsection
 
 @section('js')
+  {{-- temporal must exist before loader (Vite modules run after deferred classic scripts) --}}
   <script>
-    window.ProcessMaker.isDocumenterInstalled = {{
+    window.temporal = {};
+    window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.temporal.isDocumenterInstalled = {{
       Js::from(\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled())
     }};
-    window.ProcessMaker.permission = {{
+    window.temporal.permission = {{
       Js::from(\Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks', 'projects', 'documentation'))
     }};
-    window.ProcessMaker.defaultSavedSearch = {{{$defaultSavedSearch ?? 'null'}}};
-    window.ProcessMaker.isTceCustomization = {{{config('app.tce_customization_enable') ? 'true' : 'false'}}};
-    window.ProcessMaker.metricsApiEndpoint = `{{{$metricsApiEndpoint}}}`;
+    window.temporal.defaultSavedSearch = {{{$defaultSavedSearch ?? 'null'}}};
+    window.temporal.isTceCustomization = {{{config('app.tce_customization_enable') ? 'true' : 'false'}}};
+    window.temporal.metricsApiEndpoint = `{{{$metricsApiEndpoint}}}`;
+    window.temporal.userConfiguration = @json($userConfiguration ?? []);
+    window.temporal.user = @json($currentUser);
+    window.packages = window.temporal.packages;
   </script>
+  @vite(['resources/js/processes-catalogue/loaderProcessesCatalogue.js'])
   @foreach($manager->getScripts() as $script)
-    <script src="{{$script}}"></script>
+    <script defer src="{{$script}}"></script>
   @endforeach
-  <script src="{{mix('js/processes-catalogue/index.js')}}"></script>
-  <script>
-    window.Processmaker.user = @json($currentUser);
-  </script>
+  @vite(['resources/js/processes-catalogue/processesCatalogue.js'])
 @endsection
diff --git a/resources/views/processes/archivedList.blade.php b/resources/views/processes/archivedList.blade.php
index 822354704d..302886252d 100644
--- a/resources/views/processes/archivedList.blade.php
+++ b/resources/views/processes/archivedList.blade.php
@@ -30,5 +30,5 @@
 </div>
 
 @section('js')
-    <script src="{{mix('js/processes/archived.js')}}"></script>
+    @vite(['resources/js/processes/archived.js'])
 @append
diff --git a/resources/views/processes/edit.blade.php b/resources/views/processes/edit.blade.php
index 1161508184..f0ef66dd20 100644
--- a/resources/views/processes/edit.blade.php
+++ b/resources/views/processes/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout', ['title' => __('Processes Management')])
+@extends('layouts.layoutnextvite', ['title' => __('Processes Management')])
 
 @section('title')
     {{__('Configure Process')}}
@@ -240,7 +240,7 @@ class="invalid-feedback"
                                                         label="title"
                                                     >
                                                         <span slot="noResult">
-                                                            @{{ __(noElementsFoundMsg) }}
+                                                            @{{ noElementsFoundMsg }}
                                                         </span>
                                                         <template slot="noOptions">
                                                             {{ __('No Data Available') }}
@@ -269,9 +269,7 @@ class="invalid-feedback"
                                                         label="title"
                                                     >
                                                         <span slot="noResult">
-                                                            @{{
-                                                                __(noElementsFoundMsg)
-                                                            }}
+                                                            @{{ noElementsFoundMsg }}
                                                         </span>
                                                         <template slot="noOptions">
                                                             {{ __('No Data Available') }}
@@ -301,9 +299,7 @@ class="invalid-feedback"
                                                         group-label="label"
                                                     >
                                                         <span slot="noResult">
-                                                            @{{
-                                                                noElementsFoundMsg
-                                                            }}
+                                                            @{{ noElementsFoundMsg }}
                                                         </span>
                                                         <template slot="noOptions">
                                                             {{ __('No Data Available') }}
@@ -325,9 +321,7 @@ class="invalid-feedback"
                                                         group-label="label"
                                                     >
                                                         <span slot="noResult">
-                                                            @{{
-                                                                __(noElementsFoundMsg)
-                                                            }}
+                                                            @{{ noElementsFoundMsg }}
                                                         </span>
                                                         <template slot="noOptions">
                                                             {{ __('No Data Available') }}
@@ -625,7 +619,7 @@ class="custom-control-input">
                         @isset($addons)
                             @foreach ($addons as $addon)
                                 <div class="tab-pane show" id="{{$addon['id']}}" role="tabpanel"
-                                     aria-labelledby="nav-notifications-tab">
+                                     aria-labelledby="{{$addon['id']}}-tab">
                                     {!! $addon['content'] !!}
                                 </div>
                             @endforeach
@@ -640,12 +634,18 @@ class="custom-control-input">
 @endsection
 
 @section('js')
-    <script src="{{mix('js/processes/edit.js')}}"></script>
     <script>
+      window.temporal = window.temporal || {};
+      window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+      window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/processes/loaderProcesses.js'])
+    @vite(['resources/js/processes/edit.js'])
+    <script defer>
         window.addEventListener("load", function() {
             test = new Vue({
                 el: '#editProcess',
-                mixins: addons,
+                mixins: typeof addons !== 'undefined' ? addons : [],
                 data() {
                 return {
                     formData: @json($process),
@@ -671,7 +671,7 @@ class="custom-control-input">
                     manager: @json($process->getManagers()),
                     owner: @json($process->user),
                     activeTab: "",
-                    noElementsFoundMsg: 'Oops! No elements found. Consider changing the search query.',
+                    noElementsFoundMsg: {{ Js::from(__('Oops! No elements found. Consider changing the search query.')) }},
                     reassignmentPermissions: {
                         users: [],
                         groups: []
@@ -711,11 +711,12 @@ class="custom-control-input">
 
                     this.selectedProjects = this.assignedProjects.length > 0 ? this.assignedProjects.map(project => project.id) : null;
 
-                    let path = new URL(location.href).href;
-                    let target = path.split('#');
-
-                    if (target[1] !== undefined) {
-                        this.activeTab = target[1];
+                    const hash = window.location.hash.replace(/^#/, '');
+                    if (hash) {
+                        this.activeTab = hash;
+                        this.$nextTick(() => {
+                            this.showTab(hash);
+                        });
                     }
 
                     if (this.caseRetentionPolicyEnabled) {
@@ -762,7 +763,29 @@ class="custom-control-input">
                 },
                 methods: {
                 activateTab(event) {
-                    window.location.href = event.target.href;
+                    const href = event.currentTarget.getAttribute('href') || '';
+                    const hash = href.replace(/^#/, '');
+                    if (hash) {
+                        this.activeTab = hash;
+                        window.history.replaceState(null, '', `#${hash}`);
+                    }
+                },
+                showTab(hash) {
+                    const link = document.querySelector(`#nav-tab a[href="#${hash}"]`);
+                    if (!link) {
+                        return;
+                    }
+                    if (window.$ && typeof window.$(link).tab === 'function') {
+                        window.$(link).tab('show');
+                        return;
+                    }
+                    // Fallback if Bootstrap jQuery tabs are unavailable
+                    document.querySelectorAll('#nav-tab .nav-link').forEach((el) => {
+                        el.classList.toggle('active', el === link);
+                    });
+                    document.querySelectorAll('#nav-tabContent > .tab-pane').forEach((pane) => {
+                        pane.classList.toggle('active', pane.id === hash);
+                    });
                 },
                 loadScreens(filter) {
                     ProcessMaker.apiClient
diff --git a/resources/views/processes/environment-variables/edit.blade.php b/resources/views/processes/environment-variables/edit.blade.php
index 4288228451..4b02db41ad 100644
--- a/resources/views/processes/environment-variables/edit.blade.php
+++ b/resources/views/processes/environment-variables/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Edit Environment Variable')}}
@@ -52,7 +52,10 @@
 
 @section('js')
     <script>
-        window.ProcessMaker.EnvironmentVariableEdit = {
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.temporal.EnvironmentVariableEdit = {
             id: @json($environmentVariable->id),
             name: @json($environmentVariable->name),
             description: @json($environmentVariable->description),
@@ -62,5 +65,6 @@
             do_not_update: @json((bool) $environmentVariable->do_not_update),
         };
     </script>
-    <script src="{{mix('js/processes/environment-variables/edit.js')}}"></script>
+    @vite(['resources/js/processes/environment-variables/loaderEnvironment.js'])
+    @vite(['resources/js/processes/environment-variables/edit.js'])
 @endsection
diff --git a/resources/views/processes/environment-variables/index.blade.php b/resources/views/processes/environment-variables/index.blade.php
index 73a8184975..6c80025a8d 100644
--- a/resources/views/processes/environment-variables/index.blade.php
+++ b/resources/views/processes/environment-variables/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Environment Variables')}}
@@ -40,5 +40,12 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/processes/environment-variables/index.js')}}"></script>
+
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    </script>
+    @vite(['resources/js/processes/environment-variables/loaderEnvironment.js'])
+    @vite(['resources/js/processes/environment-variables/index.js'])
 @endsection
diff --git a/resources/views/processes/export.blade.php b/resources/views/processes/export.blade.php
index a1e484c179..92cdb1d55b 100644
--- a/resources/views/processes/export.blade.php
+++ b/resources/views/processes/export.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
 {{__('Export Process')}}
@@ -7,8 +7,7 @@
 @section('meta')
     <meta name="export-process-name" content="{{ $process->name }}">
     <meta name="export-process-id" content="{{ $process->id }}">
-    <meta name="export-project-id" content="{{ $projectId }}"
-
+    <meta name="export-project-id" content="{{ $projectId }}">
 @endsection
 
 @section('sidebar')
@@ -31,5 +30,11 @@
 @endsection
 
 @section('js')
-    <script src="{{ mix('js/processes/export/index.js') }}"></script>
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/processes/loaderProcesses.js'])
+    @vite(['resources/js/processes/export/index.js'])
 @endsection
diff --git a/resources/views/processes/import.blade.php b/resources/views/processes/import.blade.php
index d89d051bc2..fb266b2a19 100644
--- a/resources/views/processes/import.blade.php
+++ b/resources/views/processes/import.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Import Process')}}
@@ -23,8 +23,12 @@
 
 @section('js')
   <script>
-    window.ProcessMaker.importIsRunning = {{ $importIsRunning ? 'true' : 'false' }};
-    window.ProcessMaker.queueImports = {{ config('app.queue_imports') ? 'true' : 'false' }};
+    window.temporal = window.temporal || {};
+    window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.packages = window.temporal.packages;
+    window.temporal.importIsRunning = @json((bool) $importIsRunning);
+    window.temporal.queueImports = @json((bool) config('app.queue_imports'));
   </script>
-  <script src="{{ mix('js/processes/import/index.js') }}"></script>
+  @vite(['resources/js/processes/loaderProcesses.js'])
+  @vite(['resources/js/processes/import/index.js'])
 @endsection
diff --git a/resources/views/processes/index.blade.php b/resources/views/processes/index.blade.php
index 81b2299c1b..b58869cfa0 100644
--- a/resources/views/processes/index.blade.php
+++ b/resources/views/processes/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     @php
@@ -24,6 +24,7 @@
     ]])
 @endsection
 @section('content')
+@vite(['resources/js/processes/loaderProcesses.js'])
     @component('components.categorized_resource', [
             'tabs' => [
             __('Processes'),
diff --git a/resources/views/processes/list.blade.php b/resources/views/processes/list.blade.php
index 7569f901b1..f1468dc5c9 100644
--- a/resources/views/processes/list.blade.php
+++ b/resources/views/processes/list.blade.php
@@ -25,15 +25,15 @@
                     @endcan
                     @can('create-processes')
                         <select-template-modal
-                            :type="__('Process')"
+                            :type="{{ Js::from(__('Process')) }}"
                             :count-categories="@json($config->countCategories)"
                             :package-ai="{{ hasPackage('package-ai') ? '1' : '0' }}"
-                            is-projects-installed="{{\ProcessMaker\PackageHelper::isPackageInstalled(
+                            :is-projects-installed="@json(\ProcessMaker\PackageHelper::isPackageInstalled(
                                 \ProcessMaker\PackageHelper::PM_PACKAGE_PROJECTS
-                            )}}"
-                            is-ab-testing-installed="{{\ProcessMaker\PackageHelper::isPackageInstalled(
+                            ))"
+                            :is-ab-testing-installed="@json(\ProcessMaker\PackageHelper::isPackageInstalled(
                                 \ProcessMaker\PackageHelper::PM_PACKAGE_AB_TESTING
-                            )}}"
+                            ))"
                             >
                             </select-template-modal>
                     @endcan
@@ -67,6 +67,5 @@
 </div>
 
 @section('js')
-    <script src="{{mix('js/processes/index.js')}}"></script>
-
+   @vite(['resources/js/processes/processes.js'])
 @append
diff --git a/resources/views/processes/modeler/index.blade.php b/resources/views/processes/modeler/index.blade.php
index a9d4980dc3..3e0312b975 100644
--- a/resources/views/processes/modeler/index.blade.php
+++ b/resources/views/processes/modeler/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout', ['content_margin'=>''])
+@extends('layouts.layoutnextvite', ['content_margin'=>''])
 
 @section('title')
   {{__('Edit Process')}}
@@ -40,9 +40,10 @@
 @endsection
 
 @section('js')
-  <script src="{{mix('js/leave-warning.js')}}"></script>
+  @include('shared.monaco')
   <script>
-  const breadcrumbData = [
+  window.temporal = window.temporal || {};
+  window.temporal.breadcrumbData = [
     {
       'text':'{{__('Designer')}}',
       'url':'{{route('processes.index')}}'
@@ -59,18 +60,18 @@
       'text':'{{$process->name}}',
       'url':''
     },
-  ]
+  ];
 
-  window.ProcessMaker.defaultEmailNotification = @json($defaultEmailNotification);
+  window.temporal.defaultEmailNotification = @json($defaultEmailNotification);
 
-  window.ProcessMaker.multiplayer = {
+  window.temporal.multiplayer = {
     broadcaster: "{{config('multiplayer.default')}}",
     host: "{{config('multiplayer.url')}}",
     enabled: "{{ config('multiplayer.enabled') }}",
   };
-  window.ProcessMaker.PMBlockList = @json($pmBlockList);
-  window.ProcessMaker.ExternalIntegrationsList = @json($externalIntegrationsList);
-  window.ProcessMaker.modeler = {
+  window.temporal.PMBlockList = @json($pmBlockList);
+  window.temporal.ExternalIntegrationsList = @json($externalIntegrationsList);
+  window.temporal.modeler = {
     process: @json($process),
     autoSaveDelay: @json($autoSaveDelay),
     xml: @json($process->bpmn),
@@ -102,18 +103,15 @@
     alternative: @json($alternative),
     draftAlternative: @json($draftAlternative),
     launchpad: @json($launchpad),
-  }
-  const warnings = @json($process->warnings);
-  window.ProcessMaker.tceCustomizationEnable = @json($isTceCustomization);
-
-  window.ProcessMaker.EventBus.$on('modeler-start', ({ loadXML, addWarnings, addBreadcrumbs }) => {
-    loadXML(window.ProcessMaker.modeler.xml);
-    addWarnings(warnings || []);
-    addBreadcrumbs(breadcrumbData || []);
-  });
+  };
+  window.temporal.warnings = @json($process->warnings);
+  window.temporal.tceCustomizationEnable = @json($isTceCustomization);
   </script>
+  @vite(['resources/js/processes/modeler/loaderModeler.js'])
+  @vite(['resources/js/leave-warning.js'])
+  @vite(['resources/js/processes/modeler/initialLoad.js'])
     @foreach($manager->getScriptWithParams() as $params)
-      <script
+      <script defer
       @foreach ($params as $key => $value)
         @if (is_bool($value))
           {{ $key }}
@@ -123,6 +121,6 @@
       @endforeach
       ></script>
     @endforeach
-  <script src="{{ mix('js/processes/modeler/index.js') }}"></script>
+    @vite(['resources/js/processes/modeler/index.js'])
   @yield('extra_js')
 @endsection
diff --git a/resources/views/processes/screen-builder/screen.blade.php b/resources/views/processes/screen-builder/screen.blade.php
index d9c831d3d2..042d1bae15 100644
--- a/resources/views/processes/screen-builder/screen.blade.php
+++ b/resources/views/processes/screen-builder/screen.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout', ['content_margin'=>''])
+@extends('layouts.layoutnextvite', ['content_margin'=>''])
 
 @section('title')
     {{__('Edit Screen')}}
@@ -25,7 +25,6 @@ class="border-0 bg-white p-0"
       />
     </div>
 @endsection
-
 @section('content')
     <div class="sr-only">{{ __('A mouse and keyboard are required to use screen builder.') }}</div>
     <div id="screen-container" style="display: contents !important">
@@ -41,106 +40,110 @@ class="border-0 bg-white p-0"
 @endsection
 
 @section('js')
+<script src="{{ mix('js/manifest.js') }}"></script>
+    {{-- Load Monaco AMD loader before any Vue component that uses vue-monaco --}}
+    @include('shared.monaco')
+    {{-- Register FORM controls before loaderScreen dispatches app-bootstrapped --}}
+    @vite(['resources/js/processes/screen-builder/loaderScreen.js'])
     <script>
-      window.ProcessMaker.EventBus.$on("screen-builder-init", (builder) => {
-        // Registrar el EP para script, datasource y execute
-        if (builder.watchers) {
-          if (@json(route::has('api.scripts.index'))) {
-            builder.watchers_config.api.scripts.push((data) => {
-              ProcessMaker.apiClient
-                .get(@json(route('api.scripts.index' )) + '?per_page=10000')
-                .then(response => {
-                  let scripts = response.data.data.map(item => {
-                    item.id = "script-" + item.id;
-                    return item;
+      // Register EventBus listeners after setupMain() fires 'app-bootstrapped'
+      window.addEventListener('app-bootstrapped', function () {
+        window.ProcessMaker.EventBus.$on("screen-builder-init", (builder) => {
+          if (builder.watchers) {
+            if (@json(route::has('api.scripts.index'))) {
+              builder.watchers_config.api.scripts.push((data) => {
+                ProcessMaker.apiClient
+                  .get(@json(route('api.scripts.index')) + '?per_page=10000')
+                  .then(response => {
+                    let scripts = response.data.data.map(item => {
+                      item.id = "script-" + item.id;
+                      return item;
+                    });
+                    if (scripts) {
+                      data.push({
+                        "type": @json(__('Scripts')),
+                        "items": scripts,
+                      });
+                    }
                   });
-                  if (scripts) {
-                    data.push({
-                      "type": @json(__('Scripts')),
-                      "items": scripts,
+              });
+            }
+
+            if (@json(route::has('api.data-sources.index'))) {
+              builder.watchers_config.api.scripts.push((data) => {
+                ProcessMaker.apiClient
+                  .get('data_sources' + '?per_page=10000')
+                  .then(response => {
+                    let dataSource = response.data.data.map(item => {
+                      item.id = "data_source-" + item.id;
+                      item.title = item.name;
+                      item.key = 'package-data-sources/data-source-task-service';
+                      return item;
                     });
-                  }
-                });
-            });
+                    if (dataSource) {
+                      data.push({
+                        "type": @json(__('Data Connectors')),
+                        "items": dataSource,
+                      });
+                    }
+                  });
+              });
+            }
+
+            builder.watchers_config.api.execute = @json(route('api.scripts.execute', ['script_id' => 'script_id', 'script_key' => 'script_key']));
+            builder.watchers_config.api.execution = @json(route('api.scripts.execution', ['key' => 'execution_key']));
+          } else {
+            console.warn("Screen builder version does not have watchers");
           }
+        });
 
-          if (@json(route::has('api.data-sources.index'))) {
-            builder.watchers_config.api.scripts.push((data) => {
-              ProcessMaker.apiClient
-                .get('data_sources' + '?per_page=10000')
-                .then(response => {
-                  let dataSource = response.data.data.map(item => {
-                    item.id = "data_source-" + item.id;
-                    item.title = item.name;
-                    item.key = 'package-data-sources/data-source-task-service';
-                    return item;
-                  });
-                  if (dataSource) {
-                    data.push({
-                      "type": @json(__('Data Connectors')),
-                      "items": dataSource,
-                    });
-                  }
-                });
-            });
+        window.ProcessMaker.EventBus.$on("screen-renderer-init", (screen) => {
+          if (screen.watchers) {
+            screen.watchers_config.api.execute = @json(route('api.scripts.execute', ['script_id' => 'script_id', 'script_key' => 'script_key']));
+            screen.watchers_config.api.execution = @json(route('api.scripts.execution', ['key' => 'execution_key']));
+          } else {
+            console.warn("Screen builder version does not have watchers");
           }
+        });
 
-          builder.watchers_config.api.execute = @json(route('api.scripts.execute', ['script_id' => 'script_id', 'script_key' => 'script_key']));
-          builder.watchers_config.api.execution = @json(route('api.scripts.execution', ['key' => 'execution_key']));
-        } else {
-          console.warn("Screen builder version does not have watchers");
-        }
-      });
-      window.ProcessMaker.EventBus.$on("screen-renderer-init", (screen) => {
-        if (screen.watchers) {
-          screen.watchers_config.api.execute = @json(route('api.scripts.execute', ['script_id' => 'script_id', 'script_key' => 'script_key']));
-          screen.watchers_config.api.execution = @json(route('api.scripts.execution', ['key' => 'execution_key']));
-        } else {
-          console.warn("Screen builder version does not have watchers");
-        }
-      });
-      window.ProcessMaker.EventBus.$on("screen-renderer-init", (screen) => {
-        // Register saveToServerFn
-        screen.$store.dispatch("clipboardModule/setupSaveToServerFn", (items) => {
-          return ProcessMaker.apiClient.post('/api/1.1/clipboard/create_or_update', {
-            config: items, // JSON.stringify(items),
+        window.ProcessMaker.EventBus.$on("screen-renderer-init", (screen) => {
+          screen.$store.dispatch("clipboardModule/setupSaveToServerFn", (items) => {
+            return ProcessMaker.apiClient.post('/api/1.1/clipboard/create_or_update', {
+              config: items,
+            });
           });
-        });
 
-        // Register loadFromServerFn
-        screen.$store.dispatch("clipboardModule/setupLoadFromServerFn", () => {
-          return ProcessMaker.apiClient.get('/api/1.1/clipboard/get_by_user')
-          .then(handleClipboardResponse)
-          .catch(handleClipboardError);
+          screen.$store.dispatch("clipboardModule/setupLoadFromServerFn", () => {
+            return ProcessMaker.apiClient.get('/api/1.1/clipboard/get_by_user')
+            .then(handleClipboardResponse)
+            .catch(handleClipboardError);
 
-          /**
-           * Handle clipboard API response
-           * @param {object} response
-           */
-          function handleClipboardResponse(response) {
-            if (response && response.data && response.data.config && Array.isArray(response.data.config)) {
-              // addClipboardToStore(response.data.config);
-              return response.data.config;
-            } else {
-              throw new Error("No valid clipboard config data in response.");
+            function handleClipboardResponse(response) {
+              if (response && response.data && response.data.config && Array.isArray(response.data.config)) {
+                return response.data.config;
+              } else {
+                throw new Error("No valid clipboard config data in response.");
+              }
             }
-          }
 
-          /**
-           * Handle clipboard API error
-           * @param {Error} error
-           */
-          function handleClipboardError(error) {
-            console.error("Error fetching clipboard data: ", error);
-          }
+            function handleClipboardError(error) {
+              console.error("Error fetching clipboard data: ", error);
+            }
+          });
         });
       });
-
-      window.Processmaker.user = @json($currentUser);
     </script>
-    <script src="{{mix('js/leave-warning.js')}}"></script>
     @foreach($manager->getScripts() as $script)
-        <script src="{{$script}}"></script>
+
+        <script defer src="{{$script}}"></script>
     @endforeach
-    <script src="{{mix('js/processes/screen-builder/main.js')}}"></script>
+
+    @if ($type === 'FORM')
+      @vite(['resources/js/processes/screen-builder/typeForm.js'])
+    @elseif ($type === 'DISPLAY')
+      @vite(['resources/js/processes/screen-builder/typeDisplay.js'])
+    @endif
+
+    @vite(['resources/js/leave-warning.js'])
+    @vite(['resources/js/processes/screen-builder/main.js'])
 @endsection
diff --git a/resources/views/processes/screens/edit.blade.php b/resources/views/processes/screens/edit.blade.php
index b4fccc9f96..72fc53e3de 100644
--- a/resources/views/processes/screens/edit.blade.php
+++ b/resources/views/processes/screens/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Configure Screen')}}
@@ -81,77 +81,14 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/processes/screens/edit.js')}}"></script>
-    <script>
-        new Vue({
-            el: '#editGroup',
-            mixins: addons,
-            data() {
-                return {
-                    formData: @json($screen),
-                    assignedProjects: @json($assignedProjects),
-                    isDraft: @json($isDraft),
-                    selectedProjects: '',
-                    errors: {
-                        'title': null,
-                        'type': null,
-                        'description': null,
-                        'status': null
-                    }
-                }
-            },
-            watch: {
-                selectedProjects: {
-                    handler() {
-                        this.formData.projects = this.selectedProjects;
-                    }
-                }
-            },
-            methods: {
-                resetErrors() {
-                    this.errors = Object.assign({}, {
-                        title: null,
-                        type: null,
-                        description: null,
-                        status: null
-                    });
-                },
-                onClose() {
-                  const queryParams = new URLSearchParams(window.location.search);
-                  const projectId = queryParams.get("project_id");
-                  window.location.href = projectId ? `/designer/projects/${projectId}`: '/designer/screens';
-                },
-                onUpdate() {
-                    if (this.isDraft) {
-                        ProcessMaker.confirmModal(
-                            this.$t("Caution!"),
-                            this.$t("You are about to publish a draft version. Are you sure you want to proceed?"),
-                            "",
-                            () => {
-                                this.handleUpdate();
-                            }
-                        );
-                    } else {
-                        this.handleUpdate();
-                    }
-                },
-                handleUpdate() {
-                    this.resetErrors();
-                    ProcessMaker.apiClient.put('screens/' + this.formData.id, this.formData)
-                        .then(response => {
-                            ProcessMaker.alert(this.$t('The screen was saved.'), 'success');
-                            this.onClose();
-                        })
-                        .catch(error => {
-                            if (error.response.status && error.response.status === 422) {
-                                this.errors = error.response.data.errors;
-                            }
-                        });
-                }
-            },
-            mounted() {
-                this.selectedProjects = this.assignedProjects.length > 0 ?this.assignedProjects.map(project => project.id) : null;
-            }
-        });
-    </script>
+<script>
+    window.temporal = window.temporal || {};
+    window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    window.temporal.screen = @json($screen);
+    window.temporal.assignedProjects = @json($assignedProjects);
+    window.temporal.isDraft = @json($isDraft);
+</script>
+    @vite(['resources/js/processes/screens/loaderScreens.js'])
+    @vite(['resources/js/processes/screens/edit.js'])
 @endsection
diff --git a/resources/views/processes/screens/export.blade.php b/resources/views/processes/screens/export.blade.php
index 7e7741a924..38ba848810 100644
--- a/resources/views/processes/screens/export.blade.php
+++ b/resources/views/processes/screens/export.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Export Screen')}}
@@ -44,26 +44,34 @@
 
 @section('js')
     <script>
-      new Vue({
-        el: '#exportScreen',
-        data: {
-          screenId: @json($screen->id)
-        },
-        methods: {
-          onCancel() {
-            window.location = '{{ route("screens.index") }}';
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/processes/screens/loaderScreens.js'])
+    <script>
+      window.addEventListener('load', function () {
+        new window.Vue({
+          el: '#exportScreen',
+          data: {
+            screenId: @json($screen->id)
           },
-          onExport() {
-            ProcessMaker.apiClient.post('screens/' + this.screenId + '/export')
-              .then(response => {
-                window.location = response.data.url;
-                ProcessMaker.alert(this.$t('The screen was exported.'), 'success');
-              })
-              .catch(error => {
-                ProcessMaker.alert(error.response.data.message, 'danger');
-              });
+          methods: {
+            onCancel() {
+              window.location = '{{ route("screens.index") }}';
+            },
+            onExport() {
+              ProcessMaker.apiClient.post('screens/' + this.screenId + '/export')
+                .then(response => {
+                  window.location = response.data.url;
+                  ProcessMaker.alert(this.$t('The screen was exported.'), 'success');
+                })
+                .catch(error => {
+                  ProcessMaker.alert(error.response.data.message, 'danger');
+                });
+            }
           }
-        }
-      })
+        });
+      });
     </script>
 @endsection
diff --git a/resources/views/processes/screens/import.blade.php b/resources/views/processes/screens/import.blade.php
index 6e0e925bdb..be7976aa02 100644
--- a/resources/views/processes/screens/import.blade.php
+++ b/resources/views/processes/screens/import.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Import Screen')}}
@@ -91,70 +91,77 @@ class="btn btn-secondary ml-2"
 
 @section('js')
     <script>
-      new Vue({
-        el: '#importScreen',
-        data: {
-          file: '',
-          uploaded: false,
-          submitted: false,
-          options: [],
-          fileName: ''
-        },
-        methods: {
-          handleFile(e) {
-            this.file = this.$refs.file.files[0];
-            this.uploaded = true;
-            this.submitted = false;
-            this.fileName = this.file.name;
-            console.log(this.file);
-          },
-          reload() {
-            window.location.reload();
-          },
-          onCancel() {
-            window.location = '{{ route("screens.index") }}';
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/processes/screens/loaderScreens.js'])
+    <script>
+      window.addEventListener('load', function () {
+        new window.Vue({
+          el: '#importScreen',
+          data: {
+            file: '',
+            uploaded: false,
+            submitted: false,
+            options: [],
+            fileName: ''
           },
-          importFile() {
-            let formData = new FormData();
-            formData.append('file', this.file);
-            if (this.submitted) {
-              return
-            }
-            this.submitted = true;
-            ProcessMaker.apiClient.post('/screens/import',
-              formData,
-              {
-                headers: {
-                  'Content-Type': 'multipart/form-data'
-                }
+          methods: {
+            handleFile() {
+              this.file = this.$refs.file.files[0];
+              this.uploaded = true;
+              this.submitted = false;
+              this.fileName = this.file.name;
+            },
+            reload() {
+              window.location.reload();
+            },
+            onCancel() {
+              window.location = '{{ route("screens.index") }}';
+            },
+            importFile() {
+              let formData = new FormData();
+              formData.append('file', this.file);
+              if (this.submitted) {
+                return
               }
-            ).then(response => {
-              if (!response.data.status) {
-                ProcessMaker.alert(this.$t('Unable to import the screen.'), 'danger');
-                return;
-              }
-              this.options = response.data.status;
-              let message = this.$t('The screen was imported.');
-              let variant = 'success';
-              for (let item in this.options) {
-                if (!this.options[item].success) {
-                  message = this.$t('The screen was imported, but with errors.');
-                  variant = 'warning'
+              this.submitted = true;
+              ProcessMaker.apiClient.post('/screens/import',
+                formData,
+                {
+                  headers: {
+                    'Content-Type': 'multipart/form-data'
+                  }
                 }
-              }
-              ProcessMaker.alert(message, variant);
-              this.$refs.responseImport.show();
-            })
-              .catch(error => {
-                this.submitted = false;
-                ProcessMaker.alert(
-                  this.$t('Unable to import the screen.') +
-                  (error.response.data.message ? ': ' + error.response.data.message : ''),
-                  'danger'
-                  );
-              });
-          },
-        }
-      })
+              ).then(response => {
+                if (!response.data.status) {
+                  ProcessMaker.alert(this.$t('Unable to import the screen.'), 'danger');
+                  return;
+                }
+                this.options = response.data.status;
+                let message = this.$t('The screen was imported.');
+                let variant = 'success';
+                for (let item in this.options) {
+                  if (!this.options[item].success) {
+                    message = this.$t('The screen was imported, but with errors.');
+                    variant = 'warning'
+                  }
+                }
+                ProcessMaker.alert(message, variant);
+                this.$refs.responseImport.show();
+              })
+                .catch(error => {
+                  this.submitted = false;
+                  ProcessMaker.alert(
+                    this.$t('Unable to import the screen.') +
+                    (error.response.data.message ? ': ' + error.response.data.message : ''),
+                    'danger'
+                    );
+                });
+            },
+          }
+        });
+      });
     </script>
 @endsection
diff --git a/resources/views/processes/screens/index.blade.php b/resources/views/processes/screens/index.blade.php
index 50cd01da7c..f7037d23b8 100644
--- a/resources/views/processes/screens/index.blade.php
+++ b/resources/views/processes/screens/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Screens')}}
@@ -16,6 +16,12 @@
 @endsection
 
 @section('content')
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+    </script>
+    @vite(['resources/js/processes/screens/loaderScreens.js'])
     @component('components.categorized_resource', [
             'tabs' => [
             __('Screens'),
diff --git a/resources/views/processes/screens/list.blade.php b/resources/views/processes/screens/list.blade.php
index 9ee623db0e..1eeef45835 100644
--- a/resources/views/processes/screens/list.blade.php
+++ b/resources/views/processes/screens/list.blade.php
@@ -42,6 +42,5 @@
     </div>
 
 @section('js')
-    <script src="{{mix('js/processes/screens/index.js')}}"></script>
-
+    @vite(['resources/js/processes/screens/index.js'])
 @append
diff --git a/resources/views/processes/screens/myTemplates.blade.php b/resources/views/processes/screens/myTemplates.blade.php
index bfa6d5a59b..95ef8913d1 100644
--- a/resources/views/processes/screens/myTemplates.blade.php
+++ b/resources/views/processes/screens/myTemplates.blade.php
@@ -46,6 +46,5 @@ class="btn btn-outline-secondary w-100"
     </div>
 
 @section('js')
-    <script src="{{mix('js/processes/screen-templates/myTemplates.js')}}"></script>
-
+    @vite(['resources/js/processes/screen-templates/myTemplates.js'])
 @append
diff --git a/resources/views/processes/screens/publicTemplates.blade.php b/resources/views/processes/screens/publicTemplates.blade.php
index 56516bdb7d..743f987cf8 100644
--- a/resources/views/processes/screens/publicTemplates.blade.php
+++ b/resources/views/processes/screens/publicTemplates.blade.php
@@ -44,6 +44,5 @@ class="btn btn-outline-secondary w-100"
     </div>
 
 @section('js')
-    <script src="{{mix('js/processes/screen-templates/publicTemplates.js')}}"></script>
-
+    @vite(['resources/js/processes/screen-templates/publicTemplates.js'])
 @append
diff --git a/resources/views/processes/scripts/builder.blade.php b/resources/views/processes/scripts/builder.blade.php
index faa4df2de0..3e9387304d 100644
--- a/resources/views/processes/scripts/builder.blade.php
+++ b/resources/views/processes/scripts/builder.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout', ['content_margin' => ''])
+@extends('layouts.layoutnextvite', ['content_margin' => ''])
 
 @section('title')
   {{ __('Edit Script') }}
@@ -53,9 +53,11 @@
 @endsection
 
 @section('js')
-  <script src="{{mix('js/leave-warning.js')}}"></script>
+  @include('shared.monaco')
+  @vite(['resources/js/processes/scripts/loaderScripts.js'])
   @foreach ($manager->getScripts() as $script)
-    <script src="{{ $script }}"></script>
+    <script defer src="{{ $script }}"></script>
   @endforeach
-  <script src="{{ mix('js/processes/scripts/edit.js') }}"></script>
+  @vite(['resources/js/leave-warning.js'])
+  @vite(['resources/js/processes/scripts/edit.js'])
 @endsection
diff --git a/resources/views/processes/scripts/edit.blade.php b/resources/views/processes/scripts/edit.blade.php
index 61fd6737b3..ad6977092c 100644
--- a/resources/views/processes/scripts/edit.blade.php
+++ b/resources/views/processes/scripts/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Configure Script')}}
@@ -141,84 +141,93 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/processes/scripts/editConfig.js')}}"></script>
     <script>
-      window.DesignerScripts = new Vue({
-        el: '#editScript',
-        mixins: addons,
-        data() {
-          return {
-            formData: @json($script),
-            scriptExecutors: @json($scriptExecutors),
-            selectedUser: @json($selectedUser),
-            assignedProjects: @json($assignedProjects),
-            selectedProjects: '',
-            errors: {
-              'title': null,
-              'language': null,
-              'description': null,
-              'timeout': null,
-              'retry_attempts': null,
-              'retry_wait_time': null,
-              'status': null
-            },
-            editScriptHooks: [],
-          }
-        },
-        watch: {
-          selectedProjects: {
-            handler() {
-              this.formData.projects = this.selectedProjects;
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/processes/scripts/loaderScripts.js'])
+    @vite(['resources/js/processes/scripts/editConfig.js'])
+    <script>
+      // Mount after deferred package addon scripts (layoutnextvite yields page JS before addons).
+      window.addEventListener('load', function () {
+        window.DesignerScripts = new window.Vue({
+          el: '#editScript',
+          mixins: typeof addons !== 'undefined' ? addons : [],
+          data() {
+            return {
+              formData: @json($script),
+              scriptExecutors: @json($scriptExecutors),
+              selectedUser: @json($selectedUser),
+              assignedProjects: @json($assignedProjects),
+              selectedProjects: '',
+              errors: {
+                'title': null,
+                'language': null,
+                'description': null,
+                'timeout': null,
+                'retry_attempts': null,
+                'retry_wait_time': null,
+                'status': null
+              },
+              editScriptHooks: [],
             }
-          }
-        },
-        methods: {
-          resetErrors() {
-            this.errors = Object.assign({}, {
-              title: null,
-              language: null,
-              description: null,
-              status: null
-            });
           },
-          onClose() {
-            const queryParams = new URLSearchParams(window.location.search);
-            const projectId = queryParams.get("project_id");
-            window.location.href = projectId ? `/designer/projects/${projectId}`: '/designer/scripts';
+          watch: {
+            selectedProjects: {
+              handler() {
+                this.formData.projects = this.selectedProjects;
+              }
+            }
           },
-          onUpdate() {
-            this.resetErrors();
-            ProcessMaker.apiClient.put('scripts/' + this.formData.id, {
-              title: this.formData.title,
-              language: this.scriptExecutors[this.formData.script_executor_id].language,
-              script_category_id: this.formData.script_category_id,
-              description: this.formData.description,
-              run_as_user_id: this.selectedUser === null ? null : this.selectedUser.id,
-              projects: this.formData.projects,
-              timeout: this.formData.timeout,
-              retry_attempts: this.formData.retry_attempts,
-              retry_wait_time: this.formData.retry_wait_time,
-              script_executor_id: this.formData.script_executor_id,
-            })
-              .then(response => {
-                ProcessMaker.alert(this.$t('The script was saved.'), 'success');
-                (this.$refs.editScriptHooks || []).forEach(hook => {
-                  hook.onsave(this.formData);
-                });
-                this.onClose();
-              })
-              .catch(error => {
-                if (_.get(error, 'response.status') === 422) {
-                  this.errors = error.response.data.errors;
-                } else {
-                  throw error;
-                }
+          methods: {
+            resetErrors() {
+              this.errors = Object.assign({}, {
+                title: null,
+                language: null,
+                description: null,
+                status: null
               });
+            },
+            onClose() {
+              const queryParams = new URLSearchParams(window.location.search);
+              const projectId = queryParams.get("project_id");
+              window.location.href = projectId ? `/designer/projects/${projectId}`: '/designer/scripts';
+            },
+            onUpdate() {
+              this.resetErrors();
+              ProcessMaker.apiClient.put('scripts/' + this.formData.id, {
+                title: this.formData.title,
+                language: this.scriptExecutors[this.formData.script_executor_id].language,
+                script_category_id: this.formData.script_category_id,
+                description: this.formData.description,
+                run_as_user_id: this.selectedUser === null ? null : this.selectedUser.id,
+                projects: this.formData.projects,
+                timeout: this.formData.timeout,
+                retry_attempts: this.formData.retry_attempts,
+                retry_wait_time: this.formData.retry_wait_time,
+                script_executor_id: this.formData.script_executor_id,
+              })
+                .then(() => {
+                  ProcessMaker.alert(this.$t('The script was saved.'), 'success');
+                  (this.$refs.editScriptHooks || []).forEach(hook => {
+                    hook.onsave(this.formData);
+                  });
+                  this.onClose();
+                })
+                .catch(error => {
+                  if (_.get(error, 'response.status') === 422) {
+                    this.errors = error.response.data.errors;
+                  } else {
+                    throw error;
+                  }
+                });
+            }
+          },
+          mounted() {
+            this.selectedProjects = this.assignedProjects.length > 0 ? this.assignedProjects.map(project => project.id) : null;
           }
-        },
-        mounted() {
-          this.selectedProjects = this.assignedProjects.length > 0 ?this.assignedProjects.map(project => project.id) : null;
-        }
+        });
       });
     </script>
 @endsection
diff --git a/resources/views/processes/scripts/index.blade.php b/resources/views/processes/scripts/index.blade.php
index 4e10ac6ccb..a578a345e3 100644
--- a/resources/views/processes/scripts/index.blade.php
+++ b/resources/views/processes/scripts/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 @section('title')
     {{__('Scripts')}}
 @endsection
@@ -15,6 +15,12 @@
 @endsection
 
 @section('content')
+    <script>
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = window.temporal.packages;
+    </script>
+    @vite(['resources/js/processes/scripts/loaderScripts.js'])
     @component('components.categorized_resource', [
             'tabs' => [
             __('Scripts'),
@@ -39,4 +45,3 @@
 
 @section('js')
 @endsection
-
diff --git a/resources/views/processes/scripts/list.blade.php b/resources/views/processes/scripts/list.blade.php
index 459bfd1c14..28616952de 100644
--- a/resources/views/processes/scripts/list.blade.php
+++ b/resources/views/processes/scripts/list.blade.php
@@ -33,6 +33,5 @@
     </div>
     
 @section('js')
-    <script src="{{mix('js/processes/scripts/index.js')}}"></script>
-
+    @vite(['resources/js/processes/scripts/index.js'])
 @append
diff --git a/resources/views/processes/signals/edit.blade.php b/resources/views/processes/signals/edit.blade.php
index 7091b608a1..1c68e42553 100644
--- a/resources/views/processes/signals/edit.blade.php
+++ b/resources/views/processes/signals/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
   {{__('Edit Signal')}}
@@ -76,50 +76,56 @@
 @endsection
 
 @section('js')
-<script src="{{mix('js/processes/signals/edit.js')}}"></script>
-
 <script>
-  new Vue({
-    el: '#editSignal',
-    mixins: addons,
-    data() {
-      return {
-        showAddUserModal: false,
-        formData: @json($signal),
-        originalId: (@json($signal)).id,
-        filter: '',
-        errors: {
-          'name': null,
-          'id': null,
-        },
-      }
-    },
-    methods: {
-      resetErrors() {
-        this.errors = Object.assign({}, {
-          id: null,
-          name: null,
-        });
-      },
-      onClose() {
-        window.location.href = '/designer/signals';
+  window.temporal = window.temporal || {};
+  window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+  window.packages = window.temporal.packages;
+</script>
+@vite(['resources/js/processes/signals/loaderSignals.js'])
+@vite(['resources/js/processes/signals/edit.js'])
+<script>
+  // Mount after deferred package addon scripts (layoutnextvite yields page JS before addons).
+  window.addEventListener('load', function () {
+    new window.Vue({
+      el: '#editSignal',
+      mixins: typeof addons !== 'undefined' ? addons : [],
+      data() {
+        return {
+          showAddUserModal: false,
+          formData: @json($signal),
+          originalId: (@json($signal)).id,
+          filter: '',
+          errors: {
+            'name': null,
+            'id': null,
+          },
+        }
       },
-      onUpdate() {
-        this.resetErrors();
-        ProcessMaker.apiClient.put('signals/' + this.originalId, this.formData)
-          .then(response => {
-            ProcessMaker.alert(this.$t('Update Signal Successfully'), 'success');
-            this.onClose();
-          })
-          .catch(error => {
-            //define how display errors
-            if (error.response.status && error.response.status === 422) {
-              // Validation error
-              this.errors = error.response.data.errors;
-            }
+      methods: {
+        resetErrors() {
+          this.errors = Object.assign({}, {
+            id: null,
+            name: null,
           });
-      },
-    }
+        },
+        onClose() {
+          window.location.href = '/designer/signals';
+        },
+        onUpdate() {
+          this.resetErrors();
+          ProcessMaker.apiClient.put('signals/' + this.originalId, this.formData)
+            .then(() => {
+              ProcessMaker.alert(this.$t('Update Signal Successfully'), 'success');
+              this.onClose();
+            })
+            .catch(error => {
+              if (error.response.status && error.response.status === 422) {
+                this.errors = error.response.data.errors;
+              }
+            });
+        },
+      }
+    });
   });
 </script>
 @endsection
diff --git a/resources/views/processes/signals/index.blade.php b/resources/views/processes/signals/index.blade.php
index 9abf84211c..3e1fb62c1b 100644
--- a/resources/views/processes/signals/index.blade.php
+++ b/resources/views/processes/signals/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Signals')}}
@@ -68,74 +68,11 @@
 @endsection
 
 @section('js')
-    <script src="{{mix('js/processes/signals/index.js')}}"></script>
     <script>
-        new Vue({
-            el: '#listSignals',
-            data() {
-                return {
-                    filter: "",
-                    formData: {},
-                    errors: {
-                        'name': null,
-                        'id': null,
-                    },
-                    disabled: false
-                }
-            },
-            mounted() {
-                this.resetFormData();
-                this.resetErrors();
-            },
-            methods: {
-                onClose() {
-                    this.resetFormData();
-                    this.resetErrors();
-                },
-                resetFormData() {
-                    this.formData = Object.assign({}, {
-                        name: null,
-                        id: null,
-                    });
-                },
-                resetErrors() {
-                    this.errors = Object.assign({}, {
-                        name: null,
-                        id: null,
-                    });
-                },
-                reload () {
-                    this.$refs.signalList.dataManager([
-                        {
-                            field: "name",
-                            direction: "desc"
-                        }
-                    ]);
-                },
-                onSubmit() {
-                    this.resetErrors();
-                    //single click
-                    if (this.disabled) {
-                        return
-                    }
-                    this.disabled = true;
-                    ProcessMaker.apiClient.post('signals', this.formData)
-                        .then(response => {
-                            ProcessMaker.alert(this.$t('The signal was created.'), 'success');
-                            //redirect list signal
-                            window.location = '/designer/signals';
-                        })
-                        .catch(error => {
-                            this.disabled = false;
-                            //define how display errors
-                            if (error.response.status && error.response.status === 422) {
-                                // Validation error
-                                this.errors = error.response.data.errors;
-                                //ProcessMaker.alert(this.errors, 'warning');
-                            }
-                        });
-                }
-            }
-        });
+        window.temporal = window.temporal || {};
+        window.temporal.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+        window.packages = window.temporal.packages;
     </script>
+    @vite(['resources/js/processes/signals/loaderSignals.js'])
+    @vite(['resources/js/processes/signals/index.js'])
 @endsection
diff --git a/resources/views/profile/edit.blade.php b/resources/views/profile/edit.blade.php
index d7d24757a2..9fdbe7a76a 100644
--- a/resources/views/profile/edit.blade.php
+++ b/resources/views/profile/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Edit Profile')}}
@@ -111,662 +111,662 @@
 @endsection
 
 @section('js')
-	<script src="{{mix('js/admin/profile/edit.js')}}"></script>
+  @vite('resources/js/admin/profile/loaderProfile.js')
+	@vite('resources/js/admin/profile/edit.js')
 
 <script>
-        const DEFAULT_ACCOUNTS = {
-            connectorSlack: {
-                name: 'Slack',
-                description: 'Send ProcessMaker notifications to Slack',
-                icon: 'slack-color-logo',
-                enabled: false,
-                channel_id: null,
-                enabled_at: null,
-                ui_options: {
-                    show_toggle: true,
-                    show_edit_modal: false
+  window.addEventListener('load', () => {
+    const DEFAULT_ACCOUNTS = {
+        connectorSlack: {
+            name: 'Slack',
+            description: 'Send ProcessMaker notifications to Slack',
+            icon: 'slack-color-logo',
+            enabled: false,
+            channel_id: null,
+            enabled_at: null,
+            ui_options: {
+                show_toggle: true,
+                show_edit_modal: false
+            }
+        }
+    };
+    let formVueInstance = new Vue({
+        el: '#editProfile',
+        mixins:addons,
+        data: {
+            meta: @json(config('users.properties')),
+            formData: @json($currentUser),
+            timezones: @json($timezones),
+            datetimeFormats: @json($datetimeFormats),
+            countries: @json($countries),
+            states: @json($states),
+            status: @json($status),
+            global2FAEnabled: @json($global2FAEnabled),
+            ssoUser:@json($ssoUser),
+            errors: {
+                username: null,
+                firstname: null,
+                lastname: null,
+                email: null,
+                password: null,
+                status: null
+            },
+            confPassword: '',
+            image: '',
+            originalEmail: '',
+            emailHasChanged: false,
+            options: [
+                {
+                    src: @json($currentUser['avatar']),
+                    title: @json($currentUser['fullname']),
+                    initials: "{{mb_substr($currentUser['firstname'],0,1, "utf-8")}}" + "{{mb_substr($currentUser['lastname'],0,1, "utf-8")}}"
                 }
+            ],
+            focusErrors: 'errors',
+            slackConfigurationError: false,
+        },
+        created() {
+          if (this.meta) {
+            let keys = Object.keys(this.meta);
+            if (!this.formData.meta) {
+                this.formData.meta = {};
             }
-        };
-        let formVueInstance = new Vue({
-            el: '#editProfile',
-            mixins:addons,
-            data: {
-                meta: @json(config('users.properties')),
-                formData: @json($currentUser),
-                timezones: @json($timezones),
-                datetimeFormats: @json($datetimeFormats),
-                countries: @json($countries),
-                states: @json($states),
-                status: @json($status),
-                global2FAEnabled: @json($global2FAEnabled),
-                ssoUser:@json($ssoUser),
-                errors: {
+            keys.forEach(key => {
+                if (!this.formData.meta[key]) {
+                    this.formData.meta[key] = null;
+                }
+            });
+          }
+        },
+        mounted() {
+          this.originalEmail = this.formData.email;
+          const togglePassword = document.querySelector('#togglePassword');
+          const password = document.querySelector('#valpassword');
+
+          togglePassword.addEventListener('click', function (e) {
+            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
+            password.setAttribute('type', type);
+            this.classList.toggle('fa-eye-slash');
+          });
+        },
+        methods: {
+            openAvatarModal() {
+              modalVueInstance.$refs.updateAvatarModal.show();
+            },
+            profileUpdate() {
+              if(this.emailHasChanged) {
+                if (this.ssoUser) {
+                  let message = 'Email address for users created via SAML synchronization cannot be edited manually.';
+                  ProcessMaker.alert(this.$t(message), 'warning');
+                  return;
+                } else {
+                  $('#validateModal').modal('show');
+                }
+              } else {
+                this.saveProfileChanges();
+              }
+            },
+            deleteAvatar() {
+                let optionValues = formVueInstance.$data.options[0];
+                optionValues.src = null;
+                formVueInstance.$data.options.splice(0, 1, optionValues)
+                formVueInstance.$data.image = false;
+                formVueInstance.$data.formData.avatar = false;
+                window.ProcessMaker.events.$emit('update-profile-avatar');
+            },
+            resetErrors() {
+                this.errors = Object.assign({}, {
                     username: null,
                     firstname: null,
                     lastname: null,
                     email: null,
                     password: null,
                     status: null
-                },
-				        confPassword: '',
-                image: '',
-                originalEmail: '',
-                emailHasChanged: false,
-                options: [
-                    {
-                        src: @json($currentUser['avatar']),
-                        title: @json($currentUser['fullname']),
-                        initials: "{{mb_substr($currentUser['firstname'],0,1, "utf-8")}}" + "{{mb_substr($currentUser['lastname'],0,1, "utf-8")}}"
-                    }
-                ],
-                focusErrors: 'errors',
-                slackConfigurationError: false,
+                });
             },
-            created() {
-              if (this.meta) {
-                let keys = Object.keys(this.meta);
-                if (!this.formData.meta) {
-                    this.formData.meta = {};
+            validatePassword() {
+                if (!this.formData.password && !this.formData.confPassword) {
+                    delete this.formData.password;
+                    return true;
                 }
-                keys.forEach(key => {
-                   if (!this.formData.meta[key]) {
-                       this.formData.meta[key] = null;
-                   }
-                });
-              }
+                if (this.formData.password.trim() === '' && this.formData.confPassword.trim() === '') {
+                    delete this.formData.password;
+                    return true
+                }
+                if (this.formData.password !== this.formData.confPassword) {
+                    this.errors.password = ['Passwords must match']
+                    this.password = ''
+                    this.submitted = false
+                    return false
+                }
+                return true
             },
-            mounted() {
-              this.originalEmail = this.formData.email;
-              const togglePassword = document.querySelector('#togglePassword');
-              const password = document.querySelector('#valpassword');
-
-              togglePassword.addEventListener('click', function (e) {
-                const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
-                password.setAttribute('type', type);
-                this.classList.toggle('fa-eye-slash');
-              });
+            showAccountsModal() {
+              accountsModalInstance.$refs.editConnectionModal.show();
             },
-            methods: {
-                openAvatarModal() {
-                  modalVueInstance.$refs.updateAvatarModal.show();
-                },
-                profileUpdate() {
-                  if(this.emailHasChanged) {
-                    if (this.ssoUser) {
-                      let message = 'Email address for users created via SAML synchronization cannot be edited manually.';
-                      ProcessMaker.alert(this.$t(message), 'warning');
-                      return;
-                    } else {
-                      $('#validateModal').modal('show');
-                    }
-                  } else {
-                    this.saveProfileChanges();
-                  }
-                },
-                deleteAvatar() {
-                    let optionValues = formVueInstance.$data.options[0];
-                    optionValues.src = null;
-                    formVueInstance.$data.options.splice(0, 1, optionValues)
-                    formVueInstance.$data.image = false;
-                    formVueInstance.$data.formData.avatar = false;
-                    window.ProcessMaker.events.$emit('update-profile-avatar');
-                },
-                resetErrors() {
-                    this.errors = Object.assign({}, {
-                        username: null,
-                        firstname: null,
-                        lastname: null,
-                        email: null,
-                        password: null,
-                        status: null
-                    });
-                },
-                validatePassword() {
-                    if (!this.formData.password && !this.formData.confPassword) {
-                        delete this.formData.password;
-                        return true;
-                    }
-                    if (this.formData.password.trim() === '' && this.formData.confPassword.trim() === '') {
-                        delete this.formData.password;
-                        return true
-                    }
-                    if (this.formData.password !== this.formData.confPassword) {
-                        this.errors.password = ['Passwords must match']
-                        this.password = ''
-                        this.submitted = false
-                        return false
-                    }
-                    return true
-                },
-                showAccountsModal() {
-                  accountsModalInstance.$refs.editConnectionModal.show();
-                },
-                onClose() {
-                  window.location.href = '/admin/users';
-                },
-                showModal() {
-                  $('#validateModal').modal('show');
-                },
-                closeModal() {
-                  $('#validateModal').modal('hide');
-                },
-                saveProfileChanges() {
-                  this.resetErrors();
-                    if (@json($enabled2FA) &&  this.global2FAEnabled.length === 0) {
-                      let message = 'The Two Step Authentication Method has not been set. ' +
-                      'Please contact your administrator.';
-                      // User has not enabled two-factor authentication correctly
-                      ProcessMaker.alert(this.$t($message), 'warning');
+            onClose() {
+              window.location.href = '/admin/users';
+            },
+            showModal() {
+              $('#validateModal').modal('show');
+            },
+            closeModal() {
+              $('#validateModal').modal('hide');
+            },
+            saveProfileChanges() {
+              this.resetErrors();
+                if (@json($enabled2FA) &&  this.global2FAEnabled.length === 0) {
+                  let message = 'The Two Step Authentication Method has not been set. ' +
+                  'Please contact your administrator.';
+                  // User has not enabled two-factor authentication correctly
+                  ProcessMaker.alert(this.$t($message), 'warning');
+                  return false;
+                }
+                if (!this.validatePassword()) return false;
+                if (@json($enabled2FA) && typeof this.formData.preferences_2fa != "undefined" &&
+                    this.formData.preferences_2fa != null && this.formData.preferences_2fa.length < 1)
                       return false;
-                    }
-                    if (!this.validatePassword()) return false;
-                    if (@json($enabled2FA) && typeof this.formData.preferences_2fa != "undefined" &&
-                        this.formData.preferences_2fa != null && this.formData.preferences_2fa.length < 1)
-                          return false;
-                    if (this.image) {
-                        this.formData.avatar = this.image;
-                    }
-                    if (this.image === false) {
-                        this.formData.avatar = false;
-                    }
-                    ProcessMaker.apiClient.put('users/' + this.formData.id, this.formData)
-                        .then((response) => {
-                            // reset the slack configuration error
-                            this.slackConfigurationError = false;
-                            
-                            ProcessMaker.alert(this.$t('Your profile was saved.'), 'success')
-                            window.ProcessMaker.events.$emit('update-profile-avatar');
-                            this.originalEmail = this.formData.email;
-                            this.emailHasChanged = false;
-                            this.formData.valpassword = "";
-                            // Update the data to reflect the updated connected accounts
-                            if (document.querySelector('#nav-accounts-tab').classList.contains('active')) {
-                              window.location.reload();
-                            }
-                        })
-                        .catch(error => {
-                            if (error.response?.data?.errors) {
-                                this.errors = error.response.data.errors;
-                            }
-                            
-                            // Handle Slack notification errors
-                            if (error.response?.data?.message?.includes('Slack')) {
-                                ProcessMaker.alert(this.$t(error.response.data.message), 'danger');
-                                // Mark the configuration error state
-                                this.slackConfigurationError = true;
-                                // Need to ensure the slack toggle is now disabled in the ui
-                                this.handleConnectedAccountToggle(DEFAULT_ACCOUNTS.connectorSlack, false, true);
-                            }
-                        });
-
-                  this.closeModal();
-                },
-                checkEmailChange() {
-                  this.emailHasChanged = this.formData.email !== this.originalEmail;
-                },
-                handleConnectedAccountToggle(account, $event, error) {
-                  try {
-                    // If this is a Slack account and we're trying to enable it, validate first
-                    if (account.name === 'Slack' && $event === true) {
-                      this.validateSlackToken(account, $event);
-                      return;
-                    }
-                    
-                    // If the Slack account is being manually disabled, reset the configuration error flag
-                    if (account.name === 'Slack' && $event === false && this.slackConfigurationError) {
-                      this.slackConfigurationError = false;
-                      this.hideSlackMessages();
-                    }
-                    
-                    let accounts = [];
-                    if (this.formData.connected_accounts) {
-                      accounts = JSON.parse(this.formData.connected_accounts);
-                    }
-                    
-                    const index = accounts.findIndex(acc => acc.name === account.name);
-                    if (index !== -1) {
-                      // Update existing account
-                      accounts[index] = { 
-                        ...accounts[index], 
-                        enabled: $event,
-                        // Update enabled_at when re-enabling
-                        enabled_at: $event ? new Date().toISOString() : accounts[index].enabled_at
-                      };
-                    } else {
-                      // Create new account
-                      const newAccount = {
-                        name: account.name,
-                        description: account.description,
-                        icon: account.icon,
-                        enabled: $event,
-                        enabled_at: new Date().toISOString(),
-                        channel_id: null,
-                        ui_options: {
-                          show_toggle: true,
-                          show_edit_modal: false
-                        }
-                      };
-                      accounts.push(newAccount);
-                    }
-                    
-                    // Ensure the JSON is properly formatted
-                    const jsonString = JSON.stringify(accounts, null, 2);
-                
-                    // Verify the JSON is valid
-                    JSON.parse(jsonString);
-                    
-                    this.formData.connected_accounts = jsonString;
-                    if(!error) {
-                      this.saveProfileChanges();
-                    }
-                  } catch (error) {
-                    console.error('Error handling connected account toggle:', error);
-                    ProcessMaker.alert(this.$t('Error updating connected account'), 'danger');
-                  }
-                },
-                validateSlackToken(account, $event) {
-                  // Show loading state
-                  this.showSlackLoadingMessage();
-                  
-                  // Call the validation endpoint
-                  ProcessMaker.apiClient.post('/api/1.0/connector-slack/validate-token')
+                if (this.image) {
+                    this.formData.avatar = this.image;
+                }
+                if (this.image === false) {
+                    this.formData.avatar = false;
+                }
+                ProcessMaker.apiClient.put('users/' + this.formData.id, this.formData)
                     .then((response) => {
-                      if (response.data.success) {
-                        // Token is valid, proceed with enabling
-                        this.hideSlackMessages();
+                        // reset the slack configuration error
+                        this.slackConfigurationError = false;
                         
-                        this.enableSlackAccount(account, $event);
-                        ProcessMaker.alert(this.$t('Slack configuration validated successfully'), 'success');
-                      } else {
-                        // Token validation failed - check if user is admin based on response
-                        const isAdmin = response.data.isAdmin || false;
-                        this.showSlackErrorMessage(response.data.error || 'Slack configuration validation failed', isAdmin);
-                        // Ensure the toggle stays disabled
-                        account.enabled = false;
-                        this.$forceUpdate();
-                      }
+                        ProcessMaker.alert(this.$t('Your profile was saved.'), 'success')
+                        window.ProcessMaker.events.$emit('update-profile-avatar');
+                        this.originalEmail = this.formData.email;
+                        this.emailHasChanged = false;
+                        this.formData.valpassword = "";
+                        // Update the data to reflect the updated connected accounts
+                        if (document.querySelector('#nav-accounts-tab').classList.contains('active')) {
+                          window.location.reload();
+                        }
                     })
-                    .catch((error) => {
-                      console.error('Error validating Slack token:', error);
-                      let errorMessage = 'Error validating Slack configuration';
-                      let isAdmin = false;
-                      
-                      // Handle both HTTP errors and validation errors
-                      if (error.response?.data?.error) {
-                        errorMessage = error.response.data.error;
-                      } else if (error.response?.data?.message) {
-                        errorMessage = error.response.data.message;
-                      }
-                      
-                      // Check if user is admin based on error response
-                      if (error.response?.data?.isAdmin !== undefined) {
-                        isAdmin = error.response.data.isAdmin;
-                      }
-                      
-                      this.showSlackErrorMessage(errorMessage, isAdmin);
-                      // Ensure the toggle stays disabled and is hidden
-                      account.enabled = false;
-                    });
-                },
-                enableSlackAccount(account, $event) {
-                  try {
-                    let accounts = [];
-                    if (this.formData.connected_accounts) {
-                      accounts = JSON.parse(this.formData.connected_accounts);
-                    }
-                    
-                    const index = accounts.findIndex(acc => acc.name === account.name);
-                    if (index !== -1) {
-                      // Update existing account
-                      accounts[index] = { 
-                        ...accounts[index], 
-                        enabled: $event,
-                        enabled_at: $event ? new Date().toISOString() : accounts[index].enabled_at
-                      };
-                    } else {
-                      // Create new account
-                      const newAccount = {
-                        name: account.name,
-                        description: account.description,
-                        icon: account.icon,
-                        enabled: $event,
-                        enabled_at: new Date().toISOString(),
-                        channel_id: null,
-                        ui_options: {
-                          show_toggle: true,
-                          show_edit_modal: false
+                    .catch(error => {
+                        if (error.response?.data?.errors) {
+                            this.errors = error.response.data.errors;
+                        }
+                        
+                        // Handle Slack notification errors
+                        if (error.response?.data?.message?.includes('Slack')) {
+                            ProcessMaker.alert(this.$t(error.response.data.message), 'danger');
+                            // Mark the configuration error state
+                            this.slackConfigurationError = true;
+                            // Need to ensure the slack toggle is now disabled in the ui
+                            this.handleConnectedAccountToggle(DEFAULT_ACCOUNTS.connectorSlack, false, true);
                         }
-                      };
-                      accounts.push(newAccount);
+                    });
+
+              this.closeModal();
+            },
+            checkEmailChange() {
+              this.emailHasChanged = this.formData.email !== this.originalEmail;
+            },
+            handleConnectedAccountToggle(account, $event, error) {
+              try {
+                // If this is a Slack account and we're trying to enable it, validate first
+                if (account.name === 'Slack' && $event === true) {
+                  this.validateSlackToken(account, $event);
+                  return;
+                }
+                
+                // If the Slack account is being manually disabled, reset the configuration error flag
+                if (account.name === 'Slack' && $event === false && this.slackConfigurationError) {
+                  this.slackConfigurationError = false;
+                  this.hideSlackMessages();
+                }
+                
+                let accounts = [];
+                if (this.formData.connected_accounts) {
+                  accounts = JSON.parse(this.formData.connected_accounts);
+                }
+                
+                const index = accounts.findIndex(acc => acc.name === account.name);
+                if (index !== -1) {
+                  // Update existing account
+                  accounts[index] = { 
+                    ...accounts[index], 
+                    enabled: $event,
+                    // Update enabled_at when re-enabling
+                    enabled_at: $event ? new Date().toISOString() : accounts[index].enabled_at
+                  };
+                } else {
+                  // Create new account
+                  const newAccount = {
+                    name: account.name,
+                    description: account.description,
+                    icon: account.icon,
+                    enabled: $event,
+                    enabled_at: new Date().toISOString(),
+                    channel_id: null,
+                    ui_options: {
+                      show_toggle: true,
+                      show_edit_modal: false
                     }
-                    
-                    // Ensure the JSON is properly formatted
-                    const jsonString = JSON.stringify(accounts, null, 2);
+                  };
+                  accounts.push(newAccount);
+                }
                 
-                    // Verify the JSON is valid
-                    JSON.parse(jsonString);
+                // Ensure the JSON is properly formatted
+                const jsonString = JSON.stringify(accounts, null, 2);
+            
+                // Verify the JSON is valid
+                JSON.parse(jsonString);
+                
+                this.formData.connected_accounts = jsonString;
+                if(!error) {
+                  this.saveProfileChanges();
+                }
+              } catch (error) {
+                console.error('Error handling connected account toggle:', error);
+                ProcessMaker.alert(this.$t('Error updating connected account'), 'danger');
+              }
+            },
+            validateSlackToken(account, $event) {
+              // Show loading state
+              this.showSlackLoadingMessage();
+              
+              // Call the validation endpoint
+              ProcessMaker.apiClient.post('/api/1.0/connector-slack/validate-token')
+                .then((response) => {
+                  if (response.data.success) {
+                    // Token is valid, proceed with enabling
+                    this.hideSlackMessages();
                     
-                    this.formData.connected_accounts = jsonString;
-                    this.saveProfileChanges();
-                  } catch (error) {
-                    console.error('Error enabling Slack account:', error);
-                    ProcessMaker.alert(this.$t('Error updating Slack account'), 'danger');
+                    this.enableSlackAccount(account, $event);
+                    ProcessMaker.alert(this.$t('Slack configuration validated successfully'), 'success');
+                  } else {
+                    // Token validation failed - check if user is admin based on response
+                    const isAdmin = response.data.isAdmin || false;
+                    this.showSlackErrorMessage(response.data.error || 'Slack configuration validation failed', isAdmin);
+                    // Ensure the toggle stays disabled
+                    account.enabled = false;
+                    this.$forceUpdate();
                   }
-                },
-                showSlackLoadingMessage() {
-                  this.hideSlackMessages();
+                })
+                .catch((error) => {
+                  console.error('Error validating Slack token:', error);
+                  let errorMessage = 'Error validating Slack configuration';
+                  let isAdmin = false;
                   
-                  const loadingCard = document.createElement('div');
-                  loadingCard.id = 'slack-loading-card';
-                  loadingCard.className = 'alert alert-info mt-3';
-                  loadingCard.innerHTML = `
-                    <div class="d-flex align-items-center">
-                      <i class="fas fa-spinner fa-spin mr-2"></i>
-                      <span>${this.$t('Validating Slack configuration...')}</span>
-                    </div>
-                  `;
-                  
-                  this.insertSlackMessage(loadingCard);
-                },
-                
-                showSlackErrorMessage(message, isAdmin = false) {
-                  this.hideSlackMessages();
-                  
-                  // Mark the configuration error state
-                  this.slackConfigurationError = true;
-                  
-                  const cardContent = isAdmin ? this.getAdminCardContent() : this.getUserCardContent();
-                  const errorCard = this.createErrorCard(cardContent);
-                  
-                  this.insertSlackMessage(errorCard);
-                },
-                
-                // Alternative method
-                showSlackErrorMessageSimple(message, isAdmin = false) {
-                  this.hideSlackMessages();
+                  // Handle both HTTP errors and validation errors
+                  if (error.response?.data?.error) {
+                    errorMessage = error.response.data.error;
+                  } else if (error.response?.data?.message) {
+                    errorMessage = error.response.data.message;
+                  }
                   
-                  const cardContent = isAdmin ? this.getAdminCardContent() : this.getUserCardContent();
-                  const errorCard = this.createErrorCard(cardContent);
+                  // Check if user is admin based on error response
+                  if (error.response?.data?.isAdmin !== undefined) {
+                    isAdmin = error.response.data.isAdmin;
+                  }
                   
-                  this.insertSlackMessage(errorCard);
-                },
+                  this.showSlackErrorMessage(errorMessage, isAdmin);
+                  // Ensure the toggle stays disabled and is hidden
+                  account.enabled = false;
+                });
+            },
+            enableSlackAccount(account, $event) {
+              try {
+                let accounts = [];
+                if (this.formData.connected_accounts) {
+                  accounts = JSON.parse(this.formData.connected_accounts);
+                }
                 
-                getAdminCardContent() {
-                  const envVariables = [
-                    'SLACK_BOT_OAUTH_ACCESS_TOKEN',
-                    'SLACK_OAUTH_ACCESS_TOKEN'
-                  ];
-                  
-                  const envVariablesHTML = envVariables.map(variable => `
-                    <div class="env-variable-box">
-                      <code class="env-variable-name">${variable}</code>
-                      <button class="copy-btn" onclick="this.copyToClipboard('${variable}')" title="${this.$t('Copy to clipboard')}">
-                        <i class="fas fa-copy"></i>
-                      </button>
-                    </div>
-                  `).join('');
-                  
-                  return `
-                    <p class="card-text mb-3">${this.$t('To enable notifications you need to add the appropriate API keys. Please follow these steps to configure it:')}</p>
-                    <ol class="steps-list mb-0">
-                      <li class="mb-2">${this.$t('Go to the')} <strong>${this.$t('Designer')}</strong> ${this.$t('tab and open the')} 
-                        <a href="/designer/environment-variables" target="_blank" class="env-link">
-                          ${this.$t('Environment Variables')} <i class="fas fa-external-link-alt"></i>
-                        </a> ${this.$t('section.')}
-                      </li>
-                      <li class="mb-2">${this.$t('Create the following environment variables with your Slack information:')}</li>
-                      <li class="mb-2">
-                        <div class="env-variables-container">
-                          ${envVariablesHTML}
-                        </div>
-                      </li>
-                      <li class="mb-0">${this.$t('After doing it once it will be available for all your users to enable.')}</li>
-                    </ol>
-                  `;
-                },
+                const index = accounts.findIndex(acc => acc.name === account.name);
+                if (index !== -1) {
+                  // Update existing account
+                  accounts[index] = { 
+                    ...accounts[index], 
+                    enabled: $event,
+                    enabled_at: $event ? new Date().toISOString() : accounts[index].enabled_at
+                  };
+                } else {
+                  // Create new account
+                  const newAccount = {
+                    name: account.name,
+                    description: account.description,
+                    icon: account.icon,
+                    enabled: $event,
+                    enabled_at: new Date().toISOString(),
+                    channel_id: null,
+                    ui_options: {
+                      show_toggle: true,
+                      show_edit_modal: false
+                    }
+                  };
+                  accounts.push(newAccount);
+                }
                 
-                getUserCardContent() {
-                  return `
-                    <p class="card-text mb-0">${this.$t('Once a PM Admin configures the integration, you will be able to enable this option to receive your PM notifications in Slack.')}</p>
-                  `;
-                },
+                // Ensure the JSON is properly formatted
+                const jsonString = JSON.stringify(accounts, null, 2);
+            
+                // Verify the JSON is valid
+                JSON.parse(jsonString);
                 
-                createErrorCard(content) {
-                  const errorCard = document.createElement('div');
-                  errorCard.id = 'slack-error-card';
-                  errorCard.className = 'slack-config-card mt-3';
-                  errorCard.innerHTML = `
-                    <div class="d-flex align-items-start">
-                      <div class="warning-icon mr-3">
-                        <span class="exclamation-mark">!</span>
-                      </div>
-                      <div class="flex-grow-1">
-                        <h6 class="card-title mb-2">${this.$t('Slack API Keys required')}</h6>
-                        ${content}
-                      </div>
+                this.formData.connected_accounts = jsonString;
+                this.saveProfileChanges();
+              } catch (error) {
+                console.error('Error enabling Slack account:', error);
+                ProcessMaker.alert(this.$t('Error updating Slack account'), 'danger');
+              }
+            },
+            showSlackLoadingMessage() {
+              this.hideSlackMessages();
+              
+              const loadingCard = document.createElement('div');
+              loadingCard.id = 'slack-loading-card';
+              loadingCard.className = 'alert alert-info mt-3';
+              loadingCard.innerHTML = `
+                <div class="d-flex align-items-center">
+                  <i class="fas fa-spinner fa-spin mr-2"></i>
+                  <span>${this.$t('Validating Slack configuration...')}</span>
+                </div>
+              `;
+              
+              this.insertSlackMessage(loadingCard);
+            },
+            
+            showSlackErrorMessage(message, isAdmin = false) {
+              this.hideSlackMessages();
+              
+              // Mark the configuration error state
+              this.slackConfigurationError = true;
+              
+              const cardContent = isAdmin ? this.getAdminCardContent() : this.getUserCardContent();
+              const errorCard = this.createErrorCard(cardContent);
+              
+              this.insertSlackMessage(errorCard);
+            },
+            
+            // Alternative method
+            showSlackErrorMessageSimple(message, isAdmin = false) {
+              this.hideSlackMessages();
+              
+              const cardContent = isAdmin ? this.getAdminCardContent() : this.getUserCardContent();
+              const errorCard = this.createErrorCard(cardContent);
+              
+              this.insertSlackMessage(errorCard);
+            },
+            
+            getAdminCardContent() {
+              const envVariables = [
+                'SLACK_BOT_OAUTH_ACCESS_TOKEN',
+                'SLACK_OAUTH_ACCESS_TOKEN'
+              ];
+              
+              const envVariablesHTML = envVariables.map(variable => `
+                <div class="env-variable-box">
+                  <code class="env-variable-name">${variable}</code>
+                  <button class="copy-btn" onclick="this.copyToClipboard('${variable}')" title="${this.$t('Copy to clipboard')}">
+                    <i class="fas fa-copy"></i>
+                  </button>
+                </div>
+              `).join('');
+              
+              return `
+                <p class="card-text mb-3">${this.$t('To enable notifications you need to add the appropriate API keys. Please follow these steps to configure it:')}</p>
+                <ol class="steps-list mb-0">
+                  <li class="mb-2">${this.$t('Go to the')} <strong>${this.$t('Designer')}</strong> ${this.$t('tab and open the')} 
+                    <a href="/designer/environment-variables" target="_blank" class="env-link">
+                      ${this.$t('Environment Variables')} <i class="fas fa-external-link-alt"></i>
+                    </a> ${this.$t('section.')}
+                  </li>
+                  <li class="mb-2">${this.$t('Create the following environment variables with your Slack information:')}</li>
+                  <li class="mb-2">
+                    <div class="env-variables-container">
+                      ${envVariablesHTML}
                     </div>
-                  `;
-                  
-                  // Add copy method to global context
-                  window.copyToClipboard = (text) => {
-                    navigator.clipboard.writeText(text).then(() => {
-                      // Feedback visual
-                      const btn = event.target.closest('.copy-btn');
-                      const icon = btn.querySelector('i');
-                      const originalClass = icon.className;
-                      
-                      icon.className = 'fas fa-check text-success';
-                      setTimeout(() => {
-                        icon.className = originalClass;
-                      }, 1000);
-                    });
-                  };
-                  
-                  return errorCard;
-                },
-                hideSlackMessages() {
-                  const existingLoading = document.getElementById('slack-loading-card');
-                  const existingError = document.getElementById('slack-error-card');
-                  
-                  if (existingLoading) {
-                    existingLoading.remove();
-                  }
-                  if (existingError) {
-                    existingError.remove();
-                  }
-                },
-                insertSlackMessage(messageElement) {
-                  // Find the Slack account item in the accounts list
-                  const accountsList = document.querySelector('.accounts-list');
-                  if (!accountsList) {
-                    // Fallback: append to the connected accounts container
-                    const container = document.querySelector('#nav-accounts');
-                    if (container) {
-                      container.appendChild(messageElement);
-                    }
-                    return;
-                  }
-                  
-                  // Find the Slack account item
-                  const slackItem = Array.from(accountsList.children).find(item => {
-                    const accountName = item.querySelector('.account-name');
-                    return accountName && accountName.textContent.trim() === 'Slack';
-                  });
+                  </li>
+                  <li class="mb-0">${this.$t('After doing it once it will be available for all your users to enable.')}</li>
+                </ol>
+              `;
+            },
+            
+            getUserCardContent() {
+              return `
+                <p class="card-text mb-0">${this.$t('Once a PM Admin configures the integration, you will be able to enable this option to receive your PM notifications in Slack.')}</p>
+              `;
+            },
+            
+            createErrorCard(content) {
+              const errorCard = document.createElement('div');
+              errorCard.id = 'slack-error-card';
+              errorCard.className = 'slack-config-card mt-3';
+              errorCard.innerHTML = `
+                <div class="d-flex align-items-start">
+                  <div class="warning-icon mr-3">
+                    <span class="exclamation-mark">!</span>
+                  </div>
+                  <div class="flex-grow-1">
+                    <h6 class="card-title mb-2">${this.$t('Slack API Keys required')}</h6>
+                    ${content}
+                  </div>
+                </div>
+              `;
+              
+              // Add copy method to global context
+              window.copyToClipboard = (text) => {
+                navigator.clipboard.writeText(text).then(() => {
+                  // Feedback visual
+                  const btn = event.target.closest('.copy-btn');
+                  const icon = btn.querySelector('i');
+                  const originalClass = icon.className;
                   
-                  if (slackItem) {
-                    // Insert the message after the Slack item
-                    slackItem.parentNode.insertBefore(messageElement, slackItem.nextSibling);
-                  } else {
-                    // Fallback: append to the accounts list
-                    accountsList.appendChild(messageElement);
-                  }
-                },
-                formatIcon(icon) {
-                  return `/img/connected-account-images/${icon}.svg`;
+                  icon.className = 'fas fa-check text-success';
+                  setTimeout(() => {
+                    icon.className = originalClass;
+                  }, 1000);
+                });
+              };
+              
+              return errorCard;
+            },
+            hideSlackMessages() {
+              const existingLoading = document.getElementById('slack-loading-card');
+              const existingError = document.getElementById('slack-error-card');
+              
+              if (existingLoading) {
+                existingLoading.remove();
+              }
+              if (existingError) {
+                existingError.remove();
+              }
+            },
+            insertSlackMessage(messageElement) {
+              // Find the Slack account item in the accounts list
+              const accountsList = document.querySelector('.accounts-list');
+              if (!accountsList) {
+                // Fallback: append to the connected accounts container
+                const container = document.querySelector('#nav-accounts');
+                if (container) {
+                  container.appendChild(messageElement);
                 }
+                return;
+              }
+              
+              // Find the Slack account item
+              const slackItem = Array.from(accountsList.children).find(item => {
+                const accountName = item.querySelector('.account-name');
+                return accountName && accountName.textContent.trim() === 'Slack';
+              });
+              
+              if (slackItem) {
+                // Insert the message after the Slack item
+                slackItem.parentNode.insertBefore(messageElement, slackItem.nextSibling);
+              } else {
+                // Fallback: append to the accounts list
+                accountsList.appendChild(messageElement);
+              }
             },
-            computed: {
-                state2FA() {
-                    return typeof this.formData.preferences_2fa != "undefined" &&
-                        this.formData.preferences_2fa != null && this.formData.preferences_2fa.length > 0;
-                },
-                disableRecommendations: {
-                  get() {
-                    return this.formData?.meta?.disableRecommendations ?? false;
-                  },
-                  set(value) {
-                    if (value === true) {
-                      if (!this.formData.meta) {
-                        this.$set(this.formData, 'meta', {});
-                      }
-                      this.$set(this.formData.meta, 'disableRecommendations', true);
-                    } else {
-                      this.$delete(this.formData.meta, 'disableRecommendations');
-                    }
-                  }
-                },
-                accounts() {
-                  let accounts = this.formData.connected_accounts
-                    ? JSON.parse(this.formData.connected_accounts) 
-                    : [];
-
-                  if (window.ProcessMaker.packages.includes('connector-slack')) {
-                    if (!accounts.some(account => account.name === 'Slack')) {
-                      accounts.push(DEFAULT_ACCOUNTS.connectorSlack);
-                    }
-                  }
-
-                  // Apply configuration error state from the reactive property
-                  if (this.slackConfigurationError) {
-                    const slackAccount = accounts.find(account => account.name === 'Slack');
-                    if (slackAccount) {
-                      slackAccount.hasConfigurationError = true;
-                    }
+            formatIcon(icon) {
+              return `/img/connected-account-images/${icon}.svg`;
+            }
+        },
+        computed: {
+            state2FA() {
+                return typeof this.formData.preferences_2fa != "undefined" &&
+                    this.formData.preferences_2fa != null && this.formData.preferences_2fa.length > 0;
+            },
+            disableRecommendations: {
+              get() {
+                return this.formData?.meta?.disableRecommendations ?? false;
+              },
+              set(value) {
+                if (value === true) {
+                  if (!this.formData.meta) {
+                    this.$set(this.formData, 'meta', {});
                   }
-
-                  return accounts;
+                  this.$set(this.formData.meta, 'disableRecommendations', true);
+                } else {
+                  this.$delete(this.formData.meta, 'disableRecommendations');
                 }
-            }
-        });
-    </script>
-
-    <script>
-        let modalVueInstance = new Vue({
-            el: '#updateAvatarModal',
-            data() {
-                return {
-                    avatar: formVueInstance.$data.formData.avatar,
-                    image: "",
-                    idxx: window.ProcessMaker.user.id
-                };
+              }
             },
-            methods: {
-                // Called when the croppie instance is completed
-                cropResult() {
-                },
-                saveAvatar() {
-                    // We will close our modal, but we will ALSO emit a message stating the image has been updated
-                    // The parent component will listen for that message and update it's data to reflect the new image
-                    this.$refs.croppie.result({}, (selectedImage) => {
-                        // Update the profile's avatar image with the selected one
-                        let optionValues = formVueInstance.$data.options[0];
-                        optionValues.src = selectedImage;
-                        formVueInstance.$data.options.splice(0, 1, optionValues)
-                        formVueInstance.$data.formData.avatar = selectedImage;
-                        formVueInstance.$data.image = selectedImage;
-
-                        // And finally close the modal
-                        this.hideModal();
-                    })
-                },
-                browse() {
-                    this.$refs.customFile.click();
-                },
-                hideModal() {
-                    this.$refs.updateAvatarModal.hide();
-                },
-                hiddenModal() {
-                    this.image = '';
-                },
-                onFileChange(e) {
-                    let files = e.target.files || e.dataTransfer.files;
-                    if (!files.length) return;
-                    this.createImage(files[0]);
-                },
-                createImage(file) {
-                    let reader = new FileReader();
-
-                    // Assigning the load listener to store the contents of the file to our image property
-                    reader.onload = e => {
-                        // Show we now have an image in our modal to use
-                        this.image = true;
-                        this.$refs.croppie.bind({
-                            url: e.target.result
-                        });
-                    };
-                    // Now actually read it, calling the onload after it's read
-                    reader.readAsDataURL(file);
+            accounts() {
+              let accounts = this.formData.connected_accounts
+                ? JSON.parse(this.formData.connected_accounts) 
+                : [];
+
+              if (window.ProcessMaker.packages.includes('connector-slack')) {
+                if (!accounts.some(account => account.name === 'Slack')) {
+                  accounts.push(DEFAULT_ACCOUNTS.connectorSlack);
+                }
+              }
+
+              // Apply configuration error state from the reactive property
+              if (this.slackConfigurationError) {
+                const slackAccount = accounts.find(account => account.name === 'Slack');
+                if (slackAccount) {
+                  slackAccount.hasConfigurationError = true;
                 }
+              }
+
+              return accounts;
             }
-        });
-    </script>
+        }
+    });
+
 
-    <script>
-      var accountsModalInstance = new Vue({
-        el: '#editConnectionModal',
+    let modalVueInstance = new Vue({
+        el: '#updateAvatarModal',
         data() {
-          return {
-            customModalButtons: [
-              {"content": "Cancel", "action": "close", "variant": "secondary", "size": "md"},
-              {"content": "OK", "action": "onSubmit", "variant": "primary", "size": "md"},
-            ],
-            formData: {},
-            errors: {
-              'url': null,
-              'user': null,
-              'accessKey': null
-            },
-            disabled: false
-          }
+            return {
+                avatar: formVueInstance.$data.formData.avatar,
+                image: "",
+                idxx: window.ProcessMaker.user.id
+            };
         },
         methods: {
-          hideModal() {
-            accountsModalInstance.$refs.editConnectionModal.hide();
-          },
-          onCloseModal() {
-            this.hideModal();
-            this.resetFormData();
-            this.resetModalErrors();
-          },
-          resetFormData() {
-            this.formData = Object.assign({}, {
-              url: null,
-              user: null,
-              accessKey: null
-            });
-          },
-          resetModalErrors() {
-            this.errors = Object.assign({}, {
-              url: null,
-              user: null,
-              accessKey: null
-            });
-          },
-          onSubmit() {
-            this.resetModalErrors();
-            //single click
-            if (this.disabled) {
-              return
-            }
-            this.disabled = true;
+            // Called when the croppie instance is completed
+            cropResult() {
+            },
+            saveAvatar() {
+                // We will close our modal, but we will ALSO emit a message stating the image has been updated
+                // The parent component will listen for that message and update it's data to reflect the new image
+                this.$refs.croppie.result({}, (selectedImage) => {
+                    // Update the profile's avatar image with the selected one
+                    let optionValues = formVueInstance.$data.options[0];
+                    optionValues.src = selectedImage;
+                    formVueInstance.$data.options.splice(0, 1, optionValues)
+                    formVueInstance.$data.formData.avatar = selectedImage;
+                    formVueInstance.$data.image = selectedImage;
 
-            //TODO: HANDLE CONNECTION UPDATE
-            this.onCloseModal;
+                    // And finally close the modal
+                    this.hideModal();
+                })
+            },
+            browse() {
+                this.$refs.customFile.click();
+            },
+            hideModal() {
+                this.$refs.updateAvatarModal.hide();
+            },
+            hiddenModal() {
+                this.image = '';
+            },
+            onFileChange(e) {
+                let files = e.target.files || e.dataTransfer.files;
+                if (!files.length) return;
+                this.createImage(files[0]);
+            },
+            createImage(file) {
+                let reader = new FileReader();
+
+                // Assigning the load listener to store the contents of the file to our image property
+                reader.onload = e => {
+                    // Show we now have an image in our modal to use
+                    this.image = true;
+                    this.$refs.croppie.bind({
+                        url: e.target.result
+                    });
+                };
+                // Now actually read it, calling the onload after it's read
+                reader.readAsDataURL(file);
+            }
+        }
+    });
+
+    var accountsModalInstance = new Vue({
+      el: '#editConnectionModal',
+      data() {
+        return {
+          customModalButtons: [
+            {"content": "Cancel", "action": "close", "variant": "secondary", "size": "md"},
+            {"content": "OK", "action": "onSubmit", "variant": "primary", "size": "md"},
+          ],
+          formData: {},
+          errors: {
+            'url': null,
+            'user': null,
+            'accessKey': null
           },
+          disabled: false
         }
-      });
-    </script>
+      },
+      methods: {
+        hideModal() {
+          accountsModalInstance.$refs.editConnectionModal.hide();
+        },
+        onCloseModal() {
+          this.hideModal();
+          this.resetFormData();
+          this.resetModalErrors();
+        },
+        resetFormData() {
+          this.formData = Object.assign({}, {
+            url: null,
+            user: null,
+            accessKey: null
+          });
+        },
+        resetModalErrors() {
+          this.errors = Object.assign({}, {
+            url: null,
+            user: null,
+            accessKey: null
+          });
+        },
+        onSubmit() {
+          this.resetModalErrors();
+          //single click
+          if (this.disabled) {
+            return
+          }
+          this.disabled = true;
+
+          //TODO: HANDLE CONNECTION UPDATE
+          this.onCloseModal;
+        },
+      }
+    });
+  });
+</script>
 
 <style>
   /* Slack Configuration Card Styles */
diff --git a/resources/views/profile/show.blade.php b/resources/views/profile/show.blade.php
index a25d4b8201..3f2b5a5ad8 100644
--- a/resources/views/profile/show.blade.php
+++ b/resources/views/profile/show.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
 {{__('Profile')}}
@@ -86,7 +86,9 @@
 @endsection
 
 @section('js')
+  @vite('resources/js/admin/profile/loaderProfile.js')
 <script>
+window.addEventListener('load', () => {
     new Vue({
         el: '#profileForm',
         data: {
@@ -103,5 +105,6 @@
             }
         }
     });
+});
 </script>
 @endsection
diff --git a/resources/views/requests/index.blade.php b/resources/views/requests/index.blade.php
index ba6b73d3ad..1d96c40d40 100644
--- a/resources/views/requests/index.blade.php
+++ b/resources/views/requests/index.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
 {{__($title)}}
@@ -122,14 +122,16 @@ class="ml-md-2"
 @endsection
 
 @section('js')
+
 <script>
     //Data needed for default search
-    window.Processmaker.user = @json($currentUser);
-    window.Processmaker.status = '{{ $type }}';
-    window.ProcessMaker.advanced_filter = @json($userFilter);
-    window.Processmaker.defaultColumns = @json($defaultColumns);
+    window.temporal.user = @json($currentUser);
+    window.temporal.status = '{{ $type }}';
+    window.temporal.advanced_filter = @json($userFilter);
+    window.temporal.defaultColumns = @json($defaultColumns);
 </script>
-<script src="{{mix('js/requests/index.js')}}"></script>
+@vite('resources/js/requests/loaderRequests.js')
+@vite('resources/js/requests/index.js')
 @endsection
 
 @section('css')
diff --git a/resources/views/tasks/edit.blade.php b/resources/views/tasks/edit.blade.php
index 8bd7af00fd..aafe850a06 100644
--- a/resources/views/tasks/edit.blade.php
+++ b/resources/views/tasks/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layoutnext')
+@extends('layouts.layoutnextvite')
 
 @section('meta')
   <meta name="request-id" content="{{ $task->processRequest->id }}">
@@ -406,16 +406,39 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
 @endsection
 @section('js')
 @include('shared.monaco')
-<script src="{{ mix('js/manifest.js') }}"></script>
-<script src="{{ mix('js/vue-vendor.js') }}"></script>
-<script src="{{ mix('js/bootstrap-vendor.js') }}"></script>
-<script src="{{ mix('js/fortawesome-vendor.js') }}"></script>
 <script >
   window.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
   const screenBuilderScripts = @json($manager->getScripts());
+  window.temporal.tceEnableCaseNumberScreen = @json($tceEnableCaseNumberScreen);
+  window.temporal.userConfiguration = @json($userConfiguration);
+  window.temporal.taskDraftsEnabled = @json($taskDraftsEnabled);
 </script>
-<script src="{{ mix('js/tasks/loaderEdit.js')}}"></script>
+@vite('resources/js/tasks/loaderEdit.js')
   <script>
+  window.PM4ConfigOverrides = {
+    requestFiles: @json($files),
+    getScreenEndpoint: 'tasks/{{ $task->id }}/screens',
+    postScriptEndpoint: '/scripts/execute/{id}?task_id={{ $task->id }}',
+  };
+
+  window.sessionStorage.setItem(
+    'elementDestinationURL',
+    '{{ route('requests.show', ['request' => $task->process_request_id]) }}'
+  );
+
+  const task = @json($task);
+  let draftTask = task.draft;
+  const userHasAccessToTask = {{ Auth::user()->can('update', $task) ? "true": "false" }};
+  const userIsAdmin = {{ Auth::user()->is_administrator ? "true": "false" }};
+  const userIsProcessManager = {{ in_array(Auth::user()->id, $task->process?->manager_id ?? []) ? "true": "false" }};
+  const caseNumber = @json($caseNumber);
+
+
+  let screenFields = @json($screenFields);
+  window.Processmaker.user = @json($currentUser);
+
+
+  window.addEventListener('load', () => {
     window.ProcessMaker.EventBus.$on("screen-renderer-init", (screen) => {
       if (screen.watchers_config) {
         screen.watchers_config.api.execute = @json(route('api.scripts.execute', ['script_id' => 'script_id', 'script_key' => 'script_key']));
@@ -424,40 +447,17 @@ class="mr-2 custom-badges pl-2 pr-2 rounded-lg">
         console.warn('Screen builder version does not have watchers');
       }
     });
-
-    window.PM4ConfigOverrides = {
-      requestFiles: @json($files),
-      getScreenEndpoint: 'tasks/{{ $task->id }}/screens',
-      postScriptEndpoint: '/scripts/execute/{id}?task_id={{ $task->id }}',
-    };
-
-    window.sessionStorage.setItem(
-      'elementDestinationURL',
-      '{{ route('requests.show', ['request' => $task->process_request_id]) }}'
-    );
-
-    const task = @json($task);
-    let draftTask = task.draft;
-    const userHasAccessToTask = {{ Auth::user()->can('update', $task) ? "true": "false" }};
-    const userIsAdmin = {{ Auth::user()->is_administrator ? "true": "false" }};
-    const userIsProcessManager = {{ in_array(Auth::user()->id, $task->process?->manager_id ?? []) ? "true": "false" }};
-    const caseNumber = @json($caseNumber);
-    window.ProcessMaker.tceEnableCaseNumberScreen = @json($tceEnableCaseNumberScreen);
-    const userConfiguration = @json($userConfiguration);
-    let screenFields = @json($screenFields);
-    window.Processmaker.user = @json($currentUser);
-    window.ProcessMaker.taskDraftsEnabled = @json($taskDraftsEnabled);
+  });
   </script>
 
   @foreach(GlobalScripts::getScripts() as $script)
-    <script src="{{$script}}"></script>
+    <script defer src="{{$script}}"></script>
   @endforeach
 
-  <script src="{{mix('js/tasks/edit.js')}}"></script>
+  @vite('resources/js/tasks/edit.js')
 @endsection
 
 @section('css')
-<link href="{{ mix('css/collapseDetails.css') }}" rel="stylesheet">
 <style>
   .menu-tab-content {
     margin-left: -16px;
diff --git a/resources/views/tasks/editQuickFill.blade.php b/resources/views/tasks/editQuickFill.blade.php
index 78596e7b61..95af530f0b 100644
--- a/resources/views/tasks/editQuickFill.blade.php
+++ b/resources/views/tasks/editQuickFill.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('meta')
     <meta name="request-id" content="{{ $task->processRequest->id }}">
@@ -41,12 +41,17 @@ class="quick-fill-preview"
 </div>
 @endsection
 @section('js')
-<script src="{{mix('js/tasks/show.js')}}"></script>
+@vite(['resources/js/tasks/loaderTasks.js'])
+@vite(['resources/js/tasks/show.js'])
 <script>
+window.addEventListener('load', () => {
     let task = @json($task);
     task.draft = @json($task->draft);
     task.data = @json($task->processRequest->data);
     const screenFields = @json($screenFields);
+
+    const Vue = window.Vue;
+    const Vuex = window.Vuex;
     const store = new Vuex.Store();
     const main = new Vue({
       store: store,
@@ -134,6 +139,7 @@ class="quick-fill-preview"
       mounted () {
       },
     });
+});
 </script>
 @endsection
 
diff --git a/resources/views/templates/assets.blade.php b/resources/views/templates/assets.blade.php
index 732e42036c..08bfa34577 100644
--- a/resources/views/templates/assets.blade.php
+++ b/resources/views/templates/assets.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
   {{ __('Template Assets') }}
@@ -30,5 +30,6 @@
 @endsection
 
 @section('js')
-  <script src="{{ mix('js/templates/assets.js') }}"></script>
+  @vite('resources/js/templates/loaderTemplates.js')  
+  @vite('resources/js/templates/assets.js')
 @endsection
diff --git a/resources/views/templates/configure.blade.php b/resources/views/templates/configure.blade.php
index 6b3206c6ed..067d7bcedc 100644
--- a/resources/views/templates/configure.blade.php
+++ b/resources/views/templates/configure.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout', ['title' => __('Processes Management')])
+@extends('layouts.layoutnextvite', ['title' => __('Processes Management')])
 
 @section('title')
     {{__('Configure Template')}}
@@ -79,13 +79,15 @@
 
 @section('js')
     <script>
-        window.ProcessMaker.templateConfigurations = {
+        window.temporal.templateConfigurations = {
             data: @json($template),
             templateType: @json($type),
             screenTypes: @json($screenTypes),
         }
     </script>
-    <script src="{{mix('js/templates/configure.js')}}"></script>
+    @vite('resources/js/templates/loaderTemplates.js')  
+
+    @vite('resources/js/templates/configure.js')
 @endsection
 
 @section('css')
diff --git a/resources/views/templates/export-screen.blade.php b/resources/views/templates/export-screen.blade.php
index 0b7417e648..bb272be68a 100644
--- a/resources/views/templates/export-screen.blade.php
+++ b/resources/views/templates/export-screen.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Export Screen Template')}}
@@ -45,7 +45,9 @@
 @endsection
 
 @section('js')
+    @vite('resources/js/templates/loaderTemplates.js')  
     <script>
+    window.addEventListener('load', () => {    
       new Vue({
         el: '#exportScreen',
         data: {
@@ -81,5 +83,6 @@
           }
         }
       })
+    });
     </script>
 @endsection
diff --git a/resources/views/templates/import-screen.blade.php b/resources/views/templates/import-screen.blade.php
index e4d7d449dd..66e13a2eb0 100644
--- a/resources/views/templates/import-screen.blade.php
+++ b/resources/views/templates/import-screen.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Import Screen Template')}}
@@ -90,7 +90,9 @@ class="btn btn-secondary ml-2"
 @endsection
 
 @section('js')
+    @vite('resources/js/templates/loaderTemplates.js')  
     <script>
+     window.addEventListener('load', () => {    
       new Vue({
         el: '#importScreen',
         data: {
@@ -149,5 +151,6 @@ class="btn btn-secondary ml-2"
           },
         }
       })
+    });
     </script>
 @endsection
\ No newline at end of file
diff --git a/resources/views/templates/import.blade.php b/resources/views/templates/import.blade.php
index a0c8698ff8..8af8006de7 100644
--- a/resources/views/templates/import.blade.php
+++ b/resources/views/templates/import.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
     {{__('Import Template')}}
@@ -27,5 +27,6 @@
 @endsection
 
 @section('js')
-  <script src="{{ mix('js/templates/import/index.js') }}"></script>
+  @vite('resources/js/templates/loaderTemplates.js')  
+  @vite('resources/js/templates/import/index.js')
 @endsection
diff --git a/resources/views/templates/list.blade.php b/resources/views/templates/list.blade.php
index 02b79352bb..b5f0d22b6a 100644
--- a/resources/views/templates/list.blade.php
+++ b/resources/views/templates/list.blade.php
@@ -55,7 +55,7 @@ class="btn btn-outline-secondary w-100"
 </div>
 
 @section('js')
-    <script src="{{mix('js/templates/index.js')}}"></script>
+  @vite(['resources/js/templates/index.js'])
 @append
 @section('css')
 <style>
diff --git a/resources/views/test/status.blade.php b/resources/views/test/status.blade.php
index 9a9dbafa79..259339106c 100644
--- a/resources/views/test/status.blade.php
+++ b/resources/views/test/status.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layoutnextvite')
 
 @section('title')
 test status
@@ -19,7 +19,9 @@
 @endsection
 
 @section('js')
+  @vite('resources/js/templates/loaderTemplates.js')  
 <script>
+window.addEventListener('load', () => {    
   new Vue({
     'el': '#app',
     data() {
@@ -48,5 +50,6 @@
       },
     },
   })
+});
 </script>
 @endsection
\ No newline at end of file
diff --git a/vite.config.js b/vite.config.js
index 119f8091d5..2da3c49838 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,12 +1,66 @@
-import { defineConfig, loadEnv } from 'vite';
-import laravel from 'laravel-vite-plugin';
-import vue from '@vitejs/plugin-vue2';
-import path from 'path';
-import { pathToFileURL } from 'url';
-import yaml from '@rollup/plugin-yaml';
+import { defineConfig, loadEnv } from "vite";
+import laravel from "laravel-vite-plugin";
+import vue from "@vitejs/plugin-vue2";
+import path from "path";
+import { pathToFileURL } from "url";
+import yaml from "@rollup/plugin-yaml";
+import { viteStaticCopy } from "vite-plugin-static-copy";
 
-const stylesPath = path.resolve(__dirname, 'resources/sass');
-const nm = (...segments) => path.resolve(__dirname, 'node_modules', ...segments);
+const stylesPath = path.resolve(__dirname, "resources/sass");
+const nm = (...segments) => path.resolve(__dirname, "node_modules", ...segments);
+
+// Monaco Editor static-copy targets (mirrors webpack.mix.js lines 119-138)
+// dest is relative to outDir (public/build), so '../vendor/...' resolves to public/vendor/...
+const monacoSrc = "node_modules/monaco-editor/min/vs";
+const monacoDest = "../vendor/monaco-editor/min/vs";
+const monacoFiles = [
+  "loader.js",
+  "editor/editor.main.js",
+  "editor/editor.main.css",
+  "editor/editor.main.nls.js",
+  "base/browser/ui/codicons/codicon/codicon.ttf",
+  "base/worker/workerMain.js",
+  "base/common/worker/simpleWorker.nls.js",
+];
+const monacoLanguages = ["php", "css", "lua", "javascript", "csharp", "java", "python", "r", "html", "xml", "typescript", "sql"];
+const monacoTargets = [
+  ...monacoFiles.map((file) => ({
+    src: `${monacoSrc}/${file}`,
+    dest: path.join(monacoDest, path.dirname(file)).replace(/\\/g, "/"),
+  })),
+  ...monacoLanguages.map((lang) => ({
+    src: `${monacoSrc}/basic-languages/${lang}/${lang}.js`,
+    dest: `${monacoDest}/basic-languages/${lang}`,
+  })),
+  // mirrors mix.copyDirectory(`${monacoSource}language`, `${monacoDestination}language`)
+  { src: `${monacoSrc}/language`, dest: monacoDest },
+];
+
+/**
+ * @processmaker/modeler (Vue CLI lib) resolves SVG icons as:
+ *   __webpack_require__.p + "img/start-event....svg"
+ * Mix loads modeler-vendor from /js/, so setPublicPath sets p="/js/" and icons
+ * hit public/js/img (copied in webpack.mix.js). Vite ESM has no script URL, so p
+ * stays "" and relative img/... resolves against the page (/cases/img/...).
+ * Rewrite to absolute /js/img/ paths Mix already publishes.
+ */
+const modelerPublicPathPlugin = {
+  name: "processmaker-modeler-public-path",
+  enforce: "pre",
+  transform(code, id) {
+    const normalized = id.replace(/\\/g, "/");
+    if (!normalized.includes("/@processmaker/modeler/") || !normalized.includes("modeler.common")) {
+      return null;
+    }
+    if (!code.includes("__webpack_require__.p + \"img/")) {
+      return null;
+    }
+    return {
+      code: code.replace(/__webpack_require__\.p \+ "img\//g, "\"/js/img/"),
+      map: null,
+    };
+  },
+};
 
 /**
  * Resolve Webpack-style `~styles/...` imports used in Vue SFC <style lang="scss">.
@@ -14,17 +68,43 @@ const nm = (...segments) => path.resolve(__dirname, 'node_modules', ...segments)
  */
 const stylesImporter = {
   findFileUrl(url) {
-    if (url.startsWith('~styles/') || url.startsWith('styles/')) {
-      const relative = url.replace(/^~?styles\//, '');
+    if (url.startsWith("~styles/") || url.startsWith("styles/")) {
+      const relative = url.replace(/^~?styles\//, "");
       return pathToFileURL(path.resolve(stylesPath, relative));
     }
-    if (url === '~styles' || url === 'styles') {
+    if (url === "~styles" || url === "styles") {
       return pathToFileURL(stylesPath);
     }
     return null;
   },
 };
 
+/**
+ * vue-monaco's ESM build (dist/vue-monaco.es.js) has a CJS fallback:
+ *   var monaco = require('monaco-editor');
+ * that fires when `amdRequire` prop is falsy. In browser ESM context there is
+ * no global `require`, so we stub it out here. The real loading is always done
+ * via the `amdRequire` prop (set to `window.require` in vue-monaco-amd.js).
+ */
+const vueMonacoRequireShim = {
+  name: "pm:vue-monaco-require-shim",
+  transform(code, id) {
+    if (!id.includes("node_modules/vue-monaco")) return null;
+    if (!code.includes("require('monaco-editor')")) return null;
+    // Replace the CJS require with AMD window.require (synchronous single-arg form,
+    // works if vs/editor/editor.main is already registered by loader.js).
+    // This branch is only reached when amdRequire prop is falsy; with shared.monaco
+    // loaded, window.require is always truthy so this is a safety net.
+    return {
+      code: code.replace(
+        "require('monaco-editor')",
+        "(window.require && window.require('monaco-editor'))",
+      ),
+      map: null,
+    };
+  },
+};
+
 /**
  * Tailwind's `content` globs make every SFC a PostCSS dependency of
  * tailwind.css, so Vite registers an extra `type: 'asset'` node under each
@@ -33,16 +113,16 @@ const stylesImporter = {
  * tailwind.css instead of the component.
  */
 const vue2HmrMainModuleFix = {
-  name: 'pm:vue2-hmr-main-module-fix',
-  enforce: 'post',
+  name: "pm:vue2-hmr-main-module-fix",
+  enforce: "post",
   hotUpdate({ file, modules }) {
-    if (!file.endsWith('.vue') || !modules.some((mod) => mod.type === 'asset')) {
+    if (!file.endsWith(".vue") || !modules.some((mod) => mod.type === "asset")) {
       return;
     }
 
     const candidates = this.environment.moduleGraph.getModulesByFile(file) ?? [];
     const mainModule = [...candidates].find(
-      (mod) => mod.type !== 'asset' && !/type=/.test(mod.url),
+      (mod) => mod.type !== "asset" && !/type=/.test(mod.url),
     );
 
     return mainModule ? [...modules, mainModule] : undefined;
@@ -55,15 +135,15 @@ const vue2HmrMainModuleFix = {
  * SCSS/CSS sources for Vite pages via @vite([...]).
  */
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd(), '');
-  const appUrl = (env.APP_URL || 'http://127.0.0.1:8092').replace(/\/$/, '');
+  const env = loadEnv(mode, process.cwd(), "");
+  const appUrl = (env.APP_URL || "http://127.0.0.1:8092").replace(/\/$/, "");
 
   // Fonts live in Laravel public/. CSS from vite:dev is served from :5173, so
   // root-relative /css/... would hit Vite unless proxied. Absolute APP_URL fonts
   // break when the page origin differs (localhost vs LAN IP) — browser CORS.
   // Always use root-relative paths; proxy /css to Laravel during serve.
-  const openSansPath = '/css/precompiled/npm-font-open-sans/fonts';
-  const faPath = '/css/precompiled/fontawesome-free/webfonts';
+  const openSansPath = "/css/precompiled/npm-font-open-sans/fonts";
+  const faPath = "/css/precompiled/fontawesome-free/webfonts";
 
   const fontAdditionalData = `
     $FontPathOpenSans: "${openSansPath}";
@@ -72,25 +152,120 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [
+      modelerPublicPathPlugin,
       yaml(),
       laravel({
         // Keep Vite hot file away from public/hot so Laravel Mix's mix() helper
         // does not rewrite Mix assets (typeForm.js, etc.) to the Vite origin.
-        hotFile: 'storage/vite.hot',
+        hotFile: "storage/vite.hot",
         input: [
-          'resources/js/vite/auth/login.js',
-          'resources/js/translations/index.js',
-          'resources/js/vite/tasks/loaderTasks.js',
-          'resources/js/vite/tasks/tasks.js',
+          "resources/js/vite/auth/login.js",
+          "resources/js/translations/index.js",
+          "resources/js/vite/tasks/loaderTasks.js",
+          "resources/js/vite/tasks/tasks.js",
+
+          "resources/js/tasks/loaderEdit.js",
+          "resources/js/tasks/edit.js",
+          "resources/js/tasks/loaderPreview.js",
+          "resources/js/tasks/preview.js",
+
+          "resources/js/processes/screen-builder/loaderScreen.js",
+          "resources/js/processes/screen-builder/typeForm.js",
+          "resources/js/processes/screen-builder/typeDisplay.js",
+          "resources/js/processes/screen-builder/main.js",
+
+          "resources/js/notifications/loaderNotifications.js",
+          "resources/js/notifications/index.js",
+
+          "resources/js/templates/loaderTemplates.js",
+          "resources/js/templates/import/index.js",
+
+          "resources/js/tasks/loaderTasks.js",
+          "resources/js/tasks/show.js",
+          "resources/js/inbox-rules/index.js",
+
+          "resources/js/processes/loaderProcesses.js",
+
+          "resources/js/leave-warning.js",
+          "resources/js/processes/processes.js",
+          "resources/js/processes/edit.js",
+          "resources/js/processes/newDesigner.js",
+          "resources/js/processes/export/index.js",
+          "resources/js/processes/import/index.js",
+          "resources/js/templates/index.js",
+          "resources/js/processes/categories/index.js",
+          "resources/js/processes/archived.js",
+          "resources/js/admin/loaderAdmin.js",
+          "resources/js/admin/users/loaderUsers.js",
+          "resources/js/admin/users/index.js",
+          "resources/js/admin/users/edit.js",
+          "resources/js/admin/groups/loaderGroups.js",
+          "resources/js/admin/groups/index.js",
+          "resources/js/admin/groups/edit.js",
+          "resources/js/admin/auth-clients/loaderAuthClients.js",
+          "resources/js/admin/auth-clients/index.js",
+          "resources/js/admin/settings/loaderSettings.js",
+          "resources/js/admin/settings/index.js",
+          "resources/js/admin/settings/ldaplogs.js",
+          "resources/js/admin/cssOverride/loaderCssOverride.js",
+          "resources/js/admin/cssOverride/edit.js",
+          "resources/js/admin/script-executors/index.js",
+          "resources/js/admin/tenant-queues/index.js",
+          "resources/js/admin/devlink/index.js",
+          "resources/js/admin/cases-retention/index.js",
+          "resources/js/admin/logs/index.js",
+
+          "resources/js/admin/profile/loaderProfile.js",
+          "resources/js/admin/profile/edit.js",
+
+          "resources/js/processes/environment-variables/loaderEnvironment.js",
+          "resources/js/processes/environment-variables/index.js",
+          "resources/js/processes/environment-variables/edit.js",
+          "resources/js/processes/screens/loaderScreens.js",
+          "resources/js/processes/screens/index.js",
+          "resources/js/processes/screen-templates/myTemplates.js",
+          "resources/js/processes/screen-templates/publicTemplates.js",
+          "resources/js/processes/screens/edit.js",
+          "resources/js/processes/scripts/loaderScripts.js",
+          "resources/js/processes/scripts/index.js",
+          "resources/js/processes/scripts/editConfig.js",
+          "resources/js/processes/scripts/edit.js",
+
+          "resources/js/processes/modeler/loaderModeler.js",
+          "resources/js/processes/modeler/index.js",
+          "resources/js/processes/modeler/initialLoad.js",
+
+          "resources/js/requests/loaderRequests.js",
+          "resources/js/requests/index.js",
+
+          "resources/js/notifications/loaderNotifications.js",
+          "resources/js/notifications/index.js",
+
+          "resources/js/templates/loaderTemplates.js",
+          "resources/js/templates/import/index.js",
+          "resources/js/templates/configure.js",
+          "resources/js/templates/assets.js",
+
+          "resources/js/processes/signals/loaderSignals.js",
+          "resources/js/processes/signals/index.js",
+          "resources/js/processes/signals/edit.js",
+
+          "resources/js/processes-catalogue/loaderProcessesCatalogue.js",
+          "resources/js/processes-catalogue/processesCatalogue.js",
+          "resources/jscomposition/cases/casesMain/loaderCasesMain.js",
+          "resources/jscomposition/cases/casesMain/casesMain.js",
+          "resources/jscomposition/cases/casesDetail/loaderCasesDetail.js",
+          "resources/jscomposition/cases/casesDetail/casesDetail.js",
+          "resources/js/initialLoad.js",
           // Same style entrypoints as webpack.mix.js
-          'resources/sass/app.scss',
-          'resources/sass/sidebar/sidebar.scss',
-          'resources/sass/collapseDetails.scss',
-          'resources/sass/tailwind.css',
+          "resources/sass/app.scss",
+          "resources/sass/sidebar/sidebar.scss",
+          "resources/sass/collapseDetails.scss",
+          "resources/sass/tailwind.css",
         ],
         refresh: [
-          'resources/views/**',
-          'resources/sass/**',
+          "resources/views/**",
+          "resources/sass/**",
         ],
       }),
       vue({
@@ -103,21 +278,48 @@ export default defineConfig(({ mode }) => {
         },
       }),
       vue2HmrMainModuleFix,
+      vueMonacoRequireShim,
+      // dest paths are relative to outDir (public/build), so '../' escapes to public/
+      viteStaticCopy({
+        targets: [
+          // Static images (mirrors webpack.mix.js .copy() calls)
+          { src: "resources/img/*", dest: "../img" },
+          { src: "resources/img/launchpad-images/*", dest: "../img/launchpad-images" },
+          { src: "resources/img/launchpad-images/icons/*", dest: "../img/launchpad-images/icons" },
+          { src: "resources/img/connected-account-images/*", dest: "../img/connected-account-images" },
+          { src: "resources/img/smartinbox-images/*", dest: "../img/smartinbox-images" },
+          { src: "resources/img/pagination-images/*", dest: "../img/pagination-images" },
+          { src: "resources/img/script_lang/*", dest: "../img/script_lang" },
+          // Vendor JS / Vue files served as plain scripts by Mix pages
+          { src: "node_modules/snapsvg/dist/snap.svg.js", dest: "../js" },
+          { src: "resources/js/components/CustomActions.vue", dest: "../js" },
+          { src: "resources/js/components/DetailRow.vue", dest: "../js" },
+          { src: "resources/js/components/FilterBar.vue", dest: "../js" },
+          { src: "resources/js/timeout.js", dest: "../js" },
+          // Modeler SVG icons (same target as Mix; referenced by modeler's __webpack_require__.p)
+          { src: "node_modules/@processmaker/modeler/dist/img", dest: "../js/img" },
+          // BPMN font symbols
+          { src: "node_modules/bpmn-font/dist", dest: "../css/bpmn-symbols" },
+          // Monaco Editor (mirrors webpack.mix.js lines 119-138)
+          ...monacoTargets,
+        ],
+      }),
     ],
     resolve: {
-      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
+      extensions: [".mjs", ".js", ".ts", ".jsx", ".tsx", ".json", ".vue"],
+      dedupe: ["vue"],
       alias: {
-        vue: nm('vue/dist/vue.esm.js'),
+        vue: nm("vue/dist/vue.esm.js"),
         // Bare peers imported by CI-linked screen-builder ESM
         // (/opt/packages/screen-builder/dist/vue-form-builder.es.js)
-        '@processmaker/vue-form-elements': nm('@processmaker/vue-form-elements'),
-        lodash: nm('lodash'),
-        vuex: nm('vuex'),
-        moment: nm('moment'),
-        'moment-timezone': nm('moment-timezone'),
-        'vue-monaco': nm('vue-monaco'),
+        "@processmaker/vue-form-elements": nm("@processmaker/vue-form-elements"),
+        lodash: nm("lodash"),
+        vuex: nm("vuex"),
+        moment: nm("moment"),
+        "moment-timezone": nm("moment-timezone"),
+        "vue-monaco": path.resolve(__dirname, "resources/js/vue-monaco-amd.js"),
         styles: stylesPath,
-        '~styles': stylesPath,
+        "~styles": stylesPath,
       },
     },
     css: {
@@ -134,28 +336,32 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    // Let Vite transform modeler.common.js (plugin above) instead of esbuild prebundle.
+    optimizeDeps: {
+      exclude: ["@processmaker/modeler"],
+    },
     build: {
-      outDir: 'public/build',
+      outDir: "public/build",
       emptyOutDir: true,
-      manifest: 'manifest.json',
+      manifest: "manifest.json",
     },
     server: {
-      host: '127.0.0.1',
+      host: "127.0.0.1",
       port: 5173,
       strictPort: true,
-      origin: 'http://127.0.0.1:5173',
+      origin: "http://127.0.0.1:5173",
       cors: {
         origin: true,
       },
       proxy: {
-        '/css': {
+        "/css": {
           target: appUrl,
           changeOrigin: true,
         },
       },
       hmr: {
-        host: '127.0.0.1',
-        protocol: 'ws',
+        host: "127.0.0.1",
+        protocol: "ws",
       },
     },
   };
diff --git a/webpack.mix.js b/webpack.mix.js
index 4413c3474d..4c74c0f5fa 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -2,7 +2,7 @@ const mix = require("laravel-mix");
 const path = require("path");
 require("laravel-mix-polyfill");
 // const packageJson = require("./package.json");
-const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
 /*
  |--------------------------------------------------------------------------
@@ -72,106 +72,34 @@ mix
     "vue-router",
     "axios",
     "lodash",
-  ], "public/js/vue-vendor.js")
-  .copy("resources/img/*", "public/img")
-  .copy("resources/img/launchpad-images/*", "public/img/launchpad-images")
-  .copy("resources/img/launchpad-images/icons/*", "public/img/launchpad-images/icons")
-  .copy("resources/img/connected-account-images/*", "public/img/connected-account-images")
-  .copy("resources/img/smartinbox-images/*", "public/img/smartinbox-images")
-  .copy("resources/img/pagination-images/*", "public/img/pagination-images")
-  .copy("resources/img/script_lang/*", "public/img/script_lang")
-  .copy("node_modules/snapsvg/dist/snap.svg.js", "public/js")
-  .copy("resources/js/components/CustomActions.vue", "public/js")
-  .copy("resources/js/components/DetailRow.vue", "public/js")
-  // .copy("resources/fonts/Open_Sans/", "public/fonts")
-  .copy("resources/js/components/FilterBar.vue", "public/js")
-  .copy("resources/js/timeout.js", "public/js")
-  // Copy files necessary for images for the designer/modeler to it's own img directory
-  .copy("node_modules/@processmaker/modeler/dist/img", "public/js/img")
-  // .copy("node_modules/@processmaker/screen-builder/dist/img", "public/js/img")
-  // .copy("node_modules/@processmaker/vue-form-elements/dist", "public/js")
-  .copy("node_modules/bpmn-font/dist", "public/css/bpmn-symbols");
+  ], "public/js/vue-vendor.js");
 
 mix
   .js("resources/js/print-layout.js", "public/js")
   .js("resources/js/app-layout.js", "public/js")
   .js("resources/js/process-map-layout.js", "public/js")
-  .js("resources/js/processes/modeler/index.js", "public/js/processes/modeler")
   .js("resources/js/processes/modeler/process-map.js", "public/js/processes/modeler")
   .js("resources/js/processes/modeler/initialLoad.js", "public/js/processes/modeler")
   .js("resources/js/admin/auth/passwords/change.js", "public/js/admin/auth/passwords/change.js")
-  .js("resources/js/admin/settings/index.js", "public/js/admin/settings")
-  .js("resources/js/admin/settings/ldaplogs.js", "public/js/admin/settings")
-  .js("resources/js/admin/users/index.js", "public/js/admin/users")
-  .js("resources/js/admin/users/edit.js", "public/js/admin/users/edit.js")
-  .js("resources/js/admin/groups/index.js", "public/js/admin/groups")
-  .js("resources/js/admin/groups/edit.js", "public/js/admin/groups/edit.js")
-  .js("resources/js/admin/auth-clients/index.js", "public/js/admin/auth-clients/index.js")
   // .js("resources/js/admin/queues/index.js", "public/js/admin/queues")
-  .js("resources/js/admin/profile/edit.js", "public/js/admin/profile/edit.js")
-  .js("resources/js/admin/cssOverride/edit.js", "public/js/admin/cssOverride/edit.js")
-  .js("resources/js/admin/script-executors/index.js", "public/js/admin/script-executors/index.js")
-  .js("resources/js/admin/tenant-queues/index.js", "public/js/admin/tenant-queues/index.js")
-  .js("resources/js/admin/logs/index.js", "public/js/admin/logs/index.js")
-  .js("resources/js/admin/cases-retention/index.js", "public/js/admin/cases-retention/index.js")
 
-  .js("resources/js/processes/index.js", "public/js/processes")
-  .js("resources/js/processes/edit.js", "public/js/processes")
-  .js("resources/js/processes/archived.js", "public/js/processes")
-  .js("resources/js/processes/newDesigner.js", "public/js/processes")
-  .js("resources/js/templates/index.js", "public/js/templates")
-  .js("resources/js/templates/import/index.js", "public/js/templates/import")
-  .js("resources/js/templates/configure.js", "public/js/templates")
-  .js("resources/js/templates/assets.js", "public/js/templates")
-  .js("resources/js/processes/categories/index.js", "public/js/processes/categories")
-  .js("resources/js/processes/scripts/index.js", "public/js/processes/scripts")
-  .js("resources/js/processes/scripts/edit.js", "public/js/processes/scripts")
-  .js("resources/js/processes/scripts/editConfig.js", "public/js/processes/scripts")
   .js("resources/js/processes/scripts/preview.js", "public/js/processes/scripts")
-  .js("resources/js/processes/export/index.js", "public/js/processes/export")
-  .js("resources/js/processes/environment-variables/index.js", "public/js/processes/environment-variables")
-  .js("resources/js/processes/environment-variables/edit.js", "public/js/processes/environment-variables")
-  .js("resources/js/processes/import/index.js", "public/js/processes/import")
-  .js("resources/js/processes/screens/index.js", "public/js/processes/screens")
-  .js("resources/js/processes/screens/edit.js", "public/js/processes/screens")
   .js("resources/js/processes/screens/preview.js", "public/js/processes/screens")
-  .js("resources/js/processes/screen-templates/myTemplates.js", "public/js/processes/screen-templates")
-  .js("resources/js/processes/screen-templates/publicTemplates.js", "public/js/processes/screen-templates")
-  .js("resources/js/processes/signals/index.js", "public/js/processes/signals")
-  .js("resources/js/processes/signals/edit.js", "public/js/processes/signals")
-  .js("resources/js/processes/screen-builder/main.js", "public/js/processes/screen-builder")
-  .js("resources/js/processes/screen-builder/typeForm.js", "public/js/processes/screen-builder")
-  .js("resources/js/processes/screen-builder/typeDisplay.js", "public/js/processes/screen-builder")
-  .js("resources/js/leave-warning.js", "public/js")
-  .js("resources/js/requests/index.js", "public/js/requests")
+
   .js("resources/js/requests/mobile.js", "public/js/requests/mobile.js")
   .js("resources/js/requests/show.js", "public/js/requests")
   .js("resources/js/requests/preview.js", "public/js/requests")
-  .js("resources/jscomposition/cases/casesMain/main.js", "public/js/composition/cases/casesMain/main.js")
-  .js("resources/jscomposition/cases/casesDetail/edit.js", "public/js/composition/cases/casesDetail/edit.js")
   .js("resources/js/processes/translations/import.js", "public/js/processes/translations")
 
-  .js("resources/js/processes-catalogue/index.js", "public/js/processes-catalogue/index.js")
-
   .js("resources/js/tasks/mobile.js", "public/js/tasks/mobile.js")
-  .js("resources/js/tasks/show.js", "public/js/tasks/show.js")
   .js("resources/js/tasks/router.js", "public/js/tasks/router.js")
 
-  .js("resources/js/notifications/index.js", "public/js/notifications/index.js")
-  .js("resources/js/inbox-rules/index.js", "public/js/inbox-rules")
-  .js("resources/js/inbox-rules/show.js", "public/js/inbox-rules")
-  .js("resources/js/admin/devlink/index.js", "public/js/admin/devlink")
-
   // Note, that this should go last for the extract to properly put the manifest and vendor in the right location
   // See: https://github.com/JeffreyWay/laravel-mix/issues/1118
-  .js("resources/jscomposition/cases/casesMain/loader.js", "public/js/composition/cases/casesMain")
-  .js("resources/jscomposition/cases/casesDetail/loader.js", "public/js/composition/cases/casesDetail")
   .js("resources/js/initialLoad.js", "public/js")
 
   .js("resources/js/tasks/loaderMain.js", "public/js/tasks")
   .js("resources/js/tasks/loaderPreview.js", "public/js/tasks")
-  .js("resources/js/tasks/loaderEdit.js", "public/js/tasks")
-  .js("resources/js/tasks/edit.js", "public/js/tasks/edit.js")
   .js("resources/js/tasks/preview.js", "public/js/tasks/preview.js")
 
   .js("resources/js/app.js", "public/js");
@@ -181,36 +109,10 @@ mix
 //   targets: "> 0.25%, not dead"
 // });
 
-// Monaco AMD modules. Copy only the files we need to make the build faster.
-const monacoSource = "node_modules/monaco-editor/min/vs/";
-const monacoDestination = "public/vendor/monaco-editor/min/vs/";
-const monacoLanguages = ["php", "css", "lua", "javascript", "csharp", "java", "python", "r", "html", "xml", "typescript", "sql"];
-const monacoFiles = [
-  "loader.js",
-  "editor/editor.main.js",
-  "editor/editor.main.css",
-  "editor/editor.main.nls.js",
-  "base/browser/ui/codicons/codicon/codicon.ttf",
-  "base/worker/workerMain.js",
-  "base/common/worker/simpleWorker.nls.js",
-];
-monacoFiles.forEach((file) => {
-  mix.copy(monacoSource + file, monacoDestination + file);
-});
-monacoLanguages.forEach((lang) => {
-  const path = `basic-languages/${lang}/${lang}.js`;
-  mix.copy(monacoSource + path, monacoDestination + path);
-});
-mix.copyDirectory(`${monacoSource}language`, `${monacoDestination}language`);
-
+// sidebar.scss, collapseDetails.scss, app.scss, tailwind.css → moved to vite.config.js
+// queues.scss stays here: CompileUI.php compiles it at runtime to public/css/admin/queues.css
 mix
-  .sass("resources/sass/sidebar/sidebar.scss", "public/css")
-  .sass("resources/sass/collapseDetails.scss", "public/css")
-  .sass("resources/sass/app.scss", "public/css")
   .sass("resources/sass/admin/queues.scss", "public/css/admin")
-  .postCss("resources/sass/tailwind.css", "public/css", [
-    require("tailwindcss"),
-  ])
   .version();
 
 mix.vue({ version: 2 });