New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
shall we support defineAsyncComponent like vue3?or we have another way to support async component #365
Comments
You can just write your own wrapper for this (this is also a vue thing and not a nuxt thing so I hope there are some packages out there that implement that for vue2) For this import { defineAsyncComponent } from "vue"
// with some options
const AsyncFooWithOptions = defineAsyncComponent({
loader: () => import("./Foo.vue"),
loadingComponent: LoadingComponent,
errorComponent: ErrorComponent
}) you can write something like this (not shure how events, props work out of the box but you get the idea...) - this is not tested and my contain bugs: import { defineComponent, ref } from "vue"
function defineAsyncComponent({loader, loadingComponent, errorComponent}) {
return defineComponent({
setup() {
const status = ref(0)
const cmp = ref(null)
const load = loader()
load.then(() => status.value = 1)
load.catch(() => status.value = -1)
return { status, cmp }
},
render(h) {
if( status.value === 0) return h(loadingComponent)
else if( status.value === 1) return h(this.cmp.value)
else return h(errorComponent)
}
})
} |
@JanusSpark Very interesting suggestion, but I agree with @mathe42 that this is a matter for upstream Vue Composition API - do raise there. They might be open to a PR as it is not a principled decision not to have this helper: see vuejs/composition-api#390 (comment) |
just found https://vuejs.org/v2/guide/components-dynamic-async.html I think a complete wrapper would be function defineAsyncComponent(options) {
const component = options.loader()
return {
component,
loading: options.loadingComponent,
error: options.errorComponent,
delay: options.delay,
timeout: options.timeout
}
} I will create a issue (and maybe a PR) in vue/composition-api tomorow |
Implementation PR: vuejs/composition-api#644 |
Just got merged. |
馃啋 Your use case
want to use async component
馃啎 The solution you'd like
like defineAsyncComponent
vuejs/rfcs#148
The text was updated successfully, but these errors were encountered: