Не подгружается динамически компонент

Question

есть страница

<template>
  <div id="app" v-bind:class="{'_mobileLayout': !$device.isDesktop}">
    <Header/>
    <main>
      <Nuxt />
    </main>
    <Footer/>
    <component :is="MobileNav" v-if="!$device.isDesktop"/>
  </div>
</template>
<script>
  export default {
    components: {
      MobileNav: () => {
        return (!this.$device.isDesktop) ?
                import('~/components/navigation/Mobile/Nav') :
                null;
      }
    }
  }
</script>

при компиляции пишет

client.js?06a0:51 [Vue warn]: Property or method "MobileNav" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>

Answer 1

А если так?

<template>
  <div id="app" v-bind:class="{'_mobileLayout': !$device.isDesktop}">
    <Header/>
    <main>
      <Nuxt />
    </main>
    <Footer/>
    <component :is="MobileNav" v-if="!$device.isDesktop && loading"/>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        loading: false
      }
    },
    components: {
      MobileNav: () => {
        return (!this.$device.isDesktop) ?
                import('~/components/navigation/Mobile/Nav').then(() => { this.loading = true }) :
                null;
      }
    }
  }
</script>

Answer 2

А где вы собственно импортируете компонент? Я вижу его подключение в компонентс, но не вижу импорта. должно быть чтото типа такого

const MobileNav = () => import('@/components/MobileNav');

с вашим путем, естественно

БЛОГ НА HUSL

Не подгружается динамически компонент

Ответы (2 шт):