Build A Full Stack Vue Photo Album With Image Editing (Nuxt.js, Cloudinary, API Routes)

👉👉👉 Get 3 BONUS CREDITS from Cloudinary here - cld.media/programwitherik
In this tutorial video I show you step-by-step on how to create a Photo Album and add image editing using Nuxt.js, Cloudinary, API routes and more! We look at all the different cloudinary services and how they work with the new Nuxt.js module plugin!
👉 Check out my last video on Vue with Panda CSS
• Panda CSS - Should It ...
Links:
cloudinary.nuxtjs.org/
github.com/ErikCH/CloudinaryN...
0:00 What is this Cloudinary Nuxt Module and what we are building?
02:03 Setup Nuxt, Cloudinary and dependencies
05:30 Adding in Cloudinary image and upload
08:50 Adding in Tailwind Nuxt Module
10:38 Adding Edit page and adding in backend server route
13:35 Setting up environmental variables with useRuntimeConfig
15:30 Adding in cloudinary.v2.search and testing server route
18:04 Adding styles and cleaning up view
21:05 Setting up CldUploadWidget with props and CldImage
24:40 Setting up Upload presets in Cloudinary and testing
26:36 Adding the edit page routing
30:15 Adding in Alt text - updating the server API route
32:59 Update setttings to Cloudinary AI Background remover
34:07 Styling Edit page to edit images
37:46 Adding CldImage to edit page
39:10 Adding CldImage props to edit image
42:43 Add in overlays for CldImage
45:28 Creating range slider component opacity
49:24 Adding in Blur and font range slider component
52:00 Adding buttons for additional editing remove background, grayscale, pixelate

[@iUmerFarooq]

Thank you for your hard work and uploading such a great content. Looking forward for more Vuejs/Nuxtjs content.
Make next video on Nuxtjs with firebase 🔥

[@ProgramWithErik]

Thanks!

[@paulwekesa5169]

This is really incredible

[@ProgramWithErik]

Thanks!

[@amphortas1]

Wow! It’s amazing! Thank you for sharing this tutorial!

[@ProgramWithErik]

You are so welcome!

[@amphortas1]

@@ProgramWithErik I have watched many videos on RUclips and I have bought many courses from You and I really thankful to You for your job!

[@ronikikoza]

Which vs code theme you are using?

[@DanielLuchin]

Have you tried to upload several images at once using widget? How to get the list of all images you have just uploaded?

[@RiazUddinMasum]

can you provide the project git link?

[@ProgramWithErik]

Oops yes - github.com/ErikCH/CloudinaryNuxtGallery

[@mabdurrafeyahmed9256]

I love nuxt but want to skip tutorials bcz of seeing old nuxt logo 😢 in thumbnail

[@ProgramWithErik]

Haha oops ; I’ll fix that