How to use Vue components to create the gallery In Vue

Using Vue CDN to create image 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.org/wp-content/cdn-uploads/20190718150152/Java-tutorials-by-w3wiki.png',
'https://media.w3wiki.org/wp-content/cdn-uploads/20210713211702/System-Design-Tutorial.png',
'https://media.w3wiki.org/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:

Create an Image Gallery App with Vue.js

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

Tags:

#JavaScript-Projects #Vue.JS #Project #Web Technologies

Using Vue CDN to create image gallery

How to use Vue components to create the gallery In Vue

Step to create the application using Vue CLI:

Project Structure:

Create an Image Gallery App with Vue.js

Similar Reads

Contact Us