Content jump in the first milliseconds

Question

I am creating dynamic pages using Nuxt. In the pages folder I have one file _url.vue. It contains the following code:

<template lang="pug">
    div
        component(
            v-for="component in components"
            :key="`${component.type}-${component.id}`"
            :is="`the-${component.type}`"
        )
</template>
<script>
// import vuex
export default {
    computed: {
        ...mapGetters('app', {
            components: 'getComponents'
        })
    }
}
</script>

setComponents happens at the middleware level:

export default async function ({ store }) {
    await store.dispatch('app/setPage')
}

In the first milliseconds of page load, the content "jumps" as the components are rendered on the fly. How can this situation be corrected?

Answer 1

I'd first try to import the components manually, to see where this all comes from: the components taking some time to get injected or the layout being displayed, just to be sure.

Then, I had a discussion about it here, you may give it a look: Vue: wait to render until all components are mounted

There are several ways of handling this kind of micro-jumping explained there. You can choose your own solution. Also depends if you're using your app as universal or SPA only.

Looks like require is a way to go but some alternative are also available.