Component is loaded without scroll

[adrianoresende]

Why this code, the component foo is loaded without scroll?

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <br v-for="x in 80" :key="x">

    <LazyHydrate when-visible :trigger-hydration="documentLoaded">
      <foo />
    </LazyHydrate>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import LazyHydrate from 'vue-lazy-hydration'

export default {
  name: 'app',
  data() {
    return {
      documentLoaded: false,
    }
  },
  components: {
    HelloWorld,
    LazyHydrate,
    Foo: () => import(/* webpackChunkName: "component-foo" */ './components/Foo.vue'),
  }
}
</script>

Console:

[maoberlehner]

Hello! Thank you for submitting a bug report. Please add a reproduction link on CodeSandbox or something similar. Thx!

Generally speaking, unfortunately, if you're using a system which uses the Vue template renderer in the background, components are loaded even though they are not visible (but they're still not hydrated / executed). There is a feature request open in the Vue.js repository which might make it possible to change this: https://github.com/vuejs/vue/issues/9847

[maoberlehner]

Closing this because of inactivity and because it's most likely related to https://github.com/vuejs/vue/issues/9847