title: Nuxt, Vuetify skeleton loader while image loads
body: <p>I cannot find one proper example of loading an image with a skeleton loader. I'm using nuxt + Vuetify and I'm trying to use a simple image with a skeleton loader.</p>
  <p>Here is my code.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-skeleton-loader v-if=&quot;loading&quot; :loading=&quot;loading&quot; type=&quot;image&quot;&gt;
      &lt;v-card
        v-show=&quot;loaded&quot;
        class=&quot;ma-auto elevation-4&quot;
        shaped
        color=&quot;darkgreen&quot;
        width=&quot;500&quot;
        flat
      &gt;
        &lt;v-img
          src=&quot;/products/em-lucky-combo.jpg&quot;
          max-width=&quot;500&quot;
          @load=&quot;hasLoaded&quot;
        &gt;
        &lt;/v-img&gt;
      &lt;/v-card&gt;
    &lt;/v-skeleton-loader&gt;
  &lt;/template&gt;
  </code></pre>
  <p>my method</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  export default {
    methods: {
      hasLoaded() {
        console.log('Image finished loading')
  
        this.loading = false
        this.loaded = true
      },
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>But as I said the method never gets called when it is inside the <code>v-card</code> tag or directly in the skeleton loader.</p>
  <p>I have tried using <code>@load</code>, I have tried using mounted hooks like below.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  export default {
    mounted() {
      const readyHandler = () =&gt; {
        if (document.readyState === 'complete') {
          console.log('Document Rendered')
          this.loading = false
          this.loaded = true
          document.removeEventListener('readystatechange', readyHandler)
        }
      }
  
      document.addEventListener('readystatechange', readyHandler)
  
      readyHandler() // in case the component has been instantiated lately after loading
    },
  }
  &lt;/script&gt;
  </code></pre>
  <p>But nothing seems to work properly or elegantly. Is it just not possible? The moment the <code>&lt;v-img&gt;</code> tag is inside the skeleton loader or inside a <code>v-card</code> inside a skeleton loader it never gets rendered no matter what I do. One suggestion was to use a slot. I'm guessing it has something to do with slots but I do not understand how to use these.</p>
  <p>I tried doing something like this.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template v-slot:default&gt;
    &lt;v-card
      class=&quot;ma-auto elevation-4&quot;
      shaped
      color=&quot;darkgreen&quot;
      width=&quot;500&quot;
      transition=&quot;fade-transition&quot;
      flat
    &gt;
      &lt;v-img
        src=&quot;/products/em-lucky-combo.jpg&quot;
        max-width=&quot;500&quot;
        transition=&quot;fade-transition&quot;
        @load=&quot;imageLoaded&quot;
      &gt;&lt;/v-img&gt;
    &lt;/v-card&gt;
  &lt;/template&gt;
  </code></pre>
  <p>I tried using the code below.</p>
  <p><a href="https://stackoverflow.com/a/62609009/8816585">How to make v-skeleton loader inside v-for in Vuetify</a></p>
  <pre class="lang-html prettyprint-override"><code>&lt;v-img&gt;
    &lt;template #placeholder&gt;
      &lt;v-sheet&gt;
        &lt;v-skeleton-loader /&gt;
      &lt;/v-sheet&gt;
    &lt;/template&gt;
  &lt;/v-img&gt;
  </code></pre>