From 0fc73ef746dc96c74c75d3daba2211c377deacc9 Mon Sep 17 00:00:00 2001 From: William Allen Date: Fri, 24 Jul 2026 17:34:57 -0400 Subject: [PATCH 1/4] Use named imports for Vue --- resources/js/vue/app.js | 64 +++++++++++++++++++++-------------------- 1 file changed, 33 insertions(+), 31 deletions(-) diff --git a/resources/js/vue/app.js b/resources/js/vue/app.js index f7b315d20e..1fdb9e4977 100755 --- a/resources/js/vue/app.js +++ b/resources/js/vue/app.js @@ -1,4 +1,7 @@ -import * as Vue from 'vue'; +import { + createApp, + defineAsyncComponent, +} from 'vue'; import axios from 'axios'; import { ApolloClient, InMemoryCache } from '@apollo/client/core'; import { createApolloProvider } from '@vue/apollo-option'; @@ -6,36 +9,36 @@ import VueApolloComponents from '@vue/apollo-components'; import { relayStylePagination } from '@apollo/client/utilities'; import { DefaultApolloClient } from '@vue/apollo-composable'; -const app = Vue.createApp({ +const app = createApp({ components: { - BuildConfigure: Vue.defineAsyncComponent(() => import('./components/BuildConfigure')), - BuildNotesPage: Vue.defineAsyncComponent(() => import('./components/BuildNotesPage.vue')), - BuildSummary: Vue.defineAsyncComponent(() => import('./components/BuildSummary')), - BuildUpdatePage: Vue.defineAsyncComponent(() => import('./components/BuildUpdatePage.vue')), - ManageAuthTokens: Vue.defineAsyncComponent(() => import('./components/ManageAuthTokens.vue')), - Monitor: Vue.defineAsyncComponent(() => import('./components/Monitor')), - TestDetailsPage: Vue.defineAsyncComponent(() => import('./components/TestDetailsPage.vue')), - HeaderNav: Vue.defineAsyncComponent(() => import('./components/page-header/HeaderNav.vue')), - ViewDynamicAnalysis: Vue.defineAsyncComponent(() => import('./components/ViewDynamicAnalysis.vue')), - BuildDynamicAnalysisIdPage: Vue.defineAsyncComponent(() => import('./components/BuildDynamicAnalysisIdPage.vue')), - ProjectsPage: Vue.defineAsyncComponent(() => import('./components/ProjectsPage.vue')), - SubProjectDependencies: Vue.defineAsyncComponent(() => import('./components/SubProjectDependencies.vue')), - BuildTestsPage: Vue.defineAsyncComponent(() => import('./components/BuildTestsPage.vue')), - ProjectSitesPage: Vue.defineAsyncComponent(() => import('./components/ProjectSitesPage.vue')), - SitesIdPage: Vue.defineAsyncComponent(() => import('./components/SitesIdPage.vue')), - ProjectMembersPage: Vue.defineAsyncComponent(() => import('./components/ProjectMembersPage.vue')), - UsersPage: Vue.defineAsyncComponent(() => import('./components/UsersPage.vue')), - BuildFilesPage: Vue.defineAsyncComponent(() => import('./components/BuildFilesPage.vue')), - BuildTargetsPage: Vue.defineAsyncComponent(() => import('./components/BuildTargetsPage.vue')), - BuildInstrumentationPage: Vue.defineAsyncComponent(() => import('./components/BuildInstrumentationPage.vue')), - BuildCommentsPage: Vue.defineAsyncComponent(() => import('./components/BuildCommentsPage.vue')), - BuildBuildPage: Vue.defineAsyncComponent(() => import('./components/BuildBuildPage.vue')), - CoverageFilePage: Vue.defineAsyncComponent(() => import('./components/CoverageFilePage.vue')), - BuildCoveragePage: Vue.defineAsyncComponent(() => import('./components/BuildCoveragePage.vue')), - CreateProjectPage: Vue.defineAsyncComponent(() => import('./components/CreateProjectPage.vue')), - AdministrationPage: Vue.defineAsyncComponent(() => import('./components/AdministrationPage.vue')), - ProjectSettingsPage: Vue.defineAsyncComponent(() => import('./components/ProjectSettingsPage.vue')), - ProfilePage: Vue.defineAsyncComponent(() => import('./components/ProfilePage.vue')), + BuildConfigure: defineAsyncComponent(() => import('./components/BuildConfigure')), + BuildNotesPage: defineAsyncComponent(() => import('./components/BuildNotesPage.vue')), + BuildSummary: defineAsyncComponent(() => import('./components/BuildSummary')), + BuildUpdatePage: defineAsyncComponent(() => import('./components/BuildUpdatePage.vue')), + ManageAuthTokens: defineAsyncComponent(() => import('./components/ManageAuthTokens.vue')), + Monitor: defineAsyncComponent(() => import('./components/Monitor')), + TestDetailsPage: defineAsyncComponent(() => import('./components/TestDetailsPage.vue')), + HeaderNav: defineAsyncComponent(() => import('./components/page-header/HeaderNav.vue')), + ViewDynamicAnalysis: defineAsyncComponent(() => import('./components/ViewDynamicAnalysis.vue')), + BuildDynamicAnalysisIdPage: defineAsyncComponent(() => import('./components/BuildDynamicAnalysisIdPage.vue')), + ProjectsPage: defineAsyncComponent(() => import('./components/ProjectsPage.vue')), + SubProjectDependencies: defineAsyncComponent(() => import('./components/SubProjectDependencies.vue')), + BuildTestsPage: defineAsyncComponent(() => import('./components/BuildTestsPage.vue')), + ProjectSitesPage: defineAsyncComponent(() => import('./components/ProjectSitesPage.vue')), + SitesIdPage: defineAsyncComponent(() => import('./components/SitesIdPage.vue')), + ProjectMembersPage: defineAsyncComponent(() => import('./components/ProjectMembersPage.vue')), + UsersPage: defineAsyncComponent(() => import('./components/UsersPage.vue')), + BuildFilesPage: defineAsyncComponent(() => import('./components/BuildFilesPage.vue')), + BuildTargetsPage: defineAsyncComponent(() => import('./components/BuildTargetsPage.vue')), + BuildInstrumentationPage: defineAsyncComponent(() => import('./components/BuildInstrumentationPage.vue')), + BuildCommentsPage: defineAsyncComponent(() => import('./components/BuildCommentsPage.vue')), + BuildBuildPage: defineAsyncComponent(() => import('./components/BuildBuildPage.vue')), + CoverageFilePage: defineAsyncComponent(() => import('./components/CoverageFilePage.vue')), + BuildCoveragePage: defineAsyncComponent(() => import('./components/BuildCoveragePage.vue')), + CreateProjectPage: defineAsyncComponent(() => import('./components/CreateProjectPage.vue')), + AdministrationPage: defineAsyncComponent(() => import('./components/AdministrationPage.vue')), + ProjectSettingsPage: defineAsyncComponent(() => import('./components/ProjectSettingsPage.vue')), + ProfilePage: defineAsyncComponent(() => import('./components/ProfilePage.vue')), }, }); @@ -105,5 +108,4 @@ app.use(apolloProvider); app.use(VueApolloComponents); app.provide(DefaultApolloClient, apolloClient); -window.Vue = Vue; app.mount('#app'); From 169c2dc73bdf6631efeb0f912906bedb70dc6bf6 Mon Sep 17 00:00:00 2001 From: William Allen Date: Fri, 24 Jul 2026 17:35:32 -0400 Subject: [PATCH 2/4] Move axios setup out of app.js --- resources/js/vue/app.js | 12 ------------ resources/js/vue/components/shared/ApiLoader.js | 12 +++++++++++- 2 files changed, 11 insertions(+), 13 deletions(-) diff --git a/resources/js/vue/app.js b/resources/js/vue/app.js index 1fdb9e4977..c96a16b4e4 100755 --- a/resources/js/vue/app.js +++ b/resources/js/vue/app.js @@ -2,7 +2,6 @@ import { createApp, defineAsyncComponent, } from 'vue'; -import axios from 'axios'; import { ApolloClient, InMemoryCache } from '@apollo/client/core'; import { createApolloProvider } from '@vue/apollo-option'; import VueApolloComponents from '@vue/apollo-components'; @@ -44,17 +43,6 @@ const app = createApp({ app.config.globalProperties.$baseURL = document.getElementById('app').getAttribute('data-app-url'); -axios.defaults.baseURL = app.config.globalProperties.$baseURL; -axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; -const token = document.head.querySelector('meta[name="csrf-token"]'); -if (token) { - axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; -} else { - console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); -} - -app.config.globalProperties.$axios = axios; - const apolloClient = new ApolloClient({ cache: new InMemoryCache({ typePolicies: { diff --git a/resources/js/vue/components/shared/ApiLoader.js b/resources/js/vue/components/shared/ApiLoader.js index ee238f9100..a08ce8aefd 100644 --- a/resources/js/vue/components/shared/ApiLoader.js +++ b/resources/js/vue/components/shared/ApiLoader.js @@ -1,7 +1,17 @@ +import axios from 'axios'; + +axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; +const token = document.head.querySelector('meta[name="csrf-token"]'); +if (token) { + axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; +} else { + console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token'); +} + export default { loadPageData: function (vm, endpoint_path) { vm.start = new Date().getTime(); - vm.$axios + axios .get(endpoint_path) .then((response) => { // Pre-assigment hook for components. From 7be28c4ed4f0fb91482a1a5c15ca3772daae4f81 Mon Sep 17 00:00:00 2001 From: William Allen Date: Fri, 24 Jul 2026 17:39:07 -0400 Subject: [PATCH 3/4] Remove `apollo-components` --- package-lock.json | 13 ------------- package.json | 1 - resources/js/vue/app.js | 2 -- 3 files changed, 16 deletions(-) diff --git a/package-lock.json b/package-lock.json index a47252ae51..925a701ea6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,7 +15,6 @@ "@fortawesome/free-regular-svg-icons": "^7.2.0", "@fortawesome/free-solid-svg-icons": "^7.2.0", "@fortawesome/vue-fontawesome": "^3.2.0", - "@vue/apollo-components": "^4.2.2", "@vue/apollo-composable": "^4.2.2", "@vue/apollo-option": "^4.2.2", "angular": "^1.8.0", @@ -4511,18 +4510,6 @@ "url": "https://opencollective.com/typescript-eslint" } }, - "node_modules/@vue/apollo-components": { - "version": "4.2.2", - "resolved": "https://registry.npmjs.org/@vue/apollo-components/-/apollo-components-4.2.2.tgz", - "integrity": "sha512-Q1CpsL1WI6wh1prr7Io9F2IO1670CiI+azxdNFMUcKE4IjJGB1AqIo2j3aaR33msmQBe5uinCJ8EfNhvCGVj8w==", - "license": "MIT", - "dependencies": { - "@vue/apollo-option": "^4.2.2" - }, - "peerDependencies": { - "vue": "^3.1.0" - } - }, "node_modules/@vue/apollo-composable": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/@vue/apollo-composable/-/apollo-composable-4.2.2.tgz", diff --git a/package.json b/package.json index 15f4d8f68d..f2299a5485 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,6 @@ "@fortawesome/free-regular-svg-icons": "^7.2.0", "@fortawesome/free-solid-svg-icons": "^7.2.0", "@fortawesome/vue-fontawesome": "^3.2.0", - "@vue/apollo-components": "^4.2.2", "@vue/apollo-composable": "^4.2.2", "@vue/apollo-option": "^4.2.2", "angular": "^1.8.0", diff --git a/resources/js/vue/app.js b/resources/js/vue/app.js index c96a16b4e4..e341055747 100755 --- a/resources/js/vue/app.js +++ b/resources/js/vue/app.js @@ -4,7 +4,6 @@ import { } from 'vue'; import { ApolloClient, InMemoryCache } from '@apollo/client/core'; import { createApolloProvider } from '@vue/apollo-option'; -import VueApolloComponents from '@vue/apollo-components'; import { relayStylePagination } from '@apollo/client/utilities'; import { DefaultApolloClient } from '@vue/apollo-composable'; @@ -93,7 +92,6 @@ const apolloProvider = createApolloProvider({ }); app.use(apolloProvider); -app.use(VueApolloComponents); app.provide(DefaultApolloClient, apolloClient); app.mount('#app'); From d46be96e154659722fa7ff954178df460d7a5c64 Mon Sep 17 00:00:00 2001 From: William Allen Date: Fri, 24 Jul 2026 17:55:39 -0400 Subject: [PATCH 4/4] Address eslint errors --- resources/js/vue/app.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/resources/js/vue/app.js b/resources/js/vue/app.js index e341055747..c2488ca673 100755 --- a/resources/js/vue/app.js +++ b/resources/js/vue/app.js @@ -8,6 +8,8 @@ import { relayStylePagination } from '@apollo/client/utilities'; import { DefaultApolloClient } from '@vue/apollo-composable'; const app = createApp({ + name: 'App', + components: { BuildConfigure: defineAsyncComponent(() => import('./components/BuildConfigure')), BuildNotesPage: defineAsyncComponent(() => import('./components/BuildNotesPage.vue')),