[Vuejs]-Why is this error not letting me async render Vue Components?

by

4👍

✅

By wrapping defineAsyncComponent() in a function, you’re incorrectly declaring the Modal component as a function:

export default {
  components: {
        /* 👇 don't do this */
    Modal: () => defineAsyncComponent(() => import('@/components/Modal.vue'))
  },
}

The simplest solution is to remove the function wrapper:

export default {
  components: {
    Modal: defineAsyncComponent(() => import('@/components/Modal.vue'))
  },
}

demo

👤tony19

1👍

Looks like you’re mixing composition and options API

Try the following in the <script>

import { defineAsyncComponent, ref } from 'vue';
export default {
    setup() {
        const Modal = defineAsyncComponent(() => import('@/components/Modal.vue'));
        const showModal = ref(false);
        return {
            showModal,
            Modal
        }
    }
}
👤Jaromanda X

Leave a comment