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/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/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..7a60a7c9d7 100644
--- a/resources/js/next/libraries/jquery.js
+++ b/resources/js/next/libraries/jquery.js
@@ -1,8 +1,9 @@
 import * as jQuery from "jquery";
 
+window.$ = jQuery.default;
+
 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/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/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/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/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/vite/AGENTS.md b/resources/js/vite/AGENTS.md
index d3b6ffa940..4fc13fc218 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,142 @@ 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/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/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-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` |
+| Processes (Designer) | **Vite** | `processes.index` + `layoutnextvite`; apps via child `@append` | `processes/loaderProcesses.js` → `processes.js` / `templates` / `categories` / `archived` |
+| 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` |
+| 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/processes/loaderProcesses.js
+resources/js/processes/processes.js
+resources/js/processes/edit.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/processes/environment-variables/loaderEnvironment.js
+resources/js/processes/environment-variables/index.js
+resources/js/processes/environment-variables/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 +181,219 @@ 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 (screens, scripts, categories on non-Vite pages, 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`. Other Designer Mix bundles (screens, scripts, modeler, …) remain.
+
+**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`)
+
+**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`
+
+**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
+
+**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**
 
-## Quick reference: existing migrations
+- 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`)
 
-**Tasks (live)**
+**Case Detail**
 
-- 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/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`)
 
-**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`, `categories/list`, `archivedList`, screens, scripts, modeler, …) even when embedded under Vite `/processes`
+- Admin profile, password change, and most other non-listed admin/designer pages
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/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/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/layouts/layoutnextvite.blade.php b/resources/views/layouts/layoutnextvite.blade.php
index 1e5984ecb0..5c361d077f 100644
--- a/resources/views/layouts/layoutnextvite.blade.php
+++ b/resources/views/layouts/layoutnextvite.blade.php
@@ -144,7 +144,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/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/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/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/vite.config.js b/vite.config.js
index e3aba44a6e..b1c8ddd980 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -8,6 +8,32 @@ import yaml from '@rollup/plugin-yaml';
 const stylesPath = path.resolve(__dirname, 'resources/sass');
 const nm = (...segments) => path.resolve(__dirname, 'node_modules', ...segments);
 
+/**
+ * @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">.
  * Mirrors webpack.mix.js alias: styles -> resources/sass
@@ -48,6 +74,7 @@ export default defineConfig(({ mode }) => {
 
   return {
     plugins: [
+      modelerPublicPathPlugin,
       yaml(),
       laravel({
         // Keep Vite hot file away from public/hot so Laravel Mix's mix() helper
@@ -58,6 +85,43 @@ export default defineConfig(({ mode }) => {
           'resources/js/translations/index.js',
           'resources/js/vite/tasks/loaderTasks.js',
           'resources/js/vite/tasks/tasks.js',
+          'resources/js/processes/loaderProcesses.js',
+          'resources/js/processes/processes.js',
+          'resources/js/processes/edit.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/processes/environment-variables/loaderEnvironment.js',
+          'resources/js/processes/environment-variables/index.js',
+          'resources/js/processes/environment-variables/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',
@@ -109,6 +173,10 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    // Let Vite transform modeler.common.js (plugin above) instead of esbuild prebundle.
+    optimizeDeps: {
+      exclude: ['@processmaker/modeler'],
+    },
     build: {
       outDir: 'public/build',
       emptyOutDir: true,
diff --git a/webpack.mix.js b/webpack.mix.js
index 4413c3474d..5601d4a96f 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -100,37 +100,19 @@ mix
   .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")
@@ -147,12 +129,8 @@ mix
   .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")
@@ -160,12 +138,9 @@ mix
   .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")