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
5 views
48
12
1 month ago 00:08:10 1
AI Agents Will Create MILLIONAIRES in 2025 – Are You Ready
1 month ago 00:01:29 1
Тентовые здания МСБИЛДИНГС
1 month ago 00:03:58 1
The Shira Choir x The Kiffness - Im Hashem Lo Yivneh Bayis (Psalm 127 DANCE REMIX)
1 month ago 00:02:43 1
Yearning Kru - Multipass
1 month ago 00:40:25 1
40MIN Unilateral Leg Strength - Lower Body Workout
1 month ago 00:19:20 1
Blue Ribbon: Story of the Build
2 months ago 00:00:31 1
Тот самый чел, который говорит что он “топ 1 холиворлда“
2 months ago 00:06:07 1
PATRIARKH - WIERSZALIN IV (feat. Eliza Sacharczuk) (Official Video) | Napalm Records