Considérations importantes

La fonctionnalité de chargement asynchrone des composants via defineAsyncComponent dans Vue.js est exclusive aux environnements web (H5). Elle n'est pas supportée pour les applications natives (APP) ni pour les WeChat Mini Programs.

Pour ces plateformes, il est possible d'implémenter une alternance de composants (sans chargement asynchrone) avec le code suivant :

Template :

<button @click="switchComp">Charger le composant</button>
<component :is="activeComponent"></component>

Script :

import StaticComp from '@/components/StaticComp.vue'
const activeComponent = ref(null)
function switchComp() {
    activeComponent.value = StaticComp
}

Implémentation du chargement asynchrone en environnement H5

Approche 1 : Appel simpliifé de defineAsyncComponent

Template :

<template>
    <div class="wrapper">
        <button @click="initialize">Charger le composant</button>
        <component :is="dynamicComp"></component>
    </div>
</template>

Script :

<script setup>
import { defineAsyncComponent, shallowRef } from 'vue'

const asyncElement = defineAsyncComponent(() => import('./components/AsyncModule.vue'))
const dynamicComp = shallowRef(null)

const initialize = () => {
    dynamicComp.value = asyncElement
}
</script>

Approche 2 : Configuration avancée avec options

Template :

<template>
    <div class="container">
        <button @click="initialize">Charger le composant</button>
        <component :is="dynamicComp"></component>
    </div>
</template>

Script :

<script setup>
import { ref, defineAsyncComponent, shallowRef } from 'vue'
import Spinner from '@/components/Spinner.vue'
import ErrorDisplay from '@/components/ErrorDisplay.vue'

const advancedAsync = defineAsyncComponent({
    loader: () => import('./modules/DataViz.vue'),
    loadingComponent: Spinner,
    errorComponent: ErrorDisplay,
    timeout: 3000
})

const dynamicComp = shallowRef(null)
const initialize = () => {
    dynamicComp.value = advancedAsync
}
</script>

Approche 3 : Utiilsation du composant Suspense intégré

Cette méthode repose entièrement sur le template. Notez que le compoasnt Suspense est expérimental et susceptible de changements.

<Suspense>
    <template #default>
        <AsyncWidget />
    </template>
    <template #fallback>
        <LoadingIndicator />
    </template>
</Suspense>