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 - neveropen</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:
