1

Is there a way to display a Vuetify loader component until all the elements are loaded? If not it displays for a moment the {{ and }} and is not very aesthetic.

I have a big page and a lot of items, applying v-cloak on each item don't consider to be cool either, I prefer to display a loader.

serge
  • 13,940
  • 35
  • 121
  • 205
  • 2
    Vuetify uses vue, so there is likely no way to use vuetify before compilation finishes. I believe https://stackoverflow.com/a/36408687/752916 is still the best solution. – AlexMA Apr 02 '20 at 18:25

1 Answers1

4

The Vuetify overlay component is not a bad choice in this kind of instance. You can chose an opaque overlay with an indeterminate loader that you then hide when everything has loaded:

<template>
  <div>
    <div id="the-content">
      This is the stuff that gets hidden until it's loaded...
    </div>
    <v-overlay
      :opacity="1"
      :value="overlay"
    >
      <v-progress-circular indeterminate size="64">
        Loading...
      </v-progress-circular>
    </v-overlay>
  </div>
</template>

<script>
  export default {
    data: () => ({
      overlay: true,
    }),
    mounted() {
      // hide the overlay when everything has loaded
      // you could choose some other event, e.g. if you're loading
      // data asynchronously, you could wait until that process returns
      this.overlay = false
    }, 
  }
</script>

Note: in this example, you're not likely to see the loading overlay since the content on this page takes such a short time to actually load.

morphatic
  • 7,677
  • 4
  • 47
  • 61
  • I ask myself, in order to take into consideration the "overlay: true", the vue should be loaded.... so, until is not loaded that option does not affect the rendering of {{myvar}} – serge Apr 03 '20 at 08:35
  • I'm not sure what you're asking then. The [Vue component lifecycle diagram](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) shows the various times at which different aspects of your app will have been loaded. The `mounted()` event fires once a component has been loaded and rendered. Unless you needed to load some data that was external to the page (e.g. from a remote API) that should be sufficient to remove any "Loading..." indicators. It is possible to provide a default in your template by doing something like: `{{ myvar || "some default" }}` – morphatic Apr 03 '20 at 18:40