{"id":28121,"date":"2023-05-01T06:00:00","date_gmt":"2023-05-01T13:00:00","guid":{"rendered":"http:\/\/handle-image-asset-bundling-using-vite-in-vuejs"},"modified":"2025-10-16T11:56:57","modified_gmt":"2025-10-16T18:56:57","slug":"handle-image-asset-bundling-using-vite-in-vuejs","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs","title":{"rendered":"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>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.<\/p>\n<p>Being platform-agnostic means Vite is versatile and can be used across various platforms, providing an optimized development environment, especially beneficial for Vue.js projects. Vite not only handles images as assets, but it also detects other common media and font filetypes automatically. This detection ensures a more holistic asset management approach, taking the pain out of manual configurations.<\/p>\n<p>In this article we\u2019ll cover the full spectrum of Vite images Vue.JS including:<\/p>\n<ul>\n<li>A codesandbox environment to get started.<\/li>\n<li>What you need to work with Vue images in Vite.<\/li>\n<li>A little background on Vite.<\/li>\n<li>Details on the Vite import image process with Vue and how to handle assets in the Vite images Vue environment.<\/li>\n<\/ul>\n<p>While we\u2019re talking about Vue images in this article, it\u2019s worth noting that Cloudinary integrates with Vite and Vue while offering an expanded offering for image handling, transformations, and more, all for free for life. Take a minute to see how the <a href=\"https:\/\/cloudinary.com\/image-api\">Cloudinary Image API<\/a> can create transformative visual experiences with image APIs.<\/p>\n<h2>Vue Vite Image Handling in Codesandbox<\/h2>\n<p>This article will discuss Vite, why it\u2019s becoming an essential tool in the front-end universe, and how to utilize it in image bundling by building an image gallery.<\/p>\n<p>The completed project is on Codesandbox. Check out the <a href=\"https:\/\/codesandbox.io\/s\/handle-assets-bundling-vue-4ymhxd\">Codesandbox<\/a> to get started quickly.<\/p>\n<Codesandbox id=\"handle-assets-bundling-vue-4ymhxd\" title=\"handle-assets-bundling-vue\" \/>\n<br \/>\n<h3>GitHub URL<\/h3>\n<p><a href=\"https:\/\/github.com\/Iheanacho-ai\/image-assets-bundling-vue\">https:\/\/github.com\/Iheanacho-ai\/image-assets-bundling-vue<\/a><\/p>\n<br \/>\n<h2>Prerequisites<\/h2>\n<br \/>\n<p>To get the most out of this article, we must have the following:<\/p>\n<br \/>\n<ul>\n<li>A basic understanding of CSS, JavaScript and Vue.js.<\/li>\n<li>Node and its package manager, npm. We run the terminal command <code>node -v &amp;&amp; npm -v<\/code> to verify they\u2019re installed, or we install them from <a href=\"https:\/\/nodejs.org\/en\/\">here<\/a>.<\/li>\n<li>Alternatively, we can use another package manager, <a href=\"https:\/\/classic.yarnpkg.com\/en\/docs\/install\/#windows-stable\">Yarn<\/a>.<\/li>\n<\/ul>\n<br \/>\n<h2>What is Vite?<\/h2>\n<br \/>\n<p><a href=\"https:\/\/vitejs.dev\/\">Vite<\/a> is a build tool that aims to provide a faster and leaner development experience for modern web projects.  It acts as a no-bundler dev environment for Vue.js, speeding up the overall front-end development process.<\/p>\n<br \/>\n<p>It\u2019s an excellent front-end tooling that provides developers with NPM Dependency Resolving, Pre-Bundling, and Hot Module Replacement. It\u2019s advantageous in local development as it swiftly handles refreshing file changes.<\/p>\n<br \/>\n<p>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.<\/p>\n<br \/>\n<p>\nVite is also a frontend tool for building fast and optimized web applications. Apart from referencing images in the usual manner, you can utilize images in Vite by placing them in the public folder, importing files individually, leveraging dynamic images from APIs, or using dynamic inline background images. You can also pull in an image from your assets folder using a static URL or the static import method directly on the src attribute. Additionally, you can extend Vite&#8217;s internal list of assets using the assetsInclude option, which ensures that referenced assets are incorporated as part of the build assets graph, benefitting from hashed file names and potential optimization processing by plugins.  It handles images as assets automatically, so you don&#8217;t need to specify configurations for the images. You can use a standard <strong>&lt;img><\/strong> tag with the <strong>src <\/strong>attribute to display an image from a URL.\n<\/p>\n<p>\nFor instance, you can use a URL that links to platforms like Unsplash or Pexels. If you\u2019re looking to pull in an image from your assets folder, you can use static import or directly on the Vue Vite image src attribute. It\u2019s essential to reference the images in the PWA Manifest icons using the assets directory path relative to the root folder.\n<\/p>\n<br \/>\n<h2>Setting Up Our Vite App<\/h2>\n<br \/>\n<p>To create a Vite app, we\u2019ll open our terminal and run the code block below.<\/p>\n<br \/>\n<p>**NOTE: If you\u2019re on windows and using Git Bash, you might have issues with the arrows, so you should use the Powershell terminal instead.\n**<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"PHP\" data-shcb-language-slug=\"php\"><span><code class=\"hljs language-php shcb-wrap-lines\">\n    npm create vite@latest\n    \n    <span class=\"hljs-comment\">#or<\/span>\n    \n    yarn create vite\n    \n    <span class=\"hljs-comment\">#or <\/span>\n    \n    pnpm create vite\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">PHP<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">php<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Running this command will trigger a set of question prompts. Answer these questions as follows.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">\n    Project name: <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">name<\/span> <span class=\"hljs-attr\">of<\/span> <span class=\"hljs-attr\">our<\/span> <span class=\"hljs-attr\">project<\/span>&gt;<\/span>\n    Select a framework: vue.js\n    Select a variant: vue\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Next, we\u2019ll run these commands.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    cd <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">name<\/span> <span class=\"hljs-attr\">of<\/span> <span class=\"hljs-attr\">our<\/span> <span class=\"hljs-attr\">project<\/span>&gt;<\/span>\n    npm install\n    npm run dev\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<br \/>\n<p>This command above will change the directory to our project and create a local development server running on <a href=\"http:\/\/localhost:3000\/\">http:\/\/localhost:3000\/<\/a>.<\/p>\n<br \/>\n<h2>Building Our Image Gallery<\/h2>\n<br \/>\n<p>Vite handles images as assets automatically, so we don\u2019t need to specify configurations for the images. Learn more about <a href=\"https:\/\/cloudinary.com\/glossary\/static-assets\">static asset<\/a> handling in Vite <a href=\"https:\/\/vitejs.dev\/guide\/assets.html#static-asset-handling\">here<\/a>.<\/p>\n<br \/>\n<p>We\u2019ve added nine images to our <code>src\/``assets<\/code> folder. To download the images we\u2019ll use for our gallery, check out <a href=\"https:\/\/github.com\/Iheanacho-ai\/image-assets-bundling-vue\/tree\/master\/src\/assets\">here<\/a>.<\/p>\n<br \/>\n<p>Next, we\u2019ll import the images in the script section of our <code>App.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\"><span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n      <span class=\"hljs-keyword\">import<\/span> Img1 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-1.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img2 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-2.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img3 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-3.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img4 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-4.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img5 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-5.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img6 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-6.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img7 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-7.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img8 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-8.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img9 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-9.jpg'<\/span>\n<\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>\nFor those who are interested in advanced image handling, you can use <strong>vite-imagetools<\/strong> to load and transform images using a toolbox of import directives. To start using <strong>vite-imagetools<\/strong> in your project, simply run<strong> npm i vite-imagetools.<\/strong>\n<br \/>\n<\/p>\n<br \/>\nFollowing our imports in our `App.vue`  file, we&#8217;ll create an `images` array to hold all the images we&#8217;ve just imported.\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-5\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\">    <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n      data(){\n        <span class=\"hljs-keyword\">return<\/span>{\n          <span class=\"hljs-attr\">images<\/span>: &#91;Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]\n        }\n      },\n    }\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-5\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>After importing the images, we\u2019ll loop over and render our images in the array in the <code>template<\/code> section of our <code>App.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-6\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"image-container\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"image\"<\/span> <span class=\"hljs-attr\">v-for<\/span> = <span class=\"hljs-string\">\"image in images\"<\/span> <span class=\"hljs-attr\">:key<\/span>=<span class=\"hljs-string\">\"image\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">:src<\/span>=<span class=\"hljs-string\">\"image\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-6\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Our <code>App.vue<\/code> file should look like this.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-7\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"image-container\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\">\"image\"<\/span> <span class=\"hljs-attr\">v-for<\/span> = <span class=\"hljs-string\">\"image in images\"<\/span> <span class=\"hljs-attr\">:key<\/span>=<span class=\"hljs-string\">\"image\"<\/span>&gt;<\/span>\n            <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">img<\/span> <span class=\"hljs-attr\">:src<\/span>=<span class=\"hljs-string\">\"image\"<\/span>&gt;<\/span>\n          <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n        <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n      <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">div<\/span>&gt;<\/span>\n    <span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">template<\/span>&gt;<\/span>\n    \n    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">script<\/span>&gt;<\/span><span class=\"javascript\">\n      <span class=\"hljs-keyword\">import<\/span> Img1 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-1.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img2 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-2.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img3 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-3.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img4 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-4.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img5 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-5.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img6 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-6.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img7 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-7.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img8 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-8.jpg'<\/span>\n      <span class=\"hljs-keyword\">import<\/span> Img9 <span class=\"hljs-keyword\">from<\/span> <span class=\"hljs-string\">'.\/assets\/photo-9.jpg'<\/span>\n    \n      <span class=\"hljs-keyword\">export<\/span> <span class=\"hljs-keyword\">default<\/span> {\n        data(){\n          <span class=\"hljs-keyword\">return<\/span>{\n            <span class=\"hljs-attr\">images<\/span>: &#91;Img1, Img2, Img3, Img4, Img5, Img6, Img7, Img8, Img9]\n          }\n        },\n      }\n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">script<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-7\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Our image gallery is incomplete without the styling. We\u2019ll write the following styles in our <code>App.vue<\/code> file.<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-8\" data-shcb-language-name=\"HTML, XML\" data-shcb-language-slug=\"xml\"><span><code class=\"hljs language-xml shcb-wrap-lines\">    <span class=\"hljs-tag\">&lt;<span class=\"hljs-name\">style<\/span>&gt;<\/span><span class=\"css\">\n      <span class=\"hljs-selector-id\">#app<\/span> {\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        <span class=\"hljs-attribute\">display<\/span>: flex;\n        <span class=\"hljs-attribute\">justify-content<\/span>: center;\n        <span class=\"hljs-attribute\">align-items<\/span>: center;\n      }\n      <span class=\"hljs-selector-tag\">h2<\/span>{\n        <span class=\"hljs-attribute\">text-align<\/span>: center;\n      }\n      <span class=\"hljs-selector-class\">.image-container<\/span>{\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">80%<\/span>;\n        <span class=\"hljs-attribute\">margin-left<\/span>: <span class=\"hljs-number\">10%<\/span>;\n        <span class=\"hljs-attribute\">display<\/span>: grid;\n        <span class=\"hljs-attribute\">grid-template-columns<\/span>: <span class=\"hljs-built_in\">repeat<\/span>(<span class=\"hljs-number\">4<\/span>, <span class=\"hljs-number\">1<\/span>fr);\n        <span class=\"hljs-attribute\">gap<\/span>: <span class=\"hljs-number\">5px<\/span>;\n      }\n      <span class=\"hljs-selector-class\">.image-container<\/span> <span class=\"hljs-selector-tag\">div<\/span><span class=\"hljs-selector-pseudo\">:first-child<\/span> {\n        <span class=\"hljs-attribute\">grid-column-start<\/span>: <span class=\"hljs-number\">1<\/span>;\n        <span class=\"hljs-attribute\">grid-column-end<\/span>: <span class=\"hljs-number\">3<\/span>;\n      }\n      <span class=\"hljs-selector-class\">.image-container<\/span> <span class=\"hljs-selector-tag\">div<\/span><span class=\"hljs-selector-pseudo\">:last-child<\/span> {\n        <span class=\"hljs-attribute\">grid-row-start<\/span>: <span class=\"hljs-number\">2<\/span>;\n        <span class=\"hljs-attribute\">grid-row-end<\/span>: <span class=\"hljs-number\">5<\/span>;\n      }\n      <span class=\"hljs-selector-class\">.image<\/span>{\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">300px<\/span>;\n      }\n      <span class=\"hljs-selector-class\">.image<\/span> <span class=\"hljs-selector-tag\">img<\/span> {\n        <span class=\"hljs-attribute\">width<\/span>: <span class=\"hljs-number\">100%<\/span>;\n        <span class=\"hljs-attribute\">height<\/span>: <span class=\"hljs-number\">100%<\/span>;\n      }\n    \n    <\/span><span class=\"hljs-tag\">&lt;\/<span class=\"hljs-name\">style<\/span>&gt;<\/span>\n\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-8\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">HTML, XML<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">xml<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>In the code block above, we\u2019ve:<\/p>\n<br \/>\n<ul>\n<li>Centered our gallery using CSS native <code>justify-content: center<\/code> and <code>align-items<\/code>.<\/li>\n<li>Defined how many columns our gallery should have using <code>grid-template-columns: repeat(4, 1fr)<\/code>.<\/li>\n<li>Targeted the first and last div in the <code>image-container<\/code> and specified how many columns or rows each should take up using CSS selectors.<\/li>\n<\/ul>\n<br \/>\n<p>With that, we\u2019ve successfully created our image gallery.<\/p>\n<br \/>\n<p><img decoding=\"async\" src=\"https:\/\/cloudinary-marketing-res.cloudinary.com\/image\/upload\/c_limit,w_2000\/f_auto\/q_auto\/media_jams\/s_F2536A99B1445AAC50983331901C6A6AF829000AD2B0B580B5F29B2006E33559_1645691390885_gallery.PNG\" alt=\"Image showing vite images vuejs gallery with images of city buildings, flowers, a shopping cart, a hifi, and various indoor spaces\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1590\" height=\"754\"\/><\/p>\n<br \/>\n<h2>Conclusion<\/h2>\n<br \/>\n<p>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.<\/p>\n<br \/>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":87,"featured_media":28641,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[75,134,370,175,388,315],"class_list":["post-28121","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-css","tag-guest-post","tag-image","tag-jamstack","tag-optimize","tag-vue"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js<\/title>\n<meta name=\"description\" content=\"Learn image asset bundling with Vite images VueJS, a build tool that provides a faster and leaner development experience for modern web projects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js\" \/>\n<meta property=\"og:description\" content=\"Learn image asset bundling with Vite images VueJS, a build tool that provides a faster and leaner development experience for modern web projects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-01T13:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-16T18:56:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"1100\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"melindapham\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs\"},\"author\":{\"name\":\"melindapham\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\"},\"headline\":\"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js\",\"datePublished\":\"2023-05-01T13:00:00+00:00\",\"dateModified\":\"2025-10-16T18:56:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs\"},\"wordCount\":12,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA\",\"keywords\":[\"CSS\",\"Guest Post\",\"Image\",\"JAMStack\",\"Optimize\",\"Vue\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2023\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs\",\"url\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs\",\"name\":\"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA\",\"datePublished\":\"2023-05-01T13:00:00+00:00\",\"dateModified\":\"2025-10-16T18:56:57+00:00\",\"description\":\"Learn image asset bundling with Vite images VueJS, a build tool that provides a faster and leaner development experience for modern web projects.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA\",\"width\":2000,\"height\":1100,\"caption\":\"Image showing graphic representing vue vite image handling and the code that created it with vite import image function\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9\",\"name\":\"melindapham\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g\",\"caption\":\"melindapham\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js","description":"Learn image asset bundling with Vite images VueJS, a build tool that provides a faster and leaner development experience for modern web projects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs","og_locale":"en_US","og_type":"article","og_title":"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js","og_description":"Learn image asset bundling with Vite images VueJS, a build tool that provides a faster and leaner development experience for modern web projects.","og_url":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs","og_site_name":"Cloudinary Blog","article_published_time":"2023-05-01T13:00:00+00:00","article_modified_time":"2025-10-16T18:56:57+00:00","og_image":[{"width":2000,"height":1100,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA","type":"image\/jpeg"}],"author":"melindapham","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs"},"author":{"name":"melindapham","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9"},"headline":"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js","datePublished":"2023-05-01T13:00:00+00:00","dateModified":"2025-10-16T18:56:57+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs"},"wordCount":12,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA","keywords":["CSS","Guest Post","Image","JAMStack","Optimize","Vue"],"inLanguage":"en-US","copyrightYear":"2023","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs","url":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs","name":"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA","datePublished":"2023-05-01T13:00:00+00:00","dateModified":"2025-10-16T18:56:57+00:00","description":"Learn image asset bundling with Vite images VueJS, a build tool that provides a faster and leaner development experience for modern web projects.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA","width":2000,"height":1100,"caption":"Image showing graphic representing vue vite image handling and the code that created it with vite import image function"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/handle-image-asset-bundling-using-vite-in-vuejs#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue Vite Image Handling | Image Asset Bundling Using Vite in Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/0d5ad601e4c3b5be89245dfb14be42d9","name":"melindapham","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6f989fa97fe94be61596259d8629c3df65aec4c7da5c0000f90d810f313d4f4?s=96&d=mm&r=g","caption":"melindapham"}}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1682452693\/blog-image-asset-vite-in-react\/blog-image-asset-vite-in-react.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28121","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/87"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=28121"}],"version-history":[{"count":37,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28121\/revisions"}],"predecessor-version":[{"id":38806,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/28121\/revisions\/38806"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/28641"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=28121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=28121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=28121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}