Nuxt.js: import of async components

[simllll]

Hi all,
thanks for nuxt! I love this project. Still figuring out the feature rich possibilties with it, especially also with vue itself.
Now I'm kinda stuck with "async components" and as I couldn't find a related post I thought this could - in case it gets answered ;) - help other people as well.

I've tried to use the syntax mentioned here: https://vuejsdevelopers.com/2017/07/17/vue-js-2-4-important-features/ to load components asynchronous.

import SyncComponent from './SyncComponent.vue';
const AsyncComponent = import('./AsyncComponent.vue');

export default {
  components: {
    SyncComponent,
    AsyncComponent
  }
}

The befenit of this style should be that SSR stil works, but on the client it get's laoded via ajax. Unfortnautely this does not work. The AsyncComponent is not found in this case.

What does work though is
const AsyncComponent = () => import('~/AsyncComponent.vue');

But then as far as I can tell, SSR is not working.

any idea how to accomplish this correctly with nuxt? Or why it does not work by default? Has nuxt regardings async components something else to keep in mind?

Thanks
Simon

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

[dohomi]

@simllll did you try to use a relative path instead of "~"? I make use of async components heavily and it works good. even grouping them into webpack chunks works without issue:

    components: {
      'AdminBar': () => import('../components/layoutComponents/AdminBar.vue'),
      'MainFooter': () => import(/* webpackChunkName:'main-layout-components' */ '../components/layoutComponents/MainFooter.vue'),
      'PageToolbar': () => import(/* webpackChunkName:'main-layout-components' */ '../components/layoutComponents/PageToolbar.vue'),
      'MainSidebar': () => import(/* webpackChunkName:'main-layout-components' */ '../components/layoutComponents/MainSidebar.vue')
    },

[simllll]

Hi @dohomi,
thanks for your answer. Yeah, the approach you mentioned also works for me. But the downside is that server side rendering of this components is not happening in this case. Or does it in your case?

The "big" difference between the two cases are:
1.) (the working one). Return the import (which is a promise) inside a function. This unfortunately only allows the client to render it. no SSR.
2.) (not working) Return the import directly (not with es6 import .. from.. but with webpacks import(...)). This is at least mentioned in the blog post I've referred to. But somehow this does not work. SSR doesn't see the vue component.

regards
Simon

[simllll]

Thanks @clarkdo, have seen this post before and commented there as well. But this is a different issue, which seems to be resolved already or at least I'm not affected of it ;). My problem is just that I would like to have async components, but still have the ability to do full server side rendering.
Which is one of the vue js 2.4 big changes: "1. Server-Side Rendering Async Components" (see this blog post https://vuejsdevelopers.com/2017/07/17/vue-js-2-4-important-features/). But I don't get it to work for nuxt if I use the provided examples in this blog post.

UPDATE:
It seems SSR is working now. So it seems the correct syntax is the one that also @dohomi mentioned.
const AsyncComponent = () => import('~/AsyncComponent.vue');
SSR works, and on the client the files are loaded asynchronous (y)

Thanks
Simon

[clarkdo]

BTW, https://github.com/nuxt/nuxt.js/tree/dev/examples/async-component-injection is the example 😸

Add Vue doc: https://vuejs.org/v2/guide/components.html#Async-Components

[georgefeast]

@clarkdo Is there a way to dynamically register a component with a value that is pulled during async data? I tried your example above but am not sure if its possible to pass the value from asyncData to the async component import?

[clarkdo]

Yes, you can.
Same as https://github.com/nuxt/nuxt.js/blob/dev/examples/async-component-injection/pages/_slug.vue#L15-L17, just get $slug in asyncData.

[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.