How to use Vue CDN to create image gallery In Vue
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.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
The w3wiki 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">
w3wiki 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.w3wiki.org/wp-content/uploads/20240215121528/javare15.png',
alt: 'Img 1'
},
{
src:
'https://media.w3wiki.org/wp-content/uploads/20240215121204/15re.webp',
alt: 'Img 2'
},
{
src:
'https://media.w3wiki.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:
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
Contact Us