Create an Image Gallery App with Vue.js

How to Select an Image from Gallery in Android?

Node.js Basics: Back-End Development in MERN Stack

In this tutorial, we’ll walk through the process of building an image gallery application using Vue.js. We’ll explore different approaches to displaying images and provide the complete executable code for each one of them.

Table of Content

Using Vue components to create the gallery
Using Vue CDN to create image gallery

Using Vue components to create the gallery

In this approach, we’ll display a set of static images directly in the template using img tag with the help of vue components.

Step to create the application using Vue CLI:

Before we begin, make sure we have Node.js and npm installed on your system. Then, we’ll use Vue CLI to create our project.

Step 1: Install Vue CLI globally:

npm install -g @vue/cli

Step 2: Create a new Vue project:

vue create image-gallery-app

Step 3: Navigate into the project directory:

cd image-gallery-app

Step 4: Run the application using below command.

npm run serve

Project Structure:

Example: The below code implements the vue component to create an image gallery app.

HTML

<template>
    <div>
        <h1>
            Image Gallery App
        </h1>
        <div class="image-container">
            <img v-for="(image, index) in images" 
                :key="index" :src="image" alt="Image" 
                @click="showPreview(image)">
        </div>
        <div class="modal" v-if="previewImage">
            <span class="close" 
                @click="closePreview">
                &times;
            </span>
            <img :src="previewImage" alt="Preview">
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                images: [
'https://media.w3wiki.net/wp-content/cdn-uploads/20190718150152/Java-tutorials-by-w3wiki.png',
'https://media.w3wiki.net/wp-content/cdn-uploads/20210713211702/System-Design-Tutorial.png',
'https://media.w3wiki.net/wp-content/uploads/20240304152903/python-tutorial-2.webp'
                ],
                previewImage: ''
            };
        },
        methods: {
            showPreview(image) {
                this.previewImage = image;
            },
            closePreview() {
                this.previewImage = '';
            }
        }
    };
</script>
<style>
    .image-container {
        display: flex;
        flex-wrap: wrap;
    }

    .image-container img {
        width: 200px;
        height: 200px;
        margin: 10px;
        cursor: pointer;
    }

    .modal {
        display: block;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.8);
    }

    .modal img {
        margin: auto;
        display: block;
        max-width: 80%;
        max-height: 80%;
    }

    .close {
        color: #fff;
        position: absolute;
        top: 15px;
        right: 35px;
        font-size: 30px;
        cursor: pointer;
    }

    .close:hover,
    .close:focus {
        color: #ccc;
        text-decoration: none;
        cursor: pointer;
    }
</style>

Output:

Using Vue CDN to create image gallery

In this approach, we will include the VueJS to our project using the Vue CDN inside out HTML document.

Steps to use Vue CDN to create image gallery:

Step 1: Create a project folder with project name and a HTML file into it.
Step 2: Include the below CDN link into your HTML file to include VueJS into you project.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Step 3: Add Tailwind CSS to your project using below CDN.

<script src="https://cdn.tailwindcss.com"></script>

Step 4: Now, write the logic for the image gallery app.

Example: The below code uses CDN links to create the image gallery using VueJS.