Create an Image Gallery App with Vue.js
Last Updated :
23 Apr, 2024
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.
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">
×
</span>
<img :src="previewImage" alt="Preview">
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190718150152/Java-tutorials-by-GeeksForGeeks.png',
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210713211702/System-Design-Tutorial.png',
'https://media.geeksforgeeks.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:
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.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
The Geeksforgeeks Image Gallery
</title>
<script src=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
<script src=
"https://cdn.tailwindcss.com">
</script>
</head>
<body>
<div id="app" class="text-center">
<h1 class="mt-10 mb-5 text-3xl
text-green-600">
Geeksforgeeks Image Gallery
</h1>
<h3 class="mb-10 text-xl
text-green-600">
Click the image to view
</h3>
<div class="p-10 grid grid-cols-3 gap-5">
<img v-for="(image, index) in images"
:key="index" class="w-full h-full
object-cover cursor-pointer"
:src="image.src" :alt="image.alt"
@click="showModal(image.src)" />
</div>
<div v-if="isModalOpen" id="modal"
class="fixed top-0 left-0 z-80 w-screen
h-screen bg-black/70 flex
justify-center items-center">
<a class="fixed z-90 top-6 right-8
text-white text-5xl font-bold"
href="javascript:void(0)"
@click="closeModal">×</a>
<img id="modal-img" class="max-w-[800px]
max-h-[600px] object-cover"
:src="modalImage" />
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
images: [{
src:
'https://media.geeksforgeeks.org/wp-content/uploads/20240215121528/javare15.png',
alt: 'Img 1'
},
{
src:
'https://media.geeksforgeeks.org/wp-content/uploads/20240215121204/15re.webp',
alt: 'Img 2'
},
{
src:
'https://media.geeksforgeeks.org/wp-content/uploads/20240215121356/jsre15.jpg',
alt: 'Img 3'
}
],
isModalOpen: false,
modalImage: ''
},
methods: {
showModal(src) {
this.isModalOpen = true;
this.modalImage = src;
},
closeModal() {
this.isModalOpen = false;
}
}
});
</script>
</body>
</html>
Output:
Similar Reads
Create an Image/Video Gallery using React-Native An Image/Video Gallery is a common feature in mobile applications. This article will guide you for creating an Image/Video Gallery using React Native.We will learn to build an Image/Video Gallery app using React-Native. In this app, we will display the images and videos in the form of a grid, and on
4 min read
How to Create Image Gallery using JavaScript? An Image Gallery is a collection of images displayed in a grid or slideshow format on a webpage. To create an Image Gallery using JavaScript, you can dynamically load images, create HTML elements, and use CSS for styling. JavaScript can add interactivity, like transitions and navigation controls.Her
3 min read
How to Create an Image Gallery with a Horizontal Scrollbar using CSS? Image galleries are essential tools for showcasing multiple images within a single container on a website. They allow users to view a collection of images in an organized way. When we use the horizontal scrollbar, then we can reduce the space. In this tutorial, we will go through the steps on how to
4 min read
Animated sliding image gallery using framer and ReactJS Animated sliding image gallery using Framer and React JS will have some image and show one by one by one with a sliding animation from right to left.Prerequisites:Node.js and NPM React JSReact JS HooksApproach:To design an animated sliding image gallery using Framer in React we will be using the Pag
2 min read
Create a Photo Gallery with Thumbnail using jQuery In this article, we are going to learn to create a custom photo gallery with thumbnails using HTML, CSS, and JQuery. We will create the thumbnails for all images and when the user clicks on any thumbnail, it should render as a large image.By the end of this article, users will be able to create the
3 min read
Build a Movie App with VueJS We will build a movie application using Vue.js. By the end, you'll have a fully functional movie app that will allow users to search for movies, view their details, and get information such as title, year, rating, and plot. Prerequisites:Vue.jsNode.js and npm are installed on your system.Approach Vu
5 min read
How to Install and Creating First Nuxt.js App ? What is NuxtJS? NuxtJS is a framework of VueJS for creating web apps. It makes development more fast, easy, and organized. NuxtJS is similar to Next.js, which is a framework of React.js. The main features of NuxtJS are: Great folder structure: Nuxt App comes with a great folder structure that makes
2 min read
How to create a reporting app with Vue 3 and Composition API ? Vue is an open-source JavaScript front-end framework for building the UI for websites and apps. The main features are an incrementally adaptable architecture that focuses on declarative rendering and component composition. Not long time ago Vue has released new version - Vue 3. The updated framework
3 min read
Consuming a Rest API with Axios in Vue.js Many times when building an application for the web that you may want to consume and display data from an API in VueJS using JavaScript fetch API, Vue resource, jquery ajax API, but a very popular and most recommended approach is to use Axios, a promise-based HTTP client. Axios is a great HTTP clien
2 min read
Create an Image Resize and Editor using React-Native Image manipulation in mobile apps is a crucial functionality, encompassing tasks such as cropping and resizing, as well as adding filters or overlays. In this tutorial, you will learn the process of building a simple Image Resize and Editor application using React-Native. This project aims to provid
6 min read