Props: 'shown'[controls visibility by v-model], 'images'[images to display in grid],

VuetifyFullScreenImageGrid.vue

<template>
  <v-dialog v-model="show" hide-overlay fullscreen transition="dialog-bottom-transition">
    <v-card>
      <v-card-actions pa-0>
        <v-spacer/>
        <v-btn dark small color="red" @click="show = false">Close</v-btn>
        <v-spacer/>
      </v-card-actions>
      <v-container pt-0>
        <v-layout>
          <v-flex xs12 sm10 md10 lg10 xl10 offset-sm1 offset-md1 offset-lg1>
            <v-dialog v-model="isZoomed" :max-width="zoomedImageSize" :max-height="zoomedImageSize">
              <v-card>
                <v-img
                  class="zoomed-image"
                  :src="getSelectedImage"
                  @click.stop="isZoomed = false"
                  :max-width="zoomedImageSize"
                  :max-height="zoomedImageSize"
                ></v-img>
              </v-card>
            </v-dialog>
            <v-card>
              <v-container grid-list-sm fluid>
                <v-layout row wrap>
                  <v-flex
                    v-for="(image, index) in images"
                    :key="index"
                    @click="setSelectedImage(image)"
                    xs4
                    d-flex
                    class="image-thumbnail"
                  >
                    <v-card flat tile class="d-flex">
                      <v-img :src="image" :lazy-src="image" aspect-ratio="1" class="purple">
                        <template v-slot:placeholder>
                          <v-layout fill-height align-center justify-center ma-0>
                            <v-progress-circular indeterminate color="grey lighten-5"/>
                          </v-layout>
                        </template>
                      </v-img>
                    </v-card>
                  </v-flex>
                </v-layout>
              </v-container>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      required: true
    },
    images: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedImage: null
    };
  },
  computed: {
    zoomedImageSize() {
      let v = this.$vuetify.breakpoint;
      return v.name === "sm" || v.name === "xs"
        ? v.height
        : v.name === "md"
        ? v.height - 80
        : v.height - 120;
    },
    getSelectedImage() {
      return this.selectedImage !== null ? this.selectedImage : "";
    },
    isZoomed: {
      get() {
        return this.selectedImage === null ? false : true;
      },
      set(status) {
        this.selectedImage = status === false ? null : "";
      }
    },
    show: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit("input", value);
      }
    }
  },
  methods: {
    setSelectedImage(url) {
      this.selectedImage = url;
    }
  }
};
</script>

<style scoped>
.zoomed-image {
  cursor: zoom-out;
}
.image-thumbnail {
  cursor: pointer;
}
</style>