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.

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:

👁 dsssssss

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

Output:

👁 fosiGIF

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/3.4.16"></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.

Output:

👁 d2