![CodeWithHafizJavaid](/img/default-banner.jpg)
- Видео 18
- Просмотров 138 581
CodeWithHafizJavaid
Пакистан
Добавлен 25 июн 2022
Here I'll teach how we can build web applications using Html / Css / JavaScript / Bootstrap /Vuejs / Nuxtjs / Vuetify / React / Nextjs / Typescript / Nodejs and some other cool libraries and frameworks.
linktr.ee/CodeWithHafiz
linktr.ee/CodeWithHafiz
Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB Lucia 2024
#nuxt #fullstack #2024 #next #vs #nuxtjs
Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB / Supabase Lucia Prisma | Full Tutorial 2024 | Full Stack Nuxt 3 Projects
Welcome to this comprehensive tutorial on building a full stack web application in 2024 using Nuxt 3! In this tutorial, I'll guide you through the process of creating a powerful Nuxt 3 Airbnb Clone using Vue Typescript Tailwind CSS MongoDB / Supabase Lucia. Get ready for a full-stack development adventure!
This project is inspired from @codewithantonio channel and I copied a lot of basic styles as well. But his video is in Next js and our is in Nuxt js and a lot tech stack is changed. But ...
Next.js vs Nuxt 3 Build Full Stack Airbnb Clone using Vue Typescript Tailwind CSS MongoDB / Supabase Lucia Prisma | Full Tutorial 2024 | Full Stack Nuxt 3 Projects
Welcome to this comprehensive tutorial on building a full stack web application in 2024 using Nuxt 3! In this tutorial, I'll guide you through the process of creating a powerful Nuxt 3 Airbnb Clone using Vue Typescript Tailwind CSS MongoDB / Supabase Lucia. Get ready for a full-stack development adventure!
This project is inspired from @codewithantonio channel and I copied a lot of basic styles as well. But his video is in Next js and our is in Nuxt js and a lot tech stack is changed. But ...
Просмотров: 3 231
Видео
Master API integration in Vue js Unleash the power of Vue 3 Typescript TailwindCSS | Vue Course 2024
Просмотров 1,7 тыс.5 месяцев назад
Welcome to our comprehensive Vue js video for 2024! In this tutorial, you'll delve deep into mastering API integration within Vue 3, empowering your frontend development skills like never before. We'll explore the latest features and enhancements of Vue 3, along with leveraging the robustness of Typescript, TailwindCSS ( ShadCN ) and Pinia to create seamless integrations. Throughout this video,...
Build Full Stack Realtime Chat App using Nuxt 3, Nuxt UI, typescript & Socket.io ( 2024 )
Просмотров 3,7 тыс.6 месяцев назад
#nuxt #2024 #socketio #chatapp #fullstack #typescript Build Full Stack Realtime Chat App using Nuxt 3, Nuxt UI, typescript & Socket.io ( 2024 ) | Nuxt 3 and Socket.io Crash Course Welcome to this comprehensive tutorial on building a Full Stack Realtime Chat App in 2024 using Nuxt 3, Nuxt UI, typescript & Socket.io! In this tutorial, I'll guide you through the process of creating a powerful Real...
Build Full Stack Realtime Chat App using Vue 3, Vuetify typescript Node Express Socket io ( 2024 )
Просмотров 2,5 тыс.6 месяцев назад
Build Full Stack Realtime Chat App using Vue 3, Vuetify typescript Node Express Socket io | Full Tutorial 2024 | Full Stack Vuejs and Socket.io Project Welcome to this comprehensive tutorial on building a full stack web application in 2024 using Vue 3 Node Express js Socket io! In this tutorial, I'll guide you through the process of creating a powerful Realtime Chat App using Vue 3 Node Express...
Build Nuxt 3 Saas AI Platform with Vue, Typescript, Supabase, Stripe, Tailwind | Full Tutorial 2024
Просмотров 15 тыс.9 месяцев назад
Build Nuxt 3 Saas AI Platform with Vue, Typescript, Supabase, Stripe, Tailwind | Full Tutorial 2024 | Nuxt 3 Project Welcome to this comprehensive tutorial on building a full stack web application in 2023 using Nuxt 3! In this tutorial, I'll guide you through the process of creating a powerful Nuxt 3 Saas AI Platform using Vue, Typescript, Supabase, Stripe, and Tailwind for styling. Get ready f...
Authentication in Nuxt 3 with Supabase, OAuth ( Google & Github ), Typescript | Nuxt 3 Auth Course
Просмотров 2,7 тыс.10 месяцев назад
🔐 Authentication in Nuxt 3 with Supabase, OAuth ( Google & Github ), Typescript | 🚀 Welcome to this in-depth tutorial on building complete authentication systems with Nuxt 3! In this tutorial, I'll guide you through the process of implementing robust authentication using credentials, Google, and GitHub logins with the power of Supabase. Whether you're a seasoned developer or just starting your ...
🔐 Master Vue 3 Authentication with Vue.js, Clerk, and TailwindCSS | Clerk authentication with Vue
Просмотров 1,3 тыс.11 месяцев назад
🔐 Dive into the Ultimate Vue 3 Authentication Course using Vue.js and Clerk! 🚀 Welcome to this comprehensive tutorial where I'll guide you through mastering Vue 3 authentication. Whether you're a seasoned developer or just starting your coding journey, this course is tailored to help you build robust authentication system with the power of Clerk. 📌 Course Highlights: Introduction to Vue 3 Authe...
Master Full Stack Nuxt 3 Authentication | OAuth Google GitHub | Sidebase and NextAuth tutorial 2024
Просмотров 7 тыс.11 месяцев назад
🔐 Master FullStack Nuxt 3 Authentication: Credentials, Google & GitHub! 🚀 Welcome to this in-depth tutorial on building complete authentication systems with Nuxt 3! In this tutorial, I'll guide you through the process of implementing robust authentication using credentials, Google, and GitHub logins. Whether you're a seasoned developer or just starting your coding journey, I've got you covered....
#2 Vue 3 and Pinia Crash Course in 2024 | Learn Vue and Typescript | #vuejs #vue #vue3 #typescript
Просмотров 98311 месяцев назад
Build the FullStack review app using Vue.js, Pinia and Typescript This video is second part of my vue js crash course. In this video we will convert all the existing optional API components to Composition API components with setup and typescript. We will also see how to use pinia and typescript Components in Vue 3 Props ( Emitting Passing ) in Vuejs Slots in Vue.js Form Handling in Vuejs State ...
🔥 Build DALLE 2 with Vue 3, Nodejs Express Js | Text to Image Generator using OpenAI | #chatgpt #ai
Просмотров 1,6 тыс.Год назад
#chatgpt #chatgpt3 #midjourney Build DALL E 2.0 with Vue 3, Node Js, Express Js | Text to Image Generator using OpenAI The newest AI, ChatGPT, has impressive capabilities. DALL-E and DALL-E 2 are deep learning models developed by OpenAI to generate digital images from natural language descriptions, called "prompts". DALL-E was revealed by OpenAI in a blog post in January 2021 and uses a version...
🔥 Vue 3 and Pinia Crash Course in 2023 | Learn Vuejs by building the fullstack app #vuejs #vue #vue3
Просмотров 15 тыс.Год назад
Build the FullStack review app using Vue.js and Pinia This video will cover and use all the basic and important stuff to start and build the app with vuejs and pinia. In this video, we will create the full stack app using Vue js and Pinia. We will use the best practices. Components in Vue 3 Props ( Emitting Passing ) in Vuejs Slots in Vue.js Form Handling in Vuejs State Management ( Pinia ) Bac...
Build the Shopping Cart using Nuxt 3 Vuetify 3 and Pinia | Vue 3 Shopping Cart | Nuxt 3 Crash Course
Просмотров 14 тыс.Год назад
Build the Shopping Cart using Nuxt 3 Vuetify 3 and Pinia 👍 Thanks for watching! Make sure to like Subscribe For More! ❤ In this video we’ll walk you through: ✔️How to use Vuetify and Nuxt 3 ( Install and Use Vuetify 3 within the Nuxt 3) ✔️ How to use material design icons in Nuxt 3 and Vuetify 3 ✔️ How to add/create a theme switcher in Vuetify 3 ✔️ Build the Shopping Cart using Nuxt 3 Vuetify 3...
Build ChatGPT 2.0 with Vue 3, Node Js, Express Js OpenAI | FullStack App using Vue js | #chatgpt #ai
Просмотров 13 тыс.Год назад
Build ChatGPT 2.0 with Vue 3, Node Js, Express Js, and OpenAI The newest AI, ChatGPT, has amazing capabilities. It is so incredible that many people are speculating as to whether ChatGPT would eliminate the need for developers. In this video, I'll build the ChatGPT Clone with Vue 3, Node Js, Express Js, and OpenAI API. 👍 Thanks for watching! Make sure to like Subscribe For More! ❤ Support me, b...
#3 Build the Modern Responsive Ecommerce Website in Vue JS | Vuejs, Nuxtjs | Figma to Vuejs | 2022
Просмотров 1,6 тыс.Год назад
Build the Modern Responsive Ecommerce Website in Vue JS | Vuejs, Nuxtjs #vuejs #vuejs3 #vuejstutorial #vuejstutorial #html #htmlcss #livestream #reactjs Responsive Vue JS Ecommerece Website 👍 Thanks for watching! Make sure to like Subscribe For More! ❤ In this video we’ll walk you through: ✔️ How you can create a website using Vue JS as a beginner ✔️ Create a Responsive Vue JS Ecommerece Websit...
#2 Build the Modern Responsive Ecommerce Website in Vue JS | Vuejs, Nuxtjs | Figma to Vuejs | 2022
Просмотров 3,6 тыс.Год назад
Build the Modern Responsive Ecommerce Website in Vue JS | Vuejs, Nuxtjs #vuejs #vuejs3 #vuejstutorial #vuejstutorial #html #htmlcss #livestream #reactjs Responsive Vue JS Ecommerece Website 👍 Thanks for watching! Make sure to like Subscribe For More! ❤ In this video we’ll walk you through: ✔️ How you can create a website using Vue JS as a beginner ✔️ Create a Responsive Vue JS Ecommerece Websit...
How to create Responsive Cards in React Js | Responsive Section | React JS beginner projects | 2022
Просмотров 31 тыс.2 года назад
How to create Responsive Cards in React Js | Responsive Section | React JS beginner projects | 2022
Sticky Navbar in React JS | Sticky Navbar | React JS | Navbar | 2022
Просмотров 9 тыс.2 года назад
Sticky Navbar in React JS | Sticky Navbar | React JS | Navbar | 2022
Thanks for the video.
Great video, thanks for sharing
language is very hard to understand I suggest you write a script and use AI to make voice over
@@Sop7anaAllah okay sir
i have a problem on loading images , what should i do please ?
Hello Hafiz, I thoroughly enjoy your video tutorials and learn a lot from them. PrimeVue fully released v4 today, could you please do a detailed tutorial on using PrimeVue v4 with Nuxt?
Could you create a project using Nuxt.js 3, TypeScript, Tailwind CSS, Nuxt UI,mongoDb and Pinia? It should be a system where there is a main administrator who has access to all routes, and this main administrator will add secondary administrators who will not have full access to the system, only to certain pages. These secondary administrators will have a group of users who will have access to a few routes. The system should have managers and supervisors, similar to a call centre system.
Thank you for your suggestion. I'll keep this in my notes and will sure develop one day
Seriously the best channel for learning vue/nuxt in a real world project ! Hope you can make more content like this ( i can pay for this ! ). Did you have a discord or Something ? :)
Thank you for your kind words If you want to support you can buy from here 3627575266943.gumroad.com/l/jlskb No, I don't have discord
@@CodeWithHafizJavaid Promise👌
Hy Hafiz did you think you will remake other clone course from codeantonio with vue / nuxt.js / prisma ? ( i really hate react.js ). I learn nuxt by myself and seriously i will pay and take your patreon if you can make another other clone like this !!! Your amazing !
Hi games.partisan, Yes I'll do that. I wish I have more time because currently I have three projects ready ( E-commerce, LMS, and Messenger Clone from codeantonio ), but I don't have time for recording/editing. I'll try my best to release them as soon as possible
When i finish the course i will take the patreon 😇 but for moment i learn vue/nuxt ( i'm coming for rail stack ) 😉 What app do you to modelize schema relation in 23:20 ? thanks
Huge Thanks to U!!!!!!
My Pleasure
The Images aren't loading just the loadiing spinner is what is actually showing
Can you please show me the code?
@@CodeWithHafizJavaid oh yes i can
<template> <div> <v-row class="my-5"> <v-col cols="12"> <v-btn @click="grid = !grid" :class="{ 'bg-primary': !grid }"> <v-icon> mdi-view-list </v-icon> </v-btn> <v-btn @click="grid = !grid" :class="{'bg-primary': grid }" class="ml-3"> <v-icon> mdi-apps </v-icon> </v-btn> </v-col> </v-row> <!--another row--> <v-row> <v-col cols="12"> <v-row v-show="grid"> <v-col v-for="(product, i) in products" :key="i" cols="12" lg="4" sm="6"> <v-card class="mx-auto pb-2"> <v-img :src="product.image" height="200px" cover> <template v-slot:placeholder> <v-row class="fill-height ma-0" align-md="center" justify="center"> <v-progress-circular color="grey lighten-5" indeterminate></v-progress-circular> </v-row> </template> </v-img> <v-card-title class="text-capitalize"> {{ product.name }} </v-card-title> <v-card-subtitle> ${{ product.price }} </v-card-subtitle> <v-card-actions> <v-btn color="primary"> Read More </v-btn> <v-spacer></v-spacer> <!-- <v-btn class="bg-primary" @click="cartStore.add(product.id)"> Add to Cart </v-btn> --> <v-btn class="bg-primary"> Add to Cart </v-btn> </v-card-actions> </v-card> </v-col> </v-row> </v-col> </v-row> <!--if the grid is false--> <v-row v-show="!grid" v-for="(product, i) in products" :key="i"> <v-col cols="4"> <v-img :src="product.image" height="200px" cover> <template v-slot:placeholder> <v-row class="fill-height ma-0" justify="center"> <v-progress-circular color="grey lighten-5" indeterminate></v-progress-circular> </v-row> </template> </v-img> </v-col> <v-col cols="12" md="8"> <v-card-title class="text-capitalize"> {{ product.name }} </v-card-title> <v-card-subtitle> ${{ product.price }} </v-card-subtitle> <v-card-text> {{ product.description }} </v-card-text> <v-card-actions> <v-btn color="primary"> Read More </v-btn> <v-btn class="ml-2 bg-primary" @click="cartStore.add(product.id)"> Add to Cart </v-btn> </v-card-actions> </v-col> </v-row> </div> </template> <script setup> import data from '~/data' import { useCartStore } from '../stores/cart.js' const cartStore = useCartStore() const products = ref(data) const grid = ref(true) </script> Thats the code in my index.vue page
Header.vue:18 warn [Vue warn]: Property "theme" was accessed during render but is not defined on instance. at <VDefaultsProvider defaults= {VTabs: {…}} > at <VToolba i keep on getting this error in my console.
and the code in my index.vue is basically the same with one in ur github page
good afternoon hafiz I am having issues with the loading of images
Can you please share the code so I can help you with that
Great video! Learn a lot, thank you:)
🙏
thanks, Why u don't use pinia?
I didn't find any need of that Can you please tell me where do you think I should have used pinia but I didn't
Greetings from México,thanks for the knowledge sharing 🙏
You are welcome 🙏
I love it ❤
Thank you 😊
Great tutorial, really informative and well done. I suggest you add chapters to the video so it s easier to go to specific topics.
Thank you for your feedback. I'll add the chapters as soon as possible
Happy to see someone using vue-clerk!
Thanks
Welcome
Man thanks. Just hope next time your mic is a bit more clearer. 😊
Please check after 24:00 it's much better
i want source code
Please check out the description
Благодарю
For Source Code: It took me around 40 to 50 hours to create this video, if you can afford, Please consider to buy the code from Patreon ( It's $10 only ) www.patreon.com/CodeWithHafiz/shop/build-full-stack-airbnb-clone-using-nuxt-193397 But if you can't afford you guys can share the GitHub username and I'll share the code with you Love you all ❣
youkei-zzz, thanks for your generosity
@@Kekei-su4to Done. Remember me in your prayers 💚
nvcc1701, thanks sir
Done Done. Remember me in your prayers 💚. Sorr for the delay, I was too busy because of my job and totally forgot about this
yeyu93, thanks for your work sir.
🤓
Please link us the source code via github sir, additionally if I am just starting out with Vue is it advised that I follow along?
It took me around 40 to 50 hours to create this video. If you can afford consider buying this code via Patreon link but if you can't afford please share your GitHub username and I'll share the code with you ❤
Learn a lot from you 👏 Thank you 💚
Thank you 🙏
you made my day
😍
Good sunday
Hope your enjoyed the video so far
I don't know what would world do without Indian instructors. Thanks for the video.
I'm from Pakistan 🥲
@@CodeWithHafizJavaid Pakistan too!
How can I include ./components/shared in this new pattern that is offered by shadcn? shadcn: { /** * Prefix for all the imported component */ prefix: "", /** * Directory that the component lives in. * @default "./components/ui" */ componentDir: "./components/ui", },
Hi Daniel, Replace the above code with the following shadcn: { /** * Prefix for all the imported component */ prefix: '', /** * Directory that the component lives in. * @default "./components/ui" */ componentDir: './components/ui' }, components: [ { path: '~/components/shared', pathPrefix: false }, '~/components' ] Notice I added the components array, where I added the path for shared folder
@@CodeWithHafizJavaid It works Hafiz. Thank you very much for your help. I put it this way and it works as well: replacing shadcn for it: components: [ { path: "./components/ui", extensions: [".vue"], prefix: "", }, { path: "./components/shared", extensions: [".vue"], prefix: "", }, { path: "./components", extensions: [".vue"], prefix: "", }, ], It wasn't working before because I didn't add a root path "./components" beyond ui and shared, so my sidebar was disappearing.
is this work in prod?
this is helpful ❤
thanks ❤
Why can your useFetch obtain the type?
Sorry I didn't understand your question. Can you please be more clear 🙏
Ei Hafiz, greetings from brazil, loved ur content bro, i am really curiuos about the extension you use, can u share with us?
Glad you like it Can you please tell me for what task?
@@CodeWithHafizJavaid 1:05:56 if you have any tips some extensions can improve developer experience i will be glad to know ex: in 1:05:56 you showed the "route." and it has a code completion my vscode doesn't look likes yours, is it some kind of vscode extension? sorry for my english btw
@@alysonramos3424 It's not the extention. It's the magic and power of nuxt + typescript. Almost in everything where you use nuxt stuff and u are using typescript you will get these suggestions for code completion. English is not a problem, Mine is also very bad. Core thing is we understood each other 🙂
thx
Youa are welcome
nice video Hafiz, greetings from Brazil
Thank you man. Glad you like it Love from Pakistan
It will work with okta?
I don't have any experience with Okta so I can't say anything
Very nice content and well explained. Thank you
You are welcome
Thank you for your efforts brother 💚
My pleasure
Bhai Vuejs ki job market k c ha Pakistan ma?
Pakistan me idea ni me sara kam remote hi krta hn
@@CodeWithHafizJavaid ap Vuejs remote job kartha ho? LinkedIn handle share Karan apni?
@@iUmerFarooq Please checkout the video descriptions where all of the social handles are mentioned
Amazing content
Thank you
Real Time Notification system banaio using same technologies. Jo database ma be save ho and read unread ka option be ho front end phar jasa k facebook wagheera ma hotha ha. Bohot shukriya.
Yes I'm working on messenger clone. Development is done now I have to do the recording and editing
@@CodeWithHafizJavaid ok ok 💚
thanks, sir we like production level content.
Absolutely in love with Vue3/Nuxt3 and the tutorials on this channel...thank you so much
You are welcome. Glad you are enjoying the content
very helpful thanks , please upload more typescript and vue js 3 content
Glad u liked it. Yeah sure, I'll try my best
It is great bring more advanced vue3 content
Thank you
@@hafizjavaid Can you make a content on Role based authentication!!
@@karthikm.1804 Yes I'm working on the E-commerce project in which we have normal and admin user roles and it will be uploaded in 2 to 3 weeks. Development is done now recording and editing is remaining