NUXTJS

  • Docs
  • Examples
  • FAQ
  • Blog
  • Video Courses new

Routing

  • Hello World
  • Active Link Classes
  • Dynamic Pages
  • Nested Pages

Data Fetching

  • asyncData Hook
  • fetch Hook

Asset Management

  • webpack Assets
  • Pre-processors

Transitions

  • Nuxt transitions

SEO

  • SEO HTML Head
  • SEO Twitter and Open Graph

Loading

  • Customize Nuxt Loading
  • Customize Nuxt Loading Indicator
  • Custom Loading Component

Miscellaneous

  • Layouts
  • Lazy Loading Components
  • Vuex Store
  • Nuxt Helpers

Middleware

  • Router Middleware
  • Named Middleware
  • Anonymous Middleware

Plugins

  • Vue Plugins
  • Client Only Plugins
  • External Packages Plugin
  • Custom Plugins

Modules

  • Local Module
  • Axios usage

Version 2.14.8

Routing

  • Hello World
  • Active Link Classes
  • Dynamic Pages
  • Nested Pages

Data Fetching

  • asyncData Hook
  • fetch Hook

Asset Management

  • webpack Assets
  • Pre-processors

Transitions

  • Nuxt transitions

SEO

  • SEO HTML Head
  • SEO Twitter and Open Graph

Loading

  • Customize Nuxt Loading
  • Customize Nuxt Loading Indicator
  • Custom Loading Component

Miscellaneous

  • Layouts
  • Lazy Loading Components
  • Vuex Store
  • Nuxt Helpers

Middleware

  • Router Middleware
  • Named Middleware
  • Anonymous Middleware

Plugins

  • Vue Plugins
  • Client Only Plugins
  • External Packages Plugin
  • Custom Plugins

Modules

  • Local Module
  • Axios usage

asyncData Hook

In this example:

pages/index.vue and pages/posts/_id use the asyncData hook and the $http module to fetch our list of mountains from our API.

Learn more about the http module.

Learn more about the asyncData hook the Features book in the Data Fetching chapter.

Loading CodeSandbox...
   

Contributors

Debbie O'Brien Debbie O'Brien pooya parsa pooya parsa Sébastien Chopin Sébastien Chopin Alexandre Chopin Alexandre Chopin

NuxtJS Newsletter

Get the latest Nuxt news to your inbox, curated by the NuxtJS team.

Discover

  • Our team
  • Design kit
  • Contact us

Help

  • Resources
  • Chat with us
  • Contribution guide

Support

  • Our Goodies Store
  • Sponsoring & donations
  • Training & consultancy
Deploys by Netlify
Docs Examples FAQ Blog Video Courses