diff --git a/resources/assets/src/index.tsx b/resources/assets/src/index.tsx
index b05fcb43..3b140c67 100644
--- a/resources/assets/src/index.tsx
+++ b/resources/assets/src/index.tsx
@@ -1,15 +1,12 @@
-import Vue from 'vue'
 import * as React from 'react'
 import ReactDOM from 'react-dom'
 import './scripts/app'
 import routes from './scripts/route'
 import * as emitter from './scripts/event'
 
-Vue.config.productionTip = false
-
 loadModules()
 
-function loadModules() {
+async function loadModules() {
   if (blessing.route.startsWith('admin')) {
     const entry = document.querySelector<HTMLAnchorElement>('#launch-cli')
     entry?.addEventListener('click', async () => {
@@ -44,6 +41,9 @@ function loadModules() {
       })
     }
     if (route.component) {
+      const { default: Vue } = await import('vue')
+      const { default: inject } = await import('./scripts/injectVue')
+      inject(Vue)
       Vue.prototype.$route = new RegExp(`^${route.path}$`, 'i').exec(
         blessing.route,
       )
diff --git a/resources/assets/src/scripts/i18n.ts b/resources/assets/src/scripts/i18n.ts
index 71d2d1c7..42a635ae 100644
--- a/resources/assets/src/scripts/i18n.ts
+++ b/resources/assets/src/scripts/i18n.ts
@@ -1,5 +1,3 @@
-import Vue from 'vue'
-
 export function trans(key: string, parameters = Object.create(null)): string {
   const segments = key.split('.')
   let temp = (blessing.i18n) as {
@@ -27,23 +25,4 @@ export function trans(key: string, parameters = Object.create(null)): string {
 
 export const t = trans
 
-Vue.use(_Vue => {
-  // eslint-disable-next-line @typescript-eslint/unbound-method
-  _Vue.prototype.$t = trans
-  _Vue.directive('t', (el, { value }) => {
-    if (typeof value === 'string') {
-      el.textContent = trans(value)
-    } else if (typeof value === 'object') {
-      el.textContent = trans(value.path, value.args)
-    } else {
-      /* istanbul ignore next */
-      // eslint-disable-next-line no-lonely-if
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.warn('[i18n] Invalid arguments in `v-t` directive.')
-      }
-    }
-  })
-})
-
 Object.assign(window, { trans })
diff --git a/resources/assets/src/scripts/injectVue.ts b/resources/assets/src/scripts/injectVue.ts
new file mode 100644
index 00000000..3a1c85fd
--- /dev/null
+++ b/resources/assets/src/scripts/injectVue.ts
@@ -0,0 +1,42 @@
+import type { VueConstructor } from 'vue'
+import { t } from './i18n'
+import * as fetch from './net'
+
+export default function (Vue: VueConstructor) {
+  injectI18n(Vue)
+  injectFetch(Vue)
+}
+
+function injectI18n(Vue: VueConstructor) {
+  Vue.use((_Vue) => {
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    _Vue.prototype.$t = t
+    _Vue.directive('t', (el, { value }) => {
+      if (typeof value === 'string') {
+        el.textContent = t(value)
+      } else if (typeof value === 'object') {
+        el.textContent = t(value.path, value.args)
+      } else {
+        /* istanbul ignore next */
+        // eslint-disable-next-line no-lonely-if
+        if (process.env.NODE_ENV !== 'production') {
+          // eslint-disable-next-line no-console
+          console.warn('[i18n] Invalid arguments in `v-t` directive.')
+        }
+      }
+    })
+  })
+}
+
+function injectFetch(Vue: VueConstructor) {
+  Vue.use((_Vue) => {
+    Object.defineProperty(_Vue.prototype, '$http', {
+      get: () => ({
+        get: fetch.get,
+        post: fetch.post,
+        put: fetch.put,
+        del: fetch.del,
+      }),
+    })
+  })
+}
diff --git a/resources/assets/src/scripts/net.ts b/resources/assets/src/scripts/net.ts
index 915e20f2..fa546293 100644
--- a/resources/assets/src/scripts/net.ts
+++ b/resources/assets/src/scripts/net.ts
@@ -1,4 +1,3 @@
-import Vue from 'vue'
 import { emit } from './event'
 import { showModal } from './notify'
 import { trans, t } from './i18n'
@@ -144,17 +143,6 @@ export function del<T = any>(url: string, data = empty): Promise<T> {
   return nonGet<T>('DELETE', url, data)
 }
 
-Vue.use(_Vue => {
-  Object.defineProperty(_Vue.prototype, '$http', {
-    get: () => ({
-      get,
-      post,
-      put,
-      del,
-    }),
-  })
-})
-
 blessing.fetch = {
   get,
   post,