Nuxt 3 is coming.. Discover more about it here!

Docs Examples Resources Blog Video courses
  • English
  • Français
  • Routing
    • Hello World
    • Active Link Classes
    • Dynamic Pages
    • Nested Pages
  • Data Fetching
  • Assets Management
  • Transitions
  • Seo
  • Loading
    • Customize Nuxt Loading
    • Customize Nuxt Loading Indicator
    • Custom Loading Component
  • Miscellaneous
  • Middlewares
  • Plugins
  • Modules
  • English
  • Français
  • Routing
    • Hello World
    • Active Link Classes
    • Dynamic Pages
    • Nested Pages
  • Data Fetching
  • Assets Management
  • Transitions
  • Seo
  • Loading
    • Customize Nuxt Loading
    • Customize Nuxt Loading Indicator
    • Custom Loading Component
  • Miscellaneous
  • Middlewares
  • Plugins
  • Modules

Customize Nuxt Loading

Create a custom loading component to replace the default loader


In this example:

nuxt.config.js contains the loading property which modifies the default loader

pages/loading.vue programmatically starts the loader so we force the page to take 2 seconds to load

Learn more in the Features book in the Loading chapter.
Loading Sandbox...
Edit this page on GitHub Updated at Mon, Jul 12, 2021

Seo SEO Twitter and Open Graph
Loading Customize Nuxt Loading Indicator

Partners

  • Netlify
  • Google Chrome
  • Vercel
  • Strapi
  • Swell
  • Ship Shape
  • Layer0
  • Storyblok
Support Us
A landscape image A landscape image

Discover

  • Our team
  • Design Kit
  • Contact us

Help

  • Resources
  • Chat with us
  • Contribution guide

Support

  • Sustainability
  • Training

Settings

Subscribe to our newsletter

The latest news, articles, and resources, sent to your inbox monthly.

NuxtJS is an open source framework under MIT license.