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

preview_player
Показать описание

👉 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
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
  1. Program With Erik
  2. Program
  3. With
  4. Erik
Рекомендации по теме
Vue.js Explained in 0:02:04

Vue.js Explained in 100 Seconds

So We Tried 0:14:19

So We Tried to Build a Project with Livewire vs Vue vs React... (showdown)

Nuxt in 100 0:02:50

Nuxt in 100 Seconds

I Built Full 5:18:44

I Built Full Stack Application with Laravel, Vue 3 and Tailwindcss

Why Vue is 0:01:00

Why Vue is better than React

Build A Ride 4:12:53

Build A Ride Share App: Full Stack Tutorial with Laravel and Vue

Build a Full-Stack 1:12:51

Build a Full-Stack Social Network with Django and Vue 3: From Idea to Launch

I built the 0:21:58

I built the same app 10 times // Which JS Framework is best?

The Spotlight Network 0:21:39

The Spotlight Network on The Aspiring Full Stack Developer’s Playbook by Gunnar Siréus

Full Stack Project 1:28:43

Full Stack Project with Vue.js and Flask (Games Library App)

Built Complete Vue 2:51:42

Built Complete Vue 3/Vuex application in 3 hours

I built 10 0:14:23

I built 10 web apps... with 10 different languages

Master Vue.js Composition 6:14:30

Master Vue.js Composition API: Build 10 Stunning Projects for Real-world Expertise!

vue is the 0:00:29

vue is the best web js framework, change my mind

Spring Boot and 0:25:10

Spring Boot and Vue JS: Full Stack Java Development

Vue.JS full-stack CRUD 1:05:19

Vue.JS full-stack CRUD app with Laravel 11 API with Authentication course 2024 | Part 1/2

Vue.js Tutorial: Beginner 4:21:59

Vue.js Tutorial: Beginner to Front-End Developer

Vue JS + 0:53:29

Vue JS + Spring Boot REST API Tutorial | Full Stack Development

Full Stack Vue.js 0:45:14

Full Stack Vue.js & Laravel

Build & Deploy: 2:38:27

Build & Deploy: Full Stack Ecommerce AliExpress. Nuxt 3 Vue js Tailwind CSS Supabase Prisma Netl...

Build a Fullstack 1:21:21

Build a Fullstack Contact App with Vue 3 Composition API , Node, Express, and MongoDB | Part 1

Full Stack Web 0:55:56

Full Stack Web App using Vue.js & Express.js: Part 1 - Intro

Full Stack Vue.js 0:51:21

Full Stack Vue.js & Laravel 7 - Build a TODO App with CRUD (CREATE, READ, UPDATE, DELETE) tutori...

Build A Full 0:56:34

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

Комментарии
Автор

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 🔥

iUmerFarooq
Автор

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

amphortas
Автор

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

DanielLuchin
Автор

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

mabdurrafeyahmed