{"id":28461,"date":"2023-10-11T07:00:00","date_gmt":"2023-10-11T14:00:00","guid":{"rendered":"http:\/\/generating-image-collages-in-a-nuxtjs-app"},"modified":"2025-11-27T14:16:03","modified_gmt":"2025-11-27T22:16:03","slug":"generating-image-collages-in-a-nuxtjs-app","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/generating-image-collages-in-a-nuxtjs-app","title":{"rendered":"Generating Image Collages Using Nuxt.js"},"content":{"rendered":"

A collage is a combination of multiple pictures combined into a single image. They\u2019re useful in various applications from presenting memories to summarizing events. Instead of exploring multiple applications to generate collages, let\u2019s explore how we can build a simple Nuxt.js app to generate them.<\/p>\n

Codesandbox<\/h2>\n

The completed project is available on Codesandbox<\/a>.<\/p>\n<\/div>\n\n\n

\n <\/iframe>\n <\/div>\n\n\n

You can find the full codebase on my Github<\/a>.<\/p>\n

Nuxt.js Setup<\/h2>\n

We\u2019ll use Nuxt.js<\/a> for this tutorial. It\u2019s an intuitive Vue.Js framework designed for simplicity and productivity.<\/p>\n

To set up our project, we\u2019ll use the create-nuxt-app<\/a> utility. Ensure you have Yarn or NPM v5.2+ or v6.1+ installed and open your terminal in your preferred working directory.<\/p>\n

yarn create nuxt-app nuxtjs-image-collage\n# OR<\/span>\nnpx create-nuxt-app nuxtjs-image-collage\n# OR<\/span>\nnpm init nuxt-app nuxtjs-image-collage\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
The above will trigger a set of setup questions. Here are our recommended defaults:<\/p>\n
\"Setup<\/p>\n
cd nuxtjs-image-collage\n\nyarn dev\n# OR<\/span>\nnpm run dev\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
@nuxtjs\/cloudinary setup<\/h2>\n
We\u2019ll use Cloudinary<\/a> to generate the image collage. It\u2019s a powerful media management platform with a comprehensive set of APIs and SDKs.<\/p>\n
Let\u2019s install the recommended Nuxt.js plugin: @nuxtjs\/cloudinary<\/a>.<\/p>\n
yarn<\/span> add<\/span> @nuxtjs<\/span>\/cloudinary\n# OR<\/span>\nnpm install @nuxtjs\/cloudinary\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Register the plugin to the modules<\/code> section of our nuxt.config.js<\/code> file:<\/p>\n
\/\/ nuxt.config.js<\/span>\nexport<\/span> default<\/span> {\n ....\n modules: [\n '@nuxtjs\/cloudinary'<\/span>\n ]\n ...\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Once the above is done, let\u2019s configure our Cloudinary instance by adding a cloudinary<\/code> section in our nuxt.config.js<\/code> file:<\/p>\n
\/\/ nuxt.config.js<\/span>\nexport<\/span> default<\/span> {\n ...\n cloudinary: {\n cloudName<\/span>: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,\n useComponent<\/span>: true<\/span>,\n }\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The NUXT_ENV_CLOUDINARY_CLOUD_NAME<\/code> variable we see above is an environmental variable. These are values we configure outside of our project code. Let\u2019s create our ENV file:<\/p>\n
touch<\/span> .env<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Add your cloud name to your ENV file:<\/p>\n
<!-- .env --><\/span>\nNUXT_ENV_CLOUDINARY_CLOUD_NAME=<your-cloud-name<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
Selecting and Uploading Collage Images<\/h2>\n
We want to allow our users to select the images they want to be displayed in the collage. Let\u2019s set up an HTML form to do this.<\/p>\n
 <!-- pages\/index.vue --><\/span>\n ...\n   <form<\/span> @submit.prevent<\/span>=\"upload\"<\/span>><\/span>\n          <div<\/span>><\/span>\n            <label<\/span> for<\/span>=\"file\"<\/span>><\/span> Images <\/label<\/span>><\/span>\n            <div<\/span> class<\/span>=\"mt-1\"<\/span>><\/span>\n              <input<\/span> @change<\/span>=\"handleImagesChanged\"<\/span> id<\/span>=\"file\"<\/span> name<\/span>=\"file\"<\/span> type<\/span>=\"file\"<\/span> accept<\/span>=\"image\/*\"<\/span> required<\/span>  multiple<\/span> \/><\/span>\n            <\/div<\/span>><\/span>\n          <\/div<\/span>><\/span>\n\n          <div<\/span>><\/span>\n            <div<\/span> v-if<\/span>=\"uploading\"<\/span> class<\/span>=\"text-center\"<\/span>><\/span>Please wait, upload in progress<\/div<\/span>><\/span>\n            <button<\/span> v-else<\/span> type<\/span>=\"submit\"<\/span> ><\/span>\n              Upload & Generate Collage\n            <\/button<\/span>><\/span>\n          <\/div<\/span>><\/span>\n        <\/form<\/span>><\/span>\n ...\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
When a file is selected, we trigger the handleImagesChanged<\/code> method. We also trigger the upload<\/code> method when the form is submitted.<\/p>\n
Let\u2019s add the JavaScript logic to support this.<\/p>\n
\/\/ pages\/index.vue\n<script<\/span>><\/span>\nexport<\/span> default<\/span> {\n  data(){\n    return<\/span> {\n      images<\/span>:null<\/span>,\n      uploading<\/span>:false<\/span>,\n      cloudinaryImages<\/span>:[],\n      ...\n    }\n  },\n  methods<\/span>:{\n    handleImagesChanged(e){\n     this<\/span>.images = e.target.files;\n    },\n    readData<\/span> : (f<\/span>) =><\/span>\n        new<\/span> Promise<\/span>((resolve<\/span>) =><\/span> {\n          const<\/span> reader = new<\/span> FileReader();\n          reader.onloadend = ()<\/span> =><\/span> resolve(reader.result);\n          reader.readAsDataURL(f);\n    }),\n    async<\/span> upload(){\n      this<\/span>.uploading = true<\/span>;\n      for<\/span>(let<\/span> image of<\/span> this<\/span>.images){\n        const<\/span> data = await<\/span> this<\/span>.readData(image);\n        const<\/span> instance = await<\/span> this<\/span>.$cloudinary.upload(data, {\n          folder<\/span>: \"nuxtjs-image-collage\"<\/span>,\n          uploadPreset<\/span>: \"default-preset\"<\/span>,\n        });\n        this<\/span>.cloudinaryImages.push(instance);\n      }\n      this<\/span>.uploading = false<\/span>;\n    },\n    ...\n  }\n}\n<\/span><\/script<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
When the files are selected, we save them to state in the handleImagesChanged<\/code> method. The upload<\/code> method iterates through the images uploading them to the uxtjs-image-collage<\/code> folder while storing the Cloudinary response instances.<\/p>\n
The default-preset<\/code> upload preset will be used for the uploads. Upload presets are rules we configure to be applied to each of our uploads. To create one, proceed to the add upload preset page<\/a>. Here are our recommended defaults:<\/p>\n
Setting Up the Collage Template<\/h2>\n
Before we start, we need to set up the template. Upload this template<\/a> to the nuxtjs-image-collage\/templates<\/code> folder.<\/p>\n
To obtain your Cloudinary cloud name, check the Account Details section on your account dashboard<\/a>. If you don\u2019t have an account, you may register here<\/a>.<\/p>\n
You may now run the project on http:\/\/localhost:3000<\/a>:<\/p>\n