Nuxt Не удалось выполнить «appendChild» на «Node» при попытке получить размер окна

Question

Проблема в том, что проект должен быть перенесен в Nuxt, а часть кода не работает. А именно, размер экрана должен выполнять действия с текстом. Поскольку Nuxt является SSR, код не может быть выполнен на стороне сервера, поскольку он не знает размер окна.

Можно ли как-то реализовать эту идею, чтобы все работало? У меня есть проект с nuxt и i18n

[nuxt] Error while initializing app DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.
    at Object.Je [as appendChild] 

это мой компонент vue Этот код является примером того, что вызывает ошибку.

<template>
    <section>
        <div>           
            <h2 class="subtitle" v-html="filterHeadSlogan"></h2>            
        </div>
    </section>
</template>
<script>
  export default {
    name: 'testapp',
    data() {
      return {
        filterHeadSlogan: '',
        windowWidth: 0
      }
    },
    methods: {
      getWindowWidth(event) {
        this.windowWidth = document.documentElement.clientWidth
        var str = "<i>HELLO WORLD</i>"
        if (this.windowWidth >= 960) {
          this.filterHeadSlogan = str
        } else {
          this.filterHeadSlogan = str.replace(/<\/?[^>]+(>|$)/g, '')
        }
      }
    },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('resize', this.getWindowWidth);
        //Init
        this.getWindowWidth()
      })
    }

  }
</script>

Answer 1

Произошла ошибка, поскольку в переменной не было данных. Деревня появилась, но данных не было и возник конфликт. Я создал asyncData

  async asyncData(){
        return {
          headSlogan: ""
        }
      },

Полный код

<template>
    <div class="westartslogan">
        <div class="head-slogan">
            <h2 v-html="headSlogan"></h2>
        </div>
        <h3>{{$t('page.home.wellcom_block_subtitle_left')}}</h3>
        <ul>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_1_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_2_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_3_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_4_left')"></div></li>
            <li><i class="icon"></i>
                <div v-html="$t('page.home.wellcom_block_option_5_left')"></div></li>
        </ul>

        <div class="startcalc-btn button-container">
            <nuxt-link   :to="getLocalizedRoute({ name: 'calculator' })"  class="uk-button uk-button-default">{{
                $t('page.home.wellcom_button_calculator') }}
            </nuxt-link >
        </div>
        <div class="ourproject-btn uk-hidden@s">
            <div class="button-container">
                <nuxt-link :to="getLocalizedRoute({ name: 'portfolio' })" class="uk-button uk-button-default">
                   {{ $t('page.home.wellcom_button_portfolio') }}
                </nuxt-link>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
      async asyncData(){
        return {
          headSlogan: ""
        }
      },
      name: 'we_can',
      data () {
        return {
          filterHeadSlogan: '',
          headSlogan:  this.$i18n.t('page.home.wellcom_block_title_left'),
          windowWidth: 0
        }
      },
     methods: {
       getWindowWidth (event) {
         this.windowWidth = document.documentElement.clientWidth
         if (this.windowWidth >= 960) {
           this.headSlogan = this.headSlogan
         } else {
           var str = this.headSlogan
           this.headSlogan = str.replace(/<\/?[^>]+(>|$)/g, '')
         }
       }
     },
    mounted() {
      this.$nextTick(function () {
        window.addEventListener('resize', this.getWindowWidth);
          //Init
          this.getWindowWidth()
      })
    }

  }
</script>

<style scoped>

</style>