Cargando en Nuxt.js

En este artículo, vamos a aprender cómo funciona la carga en Nuxt.js. Nuxt.js es un marco de aplicación web gratuito y de código abierto basado en Vue.js, Node.js, Webpack y Babel.js. Nuxt está inspirado en Next.js, que es un marco de un propósito similar, basado en React.js.

Introducción: agregar una pantalla de carga a las aplicaciones Nuxt.js puede ser una excelente manera de mejorar la experiencia del usuario. Hay algunas formas diferentes de hacer esto, pero en este artículo, nos centraremos en un método que utiliza las funciones integradas de Nuxt.js.

Crear aplicación Nuxt.js:

Paso 1: puede crear un nuevo proyecto Nuxt.js usando el siguiente comando:

npx create-nuxt-app gfg

Paso 2: Ahora navegue a su aplicación usando el siguiente comando:

cd gfg

Estructura del proyecto: Se verá así.

Agregar la barra de carga: Nuxt.js le proporciona una barra de carga que puede usar en sus aplicaciones. Para agregar la barra de carga, agregue el siguiente código en su archivo 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>

Aquí estamos usando $nuxt.$loading.start() para iniciar la barra de carga y luego estamos dando una función de tiempo de espera.

Inicie la aplicación: Ejecute la aplicación utilizando el siguiente código.

npm run dev

Producción:

Personalización de la barra de carga: puede personalizar las propiedades como el color, el tamaño y la duración de la barra de carga. Para esto, agregue el siguiente código en el archivo 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: {
    }
}

Inicie la aplicación: Ejecute la aplicación utilizando el siguiente código.

npm run dev

Producción: