Nuxt.js: Async load component?

[veresnikov]

I want load vue-awesome-swiper full asynchronously (include css) for optimize first time load site (load speed). Exclude plugins, modules, because it loading before site loaded. I need it async,later. How i can do this?

// TEMPLATE (pug)
no-ssr
        vue-awesome-swiper

// SCRIPT
  let VueAwesomeSwiper
  if (process.browser) {
    VueAwesomeSwiper = require('vue-awesome-swiper/ssr')
  }

  export default{
    components: {VueAwesomeSwiper}
  }

// STYLE (stylus)
@import "swiper/dist/css/swiper.css"

And how cache it for used on another pages? what problems can there be?

_{This question is available on Nuxt.js community (#c1801)}

[clarkdo]

https://nuxtjs.org/guide/views#default-meta-tags and https://nuxtjs.org/api/configuration-css#the-css-property may help you.

[veresnikov]

@clarkdo I need a load component after page loaded. On created () or on demand. For example: index page has component slider, whose use vue-awesome-swiper lib. Page loaded without style and js of vue-awesome-swiper, only site css, on slider space used preloader gif. After that, i need load this slider lib with css and js, slider appears on index page. I need this.

[clarkdo]

You can use Async Componenst and Dyanmic Componenst in Vue.js

<template>
  <div>
    <component :is="asyncComp"></component>
    <button @click="clickBtn">Click Me</button>
  </div>
</template>

<script>
export default {
  data: () => ({
    asyncComp: ''
  }),
  components: {
    'example': () => {
      import('@/components/example')
    }
  },
  clickBtn() {
    this.asyncComp = 'example'
  }
}
</script>

[veresnikov]

figured out, thanks!

[mxmaxime]

Hi,
@clarkdo it doesn't work for me, I have to return the import, example:

    'post-share': () =>
      import(
        /* webpackChunkName: "PostShare" */
        '@/components/Post/Share/Share.vue'
      )

I can't find documentation about lazyloading, it's weird.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.