1# Do Not Use defineAsyncComponent with Vue Router
2 
3## Rule
4 
5Never use `defineAsyncComponent` when configuring Vue Router route components. Vue Router has its own lazy loading mechanism using dynamic imports directly.
6 
7## Why This Matters
8 
9Vue Router's lazy loading is specifically designed for route-level code splitting. Using `defineAsyncComponent` for routes adds unnecessary overhead and can cause unexpected behavior with navigation guards, loading states, and route transitions.
10 
11## Bad Code
12 
13```javascript
14import { defineAsyncComponent } from 'vue'
15import { createRouter, createWebHistory } from 'vue-router'
16 
17const router = createRouter({
18  history: createWebHistory(),
19  routes: [
20    {
21      path: '/dashboard',
22      // WRONG: Don't use defineAsyncComponent here
23      component: defineAsyncComponent(() =>
24        import('./views/Dashboard.vue')
25      )
26    },
27    {
28      path: '/profile',
29      // WRONG: This also won't work as expected
30      component: defineAsyncComponent({
31        loader: () => import('./views/Profile.vue'),
32        loadingComponent: LoadingSpinner
33      })
34    }
35  ]
36})
37```
38 
39## Good Code
40 
41```javascript
42import { createRouter, createWebHistory } from 'vue-router'
43 
44const router = createRouter({
45  history: createWebHistory(),
46  routes: [
47    {
48      path: '/dashboard',
49      // CORRECT: Use dynamic import directly
50      component: () => import('./views/Dashboard.vue')
51    },
52    {
53      path: '/profile',
54      // CORRECT: Simple arrow function with import
55      component: () => import('./views/Profile.vue')
56    }
57  ]
58})
59```
60 
61## Handling Loading States with Vue Router
62 
63For route-level loading states, use Vue Router's navigation guards or a global loading indicator:
64 
65```vue
66<script setup>
67import { ref } from 'vue'
68import { useRouter } from 'vue-router'
69 
70const router = useRouter()
71const isLoading = ref(false)
72 
73router.beforeEach(() => {
74  isLoading.value = true
75})
76 
77router.afterEach(() => {
78  isLoading.value = false
79})
80</script>
81 
82<template>
83  <LoadingBar v-if="isLoading" />
84  <RouterView />
85</template>
86```
87 
88## When to Use defineAsyncComponent
89 
90Use `defineAsyncComponent` for:
91- Components loaded conditionally within a page
92- Heavy components that aren't always needed
93- Modal dialogs or panels that load on demand
94 
95Use Vue Router's lazy loading for:
96- Route-level components (views/pages)
97- Any component configured in route definitions
98 
99## Key Points
100 
1011. Vue Router and `defineAsyncComponent` are separate lazy loading mechanisms
1022. Route components should use direct dynamic imports: `() => import('./View.vue')`
1033. Use navigation guards for route-level loading indicators
1044. `defineAsyncComponent` is for component-level lazy loading within pages
105 
106## References
107 
108- [Vue Router Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html)
109- [Vue.js Async Components Documentation](https://vuejs.org/guide/components/async)
110