Как при загрузке страницы поставить класс body?

Question

[Максим]

есть шаблон default.vue

как при загрузке шаблона сделать проверку, если ночь то боди ставим класс, сейчас все работает, но при перезагрке страницы видно, как белый шаблон меняется на темный, а можно сделать, чтобы пользователи не видели смену?

<template>
  <div id="app">
    <Header />
    <button @click.prevent="toggleTheme()">
      hjnkm
    </button>
    <main>
      <Nuxt />
    </main>
    <Footer />
    <HappyClientModal />
    <ProductPreviewModal />
  </div>
</template>
<script>
export default {
  data () {
    return {
      isDark: true,
      currentTime: new Date().getHours()
    }
  },
  created () {
    if (this.currentTime > 18 || this.currentTime < 6) {
      this.isDark = true
    }
  },
  beforeMount () {
    const bodyElement = document.body
    if (this.isDark) {
      bodyElement.classList.add('dark-theme')
    }
  }
}
</script>
<style lang="scss" module>
  main{
    padding-top: 90px;
  }
</style>>

Answer 1

[Алекс Глебов]

Использовать прелоадер. Либо задавать тему при ssr, по времени сервера.

Comments

[Максим]

а это как?

[Алекс Глебов]

В событии nuxtserverinit в store задавать тему.
Класс на боди можно так повесить

head() {
    return {
      bodyAttrs: {
        class: "theme"
      }

Answer 2

[Алексей Ярков]

v-cloak погуглите

Comments

[Максим]

а как применить к body?