Handle Image Asset Bundling using Vite in Vuejs

The by-product of human evolution with the internet has become ambitious web applications to cater for our ever-growing list of web application needs. As larger websites usually mean slower websites, Vite provides faster development experiences.

What we will be building

This article will discuss Vite, why it is becoming an essential tool in the front-end universe, and how to utilize it in image bundling by building an image gallery.

The completed project is on Codesandbox. Check out the Codesandbox to get started quickly.

GitHub URL

https://github.com/Iheanacho-ai/image-assets-bundling-vue

Prerequisites

To get the most out of this article, we must have the following:

A basic understanding of CSS, JavaScript and Vue.js
Node and its package manager, npm. We run the terminal command node -v && npm -v to verify they are installed, or we install them from here.
Alternatively, we can use another package manager, Yarn.

What is Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.

It is an excellent frontend tooling that provides developers with NPM Dependency Resolving, Pre-Bundling, and Hot Module Replacement. It is advantageous in local development as it handles refreshing file changes swiftly.

Vite leverages the availability of native ES modules in the browser and the rise of JavaScript tools written in compile-to-native languages to solve the slow feedback loop that arises in developing larger applications.

Setting up our Vite app

To create a vite app, we open our terminal and run the code block below.

NOTE: If you are on windows and using Git Bash, you might have issues with the arrows, so you should use the Powershell terminal instead.

1npm create vite@latest
2    
3    #or
4    
5    yarn create vite
6    
7    #or 
8    
9    pnpm create vite

Running this command will trigger a set of question prompts. Answer these questions as follow.

1Project name: <name of our project>
2    Select a framework: vue.js
3    Select a variant: vue

Next, we run these commands.

1cd <name of our project>
2    npm install
3    npm run dev

This command above will change the directory to our project and create a local development server running on http://localhost:3000/.

Building our Image Gallery

Vite handles images as assets automatically, so we do not need to specify configurations for the images. Learn more about static asset handling in Vite here.

We added nine images to our src/``assets folder. To download the images we'll use for our gallery, check out here.

Next, we import the images in the script section of our App.vue file.

1<script>
2      import Img1 from './assets/photo-1.jpg'
3      import Img2 from './assets/photo-2.jpg'
4      import Img3 from './assets/photo-3.jpg'
5      import Img4 from './assets/photo-4.jpg'
6      import Img5 from './assets/photo-5.jpg'
7      import Img6 from './assets/photo-6.jpg'
8      import Img7 from './assets/photo-7.jpg'
9      import Img8 from './assets/photo-8.jpg'
10      import Img9 from './assets/photo-9.jpg'
11    </script>

Following our imports in our App.vue file, we create an images array to hold all the images we just imported.

1export default {
2      data(){
3        return{
4          images: [Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]
5        }
6      },
7    }

After importing the images, we loop over and render our images in the array in the template section of our App.vue file.

1<template>
2      <div>
3        <div class="image-container">
4          <div class="image" v-for = "image in images" :key="image">
5            <img :src="image">
6          </div>
7        </div>
8      </div>
9    </template>

Our App.vue file should look like this.

1<template>
2      <div>
3        <div class="image-container">
4          <div class="image" v-for = "image in images" :key="image">
5            <img :src="image">
6          </div>
7        </div>
8      </div>
9    </template>
10    
11    <script>
12      import Img1 from './assets/photo-1.jpg'
13      import Img2 from './assets/photo-2.jpg'
14      import Img3 from './assets/photo-3.jpg'
15      import Img4 from './assets/photo-4.jpg'
16      import Img5 from './assets/photo-5.jpg'
17      import Img6 from './assets/photo-6.jpg'
18      import Img7 from './assets/photo-7.jpg'
19      import Img8 from './assets/photo-8.jpg'
20      import Img9 from './assets/photo-9.jpg'
21    
22      export default {
23        data(){
24          return{
25            images: [Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]
26          }
27        },
28      }
29    </script>

Our image gallery is incomplete without the styling. We write the following styles in our App.vue file.

1<style>
2      #app {
3        width: 100%;
4        height: 100%;
5        display: flex;
6        justify-content: center;
7        align-items: center;
8      }
9      h2{
10        text-align: center;
11      }
12      .image-container{
13        width: 80%;
14        margin-left: 10%;
15        display: grid;
16        grid-template-columns: repeat(4, 1fr);
17        gap: 5px;
18      }
19      .image-container div:first-child {
20        grid-column-start: 1;
21        grid-column-end: 3;
22      }
23      .image-container div:last-child {
24        grid-row-start: 2;
25        grid-row-end: 5;
26      }
27      .image{
28        width: 100%;
29        height: 300px;
30      }
31      .image img {
32        width: 100%;
33        height: 100%;
34      }
35    
36    </style>

In the code block above, we did the following:

Center our gallery using CSS native justify-content: center and align-items.
Define how many columns our gallery should have using grid-template-columns: repeat(4, 1fr).
We target the first and last div in the image-container and specify how many columns or rows each should take up using CSS selectors.

With that, we have successfully created our image gallery.

Conclusion

This article discussed what Vite is, the advantages of building our applications with Vite and, more importantly, how to integrate Vite in our project to handle image assets bundling. Using this knowledge, we created an image gallery.