Display a webpage once its design is completely loaded in Nuxt

Question

Display a webpage once its design is completely loaded in Nuxt

I have implemented a layout for my admin pages that displays user information in a consistent format, eliminating the need to fetch this data every time the page reloads.

However, I am facing an issue where the page does not wait for the layout to fully load before querying user information.

myLayout.vue

beforeMount() {
    // retrieving user info from the server using Vuex action
}

myPage.vue

layout: "myLayout"
...
mounted() {
    // fetching user info from the Vuex store
}

In this scenario, I anticipate beforeMount to be executed first in myLayout.vue,

but myPage.vue proceeds and triggers mounted before the Vuex action completes.

As a result, the lifecycle follows:

layout's beforeMount -> page's beforeMount -> page's mounted -> layout's mounted

due to the page not waiting for the layout's beforeMount to be finished.

Is there a way to delay the mounting of a page until after the layout has been completely loaded?

javascript vue.js nuxt.js

Answer 1

Answer №1

If you want to implement a middleware on your Layout, you can do so by adding it to run before the layout and consequently, your page.

export default {
  ...
  async middleware({ store }) {
    await store.dispatch('fetch-some-data-with-vuex')
  },
  ...
}

For more information, please visit: https://nuxtjs.org/docs/2.x/directory-structure/middleware/

Answer 2

If you want to implement a middleware on your Layout, you can do so by adding it to run before the layout and consequently, your page.

export default {
  ...
  async middleware({ store }) {
    await store.dispatch('fetch-some-data-with-vuex')
  },
  ...
}

For more information, please visit: https://nuxtjs.org/docs/2.x/directory-structure/middleware/

Answer 3

Answer №2

This is my unique solution.

The Nuxt component responsible for rendering the page is only mounted once the loading process is completed. I have implemented this by utilizing a variable along with a conditional statement.

layout.vue

<template>
  <Nuxt v-if="isLoaded" />
</template>

<script>
export default {
  data () {
    return {
      isLoaded: false,
    }
  },
  async created () {
    // perform necessary tasks

    this.isLoaded = true;
  },
}
</script>

Answer 4

This is my unique solution.

The Nuxt component responsible for rendering the page is only mounted once the loading process is completed. I have implemented this by utilizing a variable along with a conditional statement.

layout.vue

<template>
  <Nuxt v-if="isLoaded" />
</template>

<script>
export default {
  data () {
    return {
      isLoaded: false,
    }
  },
  async created () {
    // perform necessary tasks

    this.isLoaded = true;
  },
}
</script>

Answer 5

Answer №3

If you want to achieve this, you can follow these steps:

Within your design ( myDesign.vue ), trigger an event once your data is loaded

this.$root.$emit('design_completed', true);

Next, make sure to listen for the event in your page ( myPage.vue )

mounted(){
    this.$root.$on('design_completed', (status) => {
        // Retrieve user information from the Vuex store
    });
}

Answer 6

If you want to achieve this, you can follow these steps:

Within your design ( myDesign.vue ), trigger an event once your data is loaded

this.$root.$emit('design_completed', true);

Next, make sure to listen for the event in your page ( myPage.vue )

mounted(){
    this.$root.$on('design_completed', (status) => {
        // Retrieve user information from the Vuex store
    });
}

Display a webpage once its design is completely loaded in Nuxt

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to fill in fields on my webpage using a dropdown menu choice?

Troubleshooting a scenario where making edits to a mongoDB item does not result in any updates

Vuex has reserved this keyword

A tutorial on creating circular patterns within a pyramid structure using p5.js and matter.js

Is there a way to eliminate a specific input box using the jquery remove function?

To enhance user experience, consider incorporating a 'Next Page' feature after the completion of every four paragraphs,

unable to display items in the navigation bar according to the requirements

Unlocking the Power of Vue 3 Composition API for Section Rebuilding

Vue CLI-generated project experiencing issues with embedding Font Awesome code

asp.net website fully compressed using GZip

Utilize Jquery to transform 3 arrays into separate objects distinguished by unique IDs

Tips for sending Json data through a form to a controller and storing it in a database

A more efficient method for creating a nested array of distinct values using JavaScript

Right-align SELECT-OPTIONS text

Implementing dynamic title rendering based on image in vue.js

How can we fetch data from the server in Vue 2.0 before the component is actually mounted?

Is the process.env variable used universally for environmental variables, or is it specifically designed for use in Node.js

Acquire a Vue component on a separate page by clicking a button on another Vue component or an HTML button click

Issues with rendering in Next.jsORErrors encountered during rendering

Using Typescript to remove an element from an array inside another array