Build A Full Stack Vue Photo Album With Image Editing (Nuxt.js, Cloudinary, API Routes)
👉👉👉 Get 3 BONUS CREDITS from Cloudinary here - https://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 Replace Tailwin...
Links:
https://cloudinary.nuxtjs.org/
https://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
Watch video Build A Full Stack Vue Photo Album With Image Editing (Nuxt.js, Cloudinary, API Routes) online without registration, duration hours minute second in high quality. This video was added by user Program With Erik 06 March 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,973 once and liked it 63 people.