Lazy

The v-lazy component is used to dynamically load components based upon an elements visibility.

Copy Page as Markdown

Usage

The v-lazy component by default will not render its contents until it has been intersected. Scroll down and watch the element render as you go past it.

Scroll down

The card will appear below:

<v-sheet
  ref="sheetRef"
  class="overflow-y-auto ma-4"
  :max-height="300"
  elevation="2"
>
  <div class="pa-6 text-center position-sticky">Scroll down</div>
  <v-responsive min-height="100vh"></v-responsive>

  <div class="text-center text-body-medium mb-12">
    The card will appear below:
  </div>

  <v-lazy
  v-model="isActive"
  :min-height="200"
  :options="{'threshold':0.5}"
  transition="fade-transition"
>
  <v-card
    class="mx-auto"
    color="primary"
    max-width="336"
    text="This card was rendered later"
    title="Lazy card"
  >
    <v-card-actions class="justify-center">
      <v-btn @click="reset">Reset Demo</v-btn>
    </v-card-actions>
  </v-card>
</v-lazy>
</v-sheet>

<script setup>
  import { ref, shallowRef } from 'vue'
  import { useGoTo } from 'vuetify'

  const goTo = useGoTo()

  const isActive = shallowRef(false)
  const sheetRef = ref()

  async function reset () {
    await goTo(0, { container: sheetRef.value.$el })

    isActive.value = false
  }
</script>