Динамическая загрузка компонента Nuxtjs

Question

есть шаблон

<template>
  <div id="app">
    <Header/>
    <main>
      <Nuxt />
    </main>
    <Footer/>
    <CallModal/>
    <FormModal/>
    <PortfolioModal/>

  </div>
</template>
<script>
  import Header from "~/components/layout/Header"
  import Footer from "~/components/layout/Footer"
  import CallModal from '~/components/module/modal/CallModal'
  import PortfolioModal from '~/components/module/modal/PortfolioModal'
  import FormModal from '~/components/module/modal/FormModal'
  export default {
    components: {
      Header,
      Footer,
      CallModal,
      PortfolioModal,
      FormModal
    }
  }
</script>
<style scoped>

</style>

есть компонент мобильного меню Nav

<template>
    <nav>
        <a href="#services" @click.prevent="goToBlock" class="_navLink">Услуги</a>
        <a href="#portfolio" @click.prevent="goToBlock" class="_navLink">Наши работы</a>
        <a href="#reviews" @click.prevent="goToBlock" class="_navLink">Отзывы</a>
        <a href="#contacts" @click.prevent="goToBlock" class="_navLink">Контакты</a>
    </nav>
</template>

<script>
    export default {
        name: "Nav",
        methods: {
            goToBlock:  function (event) {
                let link = event.target.getAttribute('href')
                document.querySelector(link).scrollIntoView({ behavior: 'smooth', block: 'start'})
            }
        }
    }
</script>

<style scoped>

</style>

поставил пакет для определения типа устройства

https://github.com/nuxt-community/device-module

как подгрузить компонент Nav если $device.isTablet || $device.isMobile

Answer 1

Импорт динамически можно сделать через функцию таким образом

components: {
    Nav: () => { 
        //... 
        return import('../Nav'); //указать нужный путь
    }
}

Answer 2

будет вот так?

<template>
  <div id="app" v-bind:class="{'_mobileLayout': !$device.isDesktop}">
    <Header/>
    <main>
      <Nuxt />
    </main>
    <Footer/>
    <MobileNav v-if="!$device.isDesktop"/>
  </div>
</template>
<script>
  import Header from "~/components/layout/Header"
  import Footer from "~/components/layout/Footer"
  export default {
    components: {
      Header,
      Footer,
      CallModal,
      PortfolioModal,
      FormModal,
      MobileNav: () => {
        //...
        return import('~/components/navigation/Mobile/Nav'); //указать нужный путь
      }
    }
  }
</script>

Answer 3

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

Как показывает практика, лучше в шаблоне сделать как-то так:

    <component :is="MobileNav" v-if="!$device.isDesktop"/>

А в функции добавить тоже условие, например:

    MobileNav: () => {
        return (!$device.isDesktop) ?
            import('~/components/navigation/Mobile/Nav') : 
            null;
    }

В таком случае, компонент не будет загружен в шаблон.

Еще, если используете webpack, то можно собрать проект для двух случаев и увидеть, что чанков в динамической версии будет больше, а если одинакого, то компонент не отделен в отдельный чанк, а следственно загружается все вместе.

БЛОГ НА HUSL

Динамическая загрузка компонента Nuxtjs

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