Fix app rendering

ba4cceb6 · Kasper Seweryn · Kasper Seweryn · 41edd42b · ba4cceb6 · ba4cceb6
Commit ba4cceb6 authored Apr 18, 2022 by Kasper Seweryn 🥞 Committed by Kasper Seweryn Jul 03, 2022
--- a/front/index.html
+++ b/front/index.html
@@ -59,7 +59,7 @@
  </style>
 </head>

-<body class="theme-light" id="body">
+<body id="body">
  <div id="fake-app">
    <div id="fake-sidebar">
      <div id="orange-square"></div>

--- a/front/src/components/Sidebar.vue
+++ b/front/src/components/Sidebar.vue
@@ -480,6 +480,7 @@ import Modal from '@/components/semantic/Modal.vue'

 import $ from 'jquery'
 import useThemeList from '@/composables/useThemeList'
+import useTheme from '@/composables/useTheme'

 export default {
  name: 'Sidebar',

--- a/front/src/composables/useTheme.ts
+++ b/front/src/composables/useTheme.ts
 import { useColorMode } from '@vueuse/core'
-import { watch } from '@vue/composition-api'

-const theme = useColorMode()
-
-document.body.classList.add(`theme-${theme.value}`)
-watch(theme, (newValue, oldValue) => {
-  document.body.classList.remove(`theme-${oldValue}`)
-  document.body.classList.add(`theme-${newValue}`)
+const theme = useColorMode({
+  selector: 'body',
+  modes: {
+    auto: '',
+    light: 'theme-light',
+    dark: 'theme-dark'
+  }
 })

 export default () => theme
--- a/front/src/main.ts
+++ b/front/src/main.ts
@@ -4,7 +4,9 @@ import VueLazyload from 'vue-lazyload'
 import store from '~/store'
 import { sync } from 'vuex-router-sync'
 import VueCompositionAPI, { createApp } from '@vue/composition-api'
-import { CreateElement } from 'vue'
+import Vue, { CreateElement } from 'vue'
+
+Vue.config.devtools = true

 logger.default.info('Loading environment:', import.meta.env.MODE)
 logger.default.debug('Environment variables:', import.meta.env)
@@ -14,13 +16,16 @@ sync(store, router)
 const app = createApp({
  store,
  router,
+  components: {
+    App: () => import('~/App.vue')
+  },
  data: () => ({ isMounted: false }),
  async mounted () {
    this.isMounted = true
  },
  render (h: CreateElement) {
    if (this.isMounted) {
-      return import('~/App.vue')
+      return h('app')
    }

    // TODO (wvffle): Import fake app component

--- a/front/src/modules/locale.ts
+++ b/front/src/modules/locale.ts
@@ -58,7 +58,7 @@ export const install: AppModule = ({ store, app }) => {
    document.documentElement.setAttribute('lang', htmlLocale)

    if (locale === 'en_US') {
-      Vue.prototype.$language.current = locale
+      Vue.config.language = locale
      store.commit('ui/momentLocale', 'en')
    }
  }, { immediate: true })