Lazy Loading Components
Use fetch in your components to fetch data from an API as well as auto importing and 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 Sandbox...
Edit this page on GitHub
Updated at Mon, Jul 12, 2021