diff --git a/front/package.json b/front/package.json
index 85b0da8e8..44d3112ec 100644
--- a/front/package.json
+++ b/front/package.json
@@ -19,6 +19,7 @@
   "dependencies": {
     "@vue/compat": "3.2.33",
     "@vueuse/core": "8.2.6",
+    "@vueuse/integrations": "8.2.6",
     "axios": "0.26.1",
     "axios-auth-refresh": "3.2.2",
     "diff": "5.0.0",
@@ -37,11 +38,11 @@
     "text-clipper": "2.2.0",
     "vue": "3.2.33",
     "vue-gettext": "2.1.12",
-    "vue-lazyload": "1.3.4",
     "vue-plyr": "7.0.0",
     "vue-router": "4.0.14",
     "vue-upload-component": "2.8.22",
     "vue3-gettext": "2.2.0-alpha.1",
+    "vue3-lazyload": "0.2.5-beta",
     "vuedraggable": "2.24.3",
     "vuex": "4.0.2",
     "vuex-persistedstate": "4.1.0",
@@ -54,6 +55,7 @@
     "@types/jest": "27.4.1",
     "@types/jquery": "3.5.14",
     "@types/lodash-es": "4.17.6",
+    "@types/qs": "6.9.7",
     "@typescript-eslint/eslint-plugin": "5.19.0",
     "@vitejs/plugin-vue": "2.3.1",
     "@vue/eslint-config-standard": "6.1.0",
diff --git a/front/src/composables/useLogger.ts b/front/src/composables/useLogger.ts
new file mode 100644
index 000000000..d87ab008f
--- /dev/null
+++ b/front/src/composables/useLogger.ts
@@ -0,0 +1,2 @@
+import jsLogger from 'js-logger'
+export default (logger = 'default') => jsLogger.get(logger)
diff --git a/front/src/init/instance.ts b/front/src/init/instance.ts
index d36dd5c83..c3099c6e8 100644
--- a/front/src/init/instance.ts
+++ b/front/src/init/instance.ts
@@ -1,8 +1,9 @@
-import { AppModule } from '~/types'
+import { InitModule } from '~/types'
 import { watch } from 'vue'
 import axios from 'axios'
 
 export const install: InitModule = async ({ store, router }) => {
+  await store.dispatch('instance/fetchFrontSettings')
   watch(() => store.state.instance.instanceUrl, async () => {
     const [{ data }] = await Promise.all([
       axios.get('instance/nodeinfo/2.0/'),
diff --git a/front/src/init/lazyLoad.ts b/front/src/init/lazyLoad.ts
new file mode 100644
index 000000000..56065c20c
--- /dev/null
+++ b/front/src/init/lazyLoad.ts
@@ -0,0 +1,6 @@
+import { InitModule } from '~/types'
+import VueLazyload from 'vue3-lazyload'
+
+export const install: InitModule = ({ app }) => {
+  app.use(VueLazyload)
+}
diff --git a/front/src/main.ts b/front/src/main.ts
index 6044ef3bc..8511f3a15 100644
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -1,13 +1,13 @@
-import logger from '~/logging'
 import router from '~/router'
-import VueLazyload from 'vue-lazyload'
 import store from '~/store'
 import { createApp } from 'vue'
+import useLogger from '~/composables/useLogger'
 import useTheme from '~/composables/useTheme'
 useTheme()
 
-logger.default.info('Loading environment:', import.meta.env.MODE)
-logger.default.debug('Environment variables:', import.meta.env)
+const logger = useLogger()
+logger.info('Loading environment:', import.meta.env.MODE)
+logger.debug('Environment variables:', import.meta.env)
 
 const app = createApp({
   components: {
@@ -29,7 +29,6 @@ const app = createApp({
 
 app.use(router)
 app.use(store)
-app.use(VueLazyload)
 
 const modules: Promise<unknown>[] = []
 for (const module of Object.values(import.meta.globEager('./init/*.ts'))) {
@@ -40,10 +39,8 @@ for (const module of Object.values(import.meta.globEager('./init/*.ts'))) {
   }))
 }
 
-store.dispatch('instance/fetchFrontSettings').finally(async () => {
-  // Wait for all modules to load
-  await Promise.all(modules)
-
+// Wait for all modules to load
+Promise.all(modules).finally(() => {
   app.mount('#app')
-  logger.default.info('Everything loaded!')
+  logger.info('Everything loaded!')
 })
diff --git a/front/yarn.lock b/front/yarn.lock
index 4c720c081..af5b3092b 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -1560,6 +1560,11 @@
   resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.7.0.tgz#ea03e9f0376a4446f44797ca19d9c46c36e352dc"
   integrity sha512-RI1L7N4JnW5gQw2spvL7Sllfuf1SaHdrZpCHiBlCXjIlufi1SMNnbu2teze3/QE67Fg2tBlH7W+mi4hVNk4p0A==
 
+"@types/qs@6.9.7":
+  version "6.9.7"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
+  integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
+
 "@types/resolve@1.17.1":
   version "1.17.1"
   resolved "https://registry.yarnpkg.com/@types/resolve/-/resolve-1.17.1.tgz#3afd6ad8967c77e4376c598a82ddd58f46ec45d6"
@@ -1963,6 +1968,15 @@
     "@vueuse/shared" "8.2.6"
     vue-demi "*"
 
+"@vueuse/integrations@8.2.6":
+  version "8.2.6"
+  resolved "https://registry.yarnpkg.com/@vueuse/integrations/-/integrations-8.2.6.tgz#3db4371c302f7d7769b12e15d2afa080b15c32b6"
+  integrity sha512-qBgwbDdVbE97Crzj9ssiIZnfyaHu7+ROSzHlbqO+HNXBGbHQNIsiuSp73Vynd3WMpMQHINu2TFG/eG8gH56PAQ==
+  dependencies:
+    "@vueuse/core" "8.2.6"
+    "@vueuse/shared" "8.2.6"
+    vue-demi "*"
+
 "@vueuse/metadata@8.2.6":
   version "8.2.6"
   resolved "https://registry.yarnpkg.com/@vueuse/metadata/-/metadata-8.2.6.tgz#0e649ff5c784ac73d35f44f9758fac33f62e3e3f"
@@ -6735,11 +6749,6 @@ vue-jest@3.0.7:
     tsconfig "^7.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
-vue-lazyload@1.3.4:
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/vue-lazyload/-/vue-lazyload-1.3.4.tgz#2988998f6bc1a2027268f5b0cffa7a7e30e6ccb4"
-  integrity sha512-K0frbPQJuvFHVpdl/ov5CqCR/CHWeLGs8E8V1d/09DIETqBjeGhC1fLMmwUy3Go2Yd/VX610AZ7Mdn4B54592Q==
-
 vue-plyr@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/vue-plyr/-/vue-plyr-7.0.0.tgz#938257e2a4def4582b5803a16087371a8e96209e"
@@ -6786,6 +6795,11 @@ vue3-gettext@2.2.0-alpha.1:
     pofile "^1.1.3"
     tslib "^2.3.1"
 
+vue3-lazyload@0.2.5-beta:
+  version "0.2.5-beta"
+  resolved "https://registry.yarnpkg.com/vue3-lazyload/-/vue3-lazyload-0.2.5-beta.tgz#cf81237cd487ce14aa7c21af8bfd8b83fc1f5360"
+  integrity sha512-GVhJfL9Hcu+AvWsYmUwODivvt+gzpT0ztgAzZaUduoiTaGCv/qzhr0VwAQXfjGF3XFYFyOJsHlAi3/WE0P8XTQ==
+
 vue@3.2.33:
   version "3.2.33"
   resolved "https://registry.yarnpkg.com/vue/-/vue-3.2.33.tgz#7867eb16a3293a28c4d190a837bc447878bd64c2"