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@latest23 #or45 yarn create vite67 #or89 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.js3 Select a variant: vue
Next, we run these commands.
1cd <name of our project>2 npm install3 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>1011 <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'2122 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 }3536 </style>
In the code block above, we did the following:
- Center our gallery using CSS native
justify-content: center
andalign-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.