load drawer menuitems async with async setup() and <Suspense>, but nothing showed up

[softboy99]

In your application template all of the menuitems are statically. Howerver, in real world, the menuitems are dynamically loaded from the server.

<!-- eslint-disable vue/valid-v-model -->
  <dx-drawer
    class="layout-body"
    position="before"
    template="default"
    v-model:opened="menuOpened"
    :opened-state-mode="drawerOptions.menuMode"
    :reveal-mode="drawerOptions.menuRevealMode"
    :min-size="drawerOptions.minMenuSize"
    :shading="drawerOptions.shaderEnabled"
    :close-on-outside-click="drawerOptions.closeOnOutsideClick"
  >

<!-- eslint-enabled -->
  <dx-scroll-view ref="scrollViewRef" class="with-footer">
    <slot />
    <slot name="footer" />
  </dx-scroll-view>   
    <Suspense>
      <template #default> 
              <side-nav-menu
              :compact-mode="!menuOpened"
              @click="handleSideBarClick"
            />
      </template>
    </Suspense>
  <!-- eslint-enable -->
</dx-drawer>

` `