How to implement a responsive image gallery in Vue.js



Image not found!!

Implementing a responsive image gallery in Vue.js involves creating components and managing the state of the gallery. Below is a basic example of how you can achieve this. In this example, I'll use Vue.js along with the Bootstrap CSS framework for styling. You can customize it further based on your needs.

  1. First, make sure you have Vue.js and Bootstrap installed in your project:
bash
# Install Vue.js
npm install vue

# Install Bootstrap
npm install bootstrap
  1. Create a new Vue component for the image gallery. Let's call it ImageGallery.vue.
html
<!-- ImageGallery.vue -->
<template>
  <div class="image-gallery">
    <div class="row">
      <div v-for="(image, index) in images" :key="index" class="col-md-4 mb-3">
        <img
          :src="image.src"
          :alt="image.alt"
          class="img-fluid"
          @click="openImage(index)"
        />
      </div>
    </div>

    <div v-if="selectedImage !== null" class="modal" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ images[selectedImage].alt }}</h5>
            <button type="button" class="close" @click="closeImage" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <img :src="images[selectedImage].src" :alt="images[selectedImage].alt" class="img-fluid" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'path/to/image1.jpg', alt: 'Image 1' },
        { src: 'path/to/image2.jpg', alt: 'Image 2' },
        // Add more images as needed
      ],
      selectedImage: null,
    };
  },
  methods: {
    openImage(index) {
      this.selectedImage = index;
    },
    closeImage() {
      this.selectedImage = null;
    },
  },
};
</script>

<style scoped>
/* Add your custom styling here if needed */
</style>
  1. Import and use the ImageGallery component in your main Vue instance or another parent component.
html
<!-- App.vue -->
<template>
  <div id="app">
    <ImageGallery />
  </div>
</template>

<script>
import ImageGallery from './components/ImageGallery.vue';

export default {
  components: {
    ImageGallery,
  },
};
</script>

<style>
/* Add your global styles here */
</style

Now, you have a basic responsive image gallery using Vue.js. Customize the code according to your specific requirements, such as adding more features, styles, or integrating with a backend to fetch images dynamically.

Category List