Skip to content
Related Articles

Related Articles

Loading in Nuxt.js

View Discussion
Improve Article
Save Article
  • Last Updated : 19 Apr, 2022

In this article, we are going to learn how loading works in Nuxt.js. Nuxt.js is a free and open-source web application framework based on Vue.js, Node.js, Webpack, and Babel.js. Nuxt is inspired by Next.js, which is a framework of a similar purpose, based on React.js.

Introduction: Adding a loading screen to Nuxt.js apps can be a great way to improve user experience. There are a few different ways to do this, but in this article, we’ll focus on one method using the inbuilt functions of the Nuxt.js.

Create Nuxt.js Application:

Step 1: You can create a new Nuxt.js project using the below command:

npx create-nuxt-app gfg

Step 2: Now navigate to your app using the following command:

cd gfg

Project Structure: It will look like this.

Adding the Loading Bar: Nuxt.js provides you with a loading bar that you can use in your applications. To add the loading bar, add the below code in your index.vue file.

index.vue




<template>
    <div>
        <h3>This is the Home Page - GeeksforGeeks</h3>
    </div>
</template>
  
<script>
    export default {
        mounted() {
            this.$nextTick(() => {
                this.$nuxt.$loading.start()
                setTimeout(() => this.$nuxt.$loading.finish(), 2500)
            })
        }
    }
</script>


Here we are using $nuxt.$loading.start() to start the loading bar then we are giving a time out function.

Start the application: Run the application using the below code.

npm run dev

Output:

Customizing the Loading Bar: You can customize the properties like color, size, and duration of the loading bar. For this, add the below code in the nuxt.config.js file.

nuxt.config.js




export default {
  
    // Disable server-side rendering
    ssr: true,
    loading: {
        color: 'green',
        height: '6px'
    },
  
  
    // Global CSS
    css: [
        'view-design/dist/styles/iview.css'
    ],
  
    // Plugins to run before rendering page
    plugins: [
        '@/plugins/view-ui',
        { src: '~/plugins/vue-datepicker', ssr: false },
        { src: '~/plugins/vue-time', ssr: false },
    ],
  
    // Auto import components
    components: true,
  
    // Modules for dev and build (recommended)
    buildModules: [
    ],
  
    // Modules
    modules: [
    ],
  
    // Build Configuration
    build: {
    }
}


Start the application: Run the application using the below code.

npm run dev

Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!