feat: better type definition for global axios()

Signed-off-by: Fery Wardiyanto <ferywardiyanto@gmail.com>

resources/client/bootstrap.ts

@@ -1,14 +1,13 @@
-import { captureException } from '@sentry/vue'
-import axios from 'axios'
-import type { AxiosError, AxiosStatic } from 'axios'
 import { format } from 'date-fns'
 import { enUS as en, id } from 'date-fns/locale'
 
 declare global {
+  const dateFormat: (date: Date, fmt: string) => string
+  const numberFormat: (num: number) => string
+
   interface Window {
-    dateFormat: (date: Date, fmt: string) => string
-    numberFormat: (num: number) => string
-    axios: AxiosStatic
+    dateFormat: typeof dateFormat
+    numberFormat: typeof numberFormat
   }
 }
 
@@ -24,24 +23,6 @@ window.numberFormat = (num: number) => {
   return new Intl.NumberFormat(document.documentElement.lang).format(num)
 }
 
-axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
-axios.defaults.withCredentials = true
-axios.interceptors.response.use(response => response, (error: AxiosError) => {
-  // if (error.response?.status === 401)
-  //   window.location.replace('/login')
-
-  if (error.response?.status === 422)
-    return error.response
-
-  // whatever you want to do with the error
-  captureException(error)
-})
-
-if (import.meta.env.VITE_API_URL)
-  axios.defaults.baseURL = import.meta.env.VITE_API_URL
-
-window.axios = axios
-
 // const dataLayer = window.dataLayer || []
 // const gtag = window.gtag = (...args) => dataLayer.push(args)
 

resources/client/modules/axios.ts

@@ -0,0 +1,25 @@
+import { captureException } from '@sentry/vue'
+import axios from 'axios'
+import type { AxiosError } from 'axios'
+
+axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'
+axios.defaults.withCredentials = true
+axios.interceptors.response.use(response => response, (error: AxiosError) => {
+  // if (error.response?.status === 401)
+  //   window.location.replace('/login')
+
+  if (error.response?.status === 422)
+    return error.response
+
+  // whatever you want to do with the error
+  captureException(error)
+})
+
+if (import.meta.env.VITE_API_URL)
+  axios.defaults.baseURL = import.meta.env.VITE_API_URL
+
+window.axios = axios
+
+export const install: AppModuleInstall = ({ app }): void => {
+  app.config.globalProperties.$axios = axios
+}

resources/client/shim.d.ts

@@ -1,3 +1,4 @@
+import type { AxiosStatic } from 'axios'
 import type Router from 'ziggy/Router'
 import { Ziggy } from '~/ziggy.cjs'
 
@@ -6,12 +7,18 @@ export {}
 type ZiggyRoutes = typeof Ziggy.routes
 
 declare global {
+  const axios: AxiosStatic
   function route(): Router
   function route(name: keyof ZiggyRoutes, params?: Record<string, any>, absolute?: boolean): string
+
+  interface Window {
+    axios: AxiosStatic
+  }
 }
 
 declare module 'vue' {
   interface ComponentCustomProperties {
     $route: typeof route
+    $axios: AxiosStatic
   }
 }