Lazy Loading Components

In this example:

components/MountainsList.vue uses fetch to fetch data from an API and uses:

  • $fetchState.pending to show a loading message when waiting for the data to load.
  • $fetchState.error to show an error message if the component does not load.

pages/index.vue shows how to lazy load a component by prefixing it with the word "Lazy".

nuxt.config.js shows components: true for auto importing components.

Learn more in the Directory Structure book in the Components chapter.

Loading CodeSandbox...