We shouldn't use async components as lazy loaded routes... But why?

[christopherwk210]

This page of the docs clearly mention that you should not use async components as lazy-loaded dynamic import routes, but no explanation is given. Why not?

I have an app already in production that does this seemingly without issue, but I only just discovered this note in the docs. Obviously I wouldn't have done it that way had I known, so now I'm concerned because I'm using a forbidden technique.

Here's a sample that works perfectly fine for me:

Component sample (Calendar.vue)

<script setup lang="ts">
import { calendar } from '@/api';

const { success, data } = await calendar.index();
if (!success) throw new Error(data.message);

console.log(data);
</script>

<template>
  <div>This component works just fine.</div>
</template>

Router setup sample

import { createRouter, createWebHistory } from 'vue-router';
import DefaultLayout from '@/layouts/Default.vue';
import Login from '@/views/Login.vue';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/',
      component: DefaultLayout,
      children: [
        {
          path: 'calendar',
          name: 'Calendar',
          component: () => import('@/views/Calendar.vue')
        }
      ]
    },
    { path: '/:pathMatch(.*)*', name: 'NotFound', redirect: '/' },
  ]
});

export default router;

Sample layout (Default.vue)

<script setup lang="ts">
import { onErrorCaptured } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

onErrorCaptured((err) => {
  console.log(err);
  router.push('/login');
  return false;
});
</script>

<template>
  <div class="container">
    <RouterView v-slot="{ Component }">
      <template v-if="Component">
        <Transition name="fade-up" mode="out-in">
          <Suspense>
            <component :is="Component"></component>

            <template #fallback>
              <div>Loading...</div>
            </template>
          </Suspense>
        </Transition>
      </template>
    </RouterView>
  </div>
</template>

Versions:

• vue-router: ^4.1.6
• vue: ^3.2.45
• vite: ^4.0.0

[posva]

Your usage should be fine, the docs are referring to https://vuejs.org/guide/components/async.html#basic-usage

[christopherwk210]

Oh I see, yes I did see this but I think I got confused. I assumed that by including a top-level await that my component would automatically become an async component in the same way, but I suppose there's a difference?

Editing to add my realization that an async setup is not the same as an async component. Woops!