Expand the image by clicking on it (vuetify)

Question

I am continuing to use vuetify for my small personal project to study vue and vuetify well, i am using v-col and v-img to create a gallery of images and i would like to click on each image to go to full screen (in style lightbox) but it seems that vuetify doesn't have this native capability, is it possible? it seems strange that there is not. Can anyone suggest me a solution? Sorry maybe the silly question but as said i'm a beginner

I am attaching the code

    <template>
  <div class="gallery">
    <h1 class="subtitle-1 grey--text pa-2 d-flex justify-center">Galleria</h1>
   <v-divider></v-divider>
   <v-container class="my-5">
       <div>
         <v-row>
    <v-col v-for="item in items" :key="item.id" class="d-flex child-flex" cols="4" >
      <v-img :src="item.src" contain class="grey lighten-2">
        <template v-slot:placeholder>
          <v-row class="fill-height ma-0" align="center" justify="center">
            <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
          </v-row>
        </template>
      </v-img>
    </v-col>
  </v-row>
       </div>
   </v-container>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Gallery',

  data(){
    return {
      items: [
        {id: 1, src: require("../assets/images/img1.jpg")},
        {id: 2, src: require("../assets/images/img2.jpg")},
        {id: 3, src: require("../assets/images/img3.jpg")},
        {id: 4, src: require("../assets/images/img4.jpg")},
        {id: 5, src: require("../assets/images/img5.jpg")},
        {id: 6, src: require("../assets/images/img6.jpg")},
        {id: 7, src: require("../assets/images/img7.jpg")},
        {id: 8, src: require("../assets/images/img8.jpg")},
      ]
    }
  }

}
</script>

Answer 1

You could toggle the fullscreen onClick @click="toggleFullscreen(element)" on your img, but you would need to provide the Element e.g. by Ref or Id. An example toggle method:

toggleFullscreen(element) {
   if (document.fullscreenElement) { 
     return document.exitFullscreen() // exit fullscreen on next click
   }
   if (element.requestFullscreen) {
     element.requestFullscreen()
   } else if (this.element.webkitRequestFullscreen) {
     element.webkitRequestFullscreen() // Safari
   } else if (this.element.msRequestFullscreen) {
     element.msRequestFullscreen() // IE11
   }
 }

References: https://www.w3schools.com/jsref/met_element_requestfullscreen.asp, https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen