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

👉👉👉 Get 3 BONUS CREDITS from Cloudinary here - In this tutorial video I show you step-by-step on how to create a Photo Album and add image editing using , Cloudinary, API routes and more! We look at all the different cloudinary services and how they work with the new module plugin! 👉 Check out my last video on Vue with Panda CSS Links: 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 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