Async components for lazy loading in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue async component render initially?

Consider this Vue 3 async component setup using defineAsyncComponent:

import { defineAsyncComponent } from 'vue';

const AsyncComp = defineAsyncComponent(() => new Promise(resolve => {
  setTimeout(() => {
    resolve({ template: '
Loaded!
' });
  }, 2000);
}));

export default {
  components: { AsyncComp },
  template: ''
}

What will the user see immediately after the component starts loading?

A Nothing is rendered until the component finishes loading after 2 seconds.

B The text 'Loading...' is shown automatically during the 2 seconds delay.

C An empty space is rendered because no loading or error component is provided.

D The component throws an error because the async component is not awaited.

💡 Hint

Think about what Vue shows by default if no loading or error component is specified.

When using defineAsyncComponent without specifying a loading component, Vue renders nothing (empty space) while waiting for the async component to load.

📝 Syntax

intermediate

Which option correctly defines a Vue async component with a loading message?

You want to create an async component that shows a loading message while fetching. Which code snippet correctly implements this?

A

const AsyncComp = defineAsyncComponent(() => import('./MyComp.vue'), {
  loadingComponent: { template: '<p>Loading...</p>' }
});

B

const AsyncComp = defineAsyncComponent({
  loader: () => import('./MyComp.vue'),
  loadingComponent: { template: '<p>Loading...</p>' }
});

C

const AsyncComp = defineAsyncComponent({
  loader: () => import('./MyComp.vue'),
  loading: { template: '<p>Loading...</p>' }
});

D

const AsyncComp = defineAsyncComponent(() => import('./MyComp.vue'), {
  loading: { template: '<p>Loading...</p>' }
});

💡 Hint

Check the property names expected by defineAsyncComponent when using an options object.

The correct property for the loading component is loadingComponent. It must be used inside an options object with a loader function.

🔧 Debug

advanced

Why does this async component cause a runtime error?

Look at this Vue async component definition:

const AsyncComp = defineAsyncComponent(() => {
  return import('./MyComp.vue').then(module => module.default);
});

When used, it throws: TypeError: module.default is not a constructor. Why?

A Because the import returns a module object, but the component is exported as a named export, not default.

B Because the import promise resolves to the component itself, not an object with a default property.

C Because the arrow function lacks braces and does not return the promise correctly.

D Because the async function returns the component instance instead of the component definition.

💡 Hint

Check how the component is exported in MyComp.vue.

If the component is exported as a named export, accessing module.default is undefined, causing the error. You must import the named export correctly.

❓ state_output

advanced

What is the rendered output after 3 seconds?

Given this Vue 3 component using async loading:

import { defineAsyncComponent, ref } from 'vue';

const AsyncComp = defineAsyncComponent({
  loader: () => new Promise(resolve => {
    setTimeout(() => resolve({ template: '
Async Loaded
' }), 2000);
  }),
  loadingComponent: { template: '
Loading...
' },
  delay: 500
});

export default {
  components: { AsyncComp },
  template: ''
};

What will the user see after 3 seconds?

A The text 'Loading...' because the loading component stays visible indefinitely.

B Nothing is shown because the delay hides the loading component.

C An error message because the async component failed to load.

D The text 'Async Loaded' because the async component finished loading after 2 seconds.

💡 Hint

Consider the delay and loading time carefully.

The async component loads after 2 seconds. The loading component shows after 0.5 seconds delay. After 3 seconds, the async component is fully loaded and rendered.

🧠 Conceptual

expert

Which statement about Vue async components is TRUE?

Choose the correct statement about Vue 3 async components and lazy loading.

A You can specify error and timeout components to handle loading failures gracefully.

B Async components always block rendering until fully loaded, causing UI freeze.

C Async components cannot be used with suspense in Vue 3.

D Lazy loading async components requires manual import and cannot use dynamic import syntax.

💡 Hint

Think about Vue 3 features for async components and error handling.

Vue 3 allows specifying error and timeout components in async component options to show UI feedback if loading fails or takes too long.