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.
This article will discuss Vite, why it’s 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.
https://github.com/Iheanacho-ai/image-assets-bundling-vue
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’re installed, or we install them from here. - Alternatively, we can use another package manager, Yarn.
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects.
It’s an excellent front-end tooling that provides developers with NPM Dependency Resolving, Pre-Bundling, and Hot Module Replacement. It’s advantageous in local development as it swiftly handles refreshing file changes.
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.
To create a Vite app, we’ll open our terminal and run the code block below.
**NOTE: If you’re on windows and using Git Bash, you might have issues with the arrows, so you should use the Powershell terminal instead. **
npm create vite@latest
#or
yarn create vite
#or
pnpm create vite
Code language: PHP (php)
Running this command will trigger a set of question prompts. Answer these questions as follows.
Project name: <name of our project>
Select a framework: vue.js
Select a variant: vue
Code language: HTML, XML (xml)
Next, we’ll run these commands.
cd <name of our project>
npm install
npm run dev
Code language: HTML, XML (xml)
This command above will change the directory to our project and create a local development server running on http://localhost:3000/.
Vite handles images as assets automatically, so we don’t need to specify configurations for the images. Learn more about static asset handling in Vite here.
We’ve added nine images to our src/``assets
folder. To download the images we’ll use for our gallery, check out here.
Next, we’ll import the images in the script section of our App.vue
file.
<script>
import Img1 from './assets/photo-1.jpg'
import Img2 from './assets/photo-2.jpg'
import Img3 from './assets/photo-3.jpg'
import Img4 from './assets/photo-4.jpg'
import Img5 from './assets/photo-5.jpg'
import Img6 from './assets/photo-6.jpg'
import Img7 from './assets/photo-7.jpg'
import Img8 from './assets/photo-8.jpg'
import Img9 from './assets/photo-9.jpg'
</script>
Code language: HTML, XML (xml)
Following our imports in our App.vue
file, we’ll create an images
array to hold all the images we’ve just imported.
export default {
data(){
return{
images: [Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]
}
},
}
Code language: JavaScript (javascript)
After importing the images, we’ll loop over and render our images in the array in the template
section of our App.vue
file.
<template>
<div>
<div class="image-container">
<div class="image" v-for = "image in images" :key="image">
<img :src="image">
</div>
</div>
</div>
</template>
Code language: HTML, XML (xml)
Our App.vue
file should look like this.
<template>
<div>
<div class="image-container">
<div class="image" v-for = "image in images" :key="image">
<img :src="image">
</div>
</div>
</div>
</template>
<script>
import Img1 from './assets/photo-1.jpg'
import Img2 from './assets/photo-2.jpg'
import Img3 from './assets/photo-3.jpg'
import Img4 from './assets/photo-4.jpg'
import Img5 from './assets/photo-5.jpg'
import Img6 from './assets/photo-6.jpg'
import Img7 from './assets/photo-7.jpg'
import Img8 from './assets/photo-8.jpg'
import Img9 from './assets/photo-9.jpg'
export default {
data(){
return{
images: [Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]
}
},
}
</script>
Code language: HTML, XML (xml)
Our image gallery is incomplete without the styling. We’ll write the following styles in our App.vue
file.
<style>
#app {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
h2{
text-align: center;
}
.image-container{
width: 80%;
margin-left: 10%;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}
.image-container div:first-child {
grid-column-start: 1;
grid-column-end: 3;
}
.image-container div:last-child {
grid-row-start: 2;
grid-row-end: 5;
}
.image{
width: 100%;
height: 300px;
}
.image img {
width: 100%;
height: 100%;
}
</style>
Code language: HTML, XML (xml)
In the code block above, we’ve:
- Centered our gallery using CSS native
justify-content: center
andalign-items
. - Defined how many columns our gallery should have using
grid-template-columns: repeat(4, 1fr)
. - Targeted the first and last div in the
image-container
and specified how many columns or rows each should take up using CSS selectors.
With that, we’ve successfully created our image gallery.
This article discussed what Vite is, the advantages of building our applications with Vite and, most importantly, how to integrate Vite in our project to handle image assets bundling. Using this knowledge, we created an image gallery.