Lazy loading routes in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Home component lazily.

Vue

const Home = () => import([1]);

Drag options to blanks, or click blank then click option'

A'./components/Home.vue'

B'Home.vue'

C'./Home.vue'

D'components/Home.vue'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting the './' at the start of the path.

Using just the file name without path.

Omitting the file extension.

Lazy loading in Vue routes uses dynamic import with the relative path to the component file.

2fill in blank

medium

Complete the code to define a lazy loaded route for About component.

Vue

const routes = [{ path: '/about', component: [1] }];

Drag options to blanks, or click blank then click option'

A'./components/About.vue'

BAbout

C() => import('./components/About.vue')

Dimport('./components/About.vue')

Attempts:

3 left

💡 Hint

Common Mistakes

Using import without wrapping in a function.

Passing a string path instead of a function.

Using a component variable without lazy loading.

Lazy loaded routes use a function returning an import promise for the component.

3fill in blank

hard

Fix the error in the lazy loading syntax for the Contact component.

Vue

const Contact = [1];

Drag options to blanks, or click blank then click option'

A'./components/Contact.vue'

B'./Contact.vue'

C'Contact.vue'

D() => import('./components/Contact.vue')

Attempts:

3 left

💡 Hint

Common Mistakes

Calling import directly without a function.

Using incorrect path strings.

Missing arrow function syntax.

Lazy loading requires a function returning the import promise, not direct import call.

4fill in blank

hard

Fill both blanks to create a lazy loaded route with name 'Profile' and path '/profile'.

Vue

const routes = [{ path: [1], name: [2], component: () => import('./components/Profile.vue') }];

Drag options to blanks, or click blank then click option'

A'/profile'

B'Profile'

C'profile'

D'/Profile'

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around path or name.

Using wrong case or missing slash in path.

Confusing path and name values.

The path should be '/profile' as a string and the route name 'Profile' as a string.

5fill in blank

hard

Fill all three blanks to create a lazy loaded route with path '/dashboard', name 'Dashboard', and component imported from './views/Dashboard.vue'.

Vue

const routes = [{ path: [1], name: [2], component: () => import([3]) }];

Drag options to blanks, or click blank then click option'

A'/dashboard'

B'Dashboard'

C'./views/Dashboard.vue'

D'dashboard'

Attempts:

3 left

💡 Hint

Common Mistakes

Missing quotes around strings.

Using incorrect path or name casing.

Forgetting the './' in import path.

Use the exact path string '/dashboard', name 'Dashboard', and import path './views/Dashboard.vue'.